7 Great Examples of Navigation, Tabs and Breadcrumbs in PowerApps

7 Great Examples of Navigation, Tabs and Breadcrumbs in PowerApps

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.

1. Blog: Tab Control in PowerApps for Full Screen Formats

Author: Audrie Gordon, Senior Program Manager, PowerApps

Click Here to read the Blog

Four Sections of Tabbed-interface for a Tablet-Format PowerApp

Four Sections of Tabbed-interface for a Tablet-Format PowerApp

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.

2. Blog: Tabbed User Interface – Mobile Version

Author: Audrie Gordon, Senior Program Manager, PowerApps

Click Here to Read the Blog

Mobile-based tabbed or gallery navigation UI

Mobile-based tabbed or gallery navigation UI

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

Click Here to Watch the Video

Simple canvas sections connected to tabs

Simple canvas sections connected to tabs

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

Click Here to Watch the Video

Creating tabbed forms with a perfect User Interface

Creating tabbed forms with a perfect User Interface

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

Click Here to Watch the Video

Groups of form items linked with tabs

Groups of form items linked with tabs

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

Click Here to Read the Blog

Building navigation collection to create a Navigation

Building navigation collection to create a Navigation

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.

7. Blog: Multi-step form indicators in PowerApps

Author: Geetha Sivasailam

Click Here to Read the Blog

Examples of different kinds of form indicators

Examples of different kinds of form indicators

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.

Conclusion

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!