Tabs, navigation and breadcrumbs are a great way to optimize your PowerApp screens to collect more data and to offer more value to your users.
Users find it easy to complete a job if its process is broken into bite-sized tasks and with each completed task or step they feel a sense of progress. Therefore, breaking a form or process into steps using tabs, breadcrumbs and navigation allows easy dissemination and collection of data.
Here is a curated list of articles and videos, which will help you create tabs, breadcrumbs and navigation in your PowerApps for different screen sizes.
Author: Audrie Gordon, Senior Program Manager, PowerApps
This wonderful introductory article is about how to use “Tabbed User Interface” to use a wide format app’s space optimally to collect more information than the screen space allows. Audrie takes a simple and practical example given by PowerApps Engineering Manager Carlos Aguilar Mares.
Audrie breaks down Carlos’ process of creating a tabbed interface for a tablet-format PowerApp into four sections—The title and submit icon; Form Repeating fields, Tabbed panel area; Sub-gallery of orders (this is optional and driven from a separate SharePoint list).
There are brief and clear instructions in the article on how to use PowerApp templates, controls, galleries and properties to accomplish each section to get a tabbed interface for tablet-format apps.
Audrie also shares the PowerApp she created using the steps given in the article and a detailed, step-by-step PowerPoint that you can follow to achieve the same.
Author: Audrie Gordon, Senior Program Manager, PowerApps
This is Part two to the above article by Audrie Gordon. In this article, Audrie covers mobile version of tabbed or gallery navigation UI, using a quick example of a mobile-based PowerApp built by Mehdi Slaoui Andaloussi.
In five easy steps, Audrie covers the process of creating a gallery navigation for a mobile-based PowerApp. She shows how to work with data fields, properties and design elements, through screenshots and text examples, to get a fully functional mobile gallery. At the end, she provides a link to Mehdi’s app for testing.
3. Video: PowerApps - Simple Tabs and a Canvas
Hosted by: WebDev By The Bay
This is a one-minute, twenty-second video covering the most basic steps of creating three tabs and relating them with three sections of a canvas created using canvas control.
It’s easy and simple to understand and follow. The video is great for a quick review of the starting concepts covered in the above articles. This video helps you set a base to creating detailed tabbed forms.
4. Video: SharePoint Power Hour: Tabbed Forms
Hosted by: Laura Rogers
Laura Rogers has created an hour-long screen recording to show all the steps involved in creating a tabbed SharePoint list form using PowerApps. The video may be long, but it is comprehensive, and it covers the smallest details and pitfalls that one must be aware of to create a perfect tabbed form.
Laura covers the properties to be used to create each element of each form. She goes into details of creating the right aesthetics and user interface that is intuitive and easy to use. She literally types every piece of data on screen, for viewers, so that no detail goes unnoticed. Watching this video will make you a pro in creating tabbed forms.
5. Blog: Tabbed Forms in PowerApps
Author: Laura GB, Contributor at C365 Community
You can read this article and make a tabbed form in minutes. This article covers details on how to create a PowerApps form with three tabs using a gallery and other controls. Laura has broken down the process in three steps—creating a collection, building a gallery, and creating a group of controls for each tab.
Each of the three sections is further divided into clear-to-understand points and sections about how data is inserted and what properties are used. Examples are given for each section.
One example of the clarity and simplicity of the article is in the given screenshot that shows how a group of items is linked with a Tab selection by changing the related function field.
6. Blog: Building Navigation using a Gallery
Author: Fidelity Factory
This is, by far, the simplest article on how to create navigation in PowerApps. It uses two controls and a gallery to create tabs. It covers the same concepts as the article by Laura GB, but Fidelity Factory goes a step further to make it crisper and shorter for a quick reference.
They give five steps with screenshots/text illustrating functions, property data, and design elements to make navigation UI in PowerApps.
The five steps covered in this article are—creating collection, building gallery, adding button to gallery template, styling buttons, and copying & pasting gallery to make screens for all tabs/buttons.
Author: Geetha Sivasailam
This is another great blog on how to make form indicators and breadcrumbs quickly and in a step-by-step manner. This article by Geetha emphasizes on how form indicators helps users track their progress and motivate them to complete the task at hand.
Geetha uses five steps to create a multi-step navigation form—Creating screens for each step, setting properties to be created for each section of collections, adding Gallery and setting its control, adding a form submit button, and replicating of these four points for each tab’s screen.
The article helps create an aesthetically appealing multi-step navigation that will help your users complete their tasks in a step-by-step manner. At the end, there is a link to another article on how to create a breadcrumb UI.
All the above articles and videos are great sources to gain knowledge and skills to create aesthetically appealing and well-functioning tabbed forms for various screen sizes.
Such forms are great for gathering more information than your screen size allows, and they also help creating navigations that enables users to follow a step-by-step process of providing information or completing tasks.
With the help of these learning resources, you will also learn to pay attention to dynamic design details to offer a smooth and intuitive user experience.
Hope you find these resources useful. Have fun building tabbed forms in PowerApps!