Dynamic breadcrumbs in Power Apps

Dynamic breadcrumbs in Power App is the result of one of the challenges came across during the build of the client solution. Therefore, think it is worth to share it with community.

Short description of business requirement:

The dynamic breadcrumbs was part of the application which was an interface for the internal orders of the products require for the marketing activities. Above all breadcrumbs were created to improve the UX (User Experience) by:

• providing information to User about the journey and where they are in app
• enabling dynamic navigation
• be easy to use (and build)

Demo

Firstly let’s start with the demo:

Build

The whole idea of Dynamic breadcrumbs is around utilization of two collections, one base and second dynamic.

Base collection

Firstly let’s check the base collection which contains the definition with all navigation properties. Example:

 ClearCollect(colBaseNavigation,
{varName:"Home",varID:1,varSName:"scrWelcome",varScreen:scrWelcome},
{varName:"Categories",varID:2,varSName:"scrCategories",varScreen:scrCategories},
{varName:"Products",varID:3,varSName:"scrItems",varScreen:scrItems},
{varName:"Details",varID:4,varSName:"scrItemView",varScreen:scrItemView})

HINT:
You can store as many properties as you need. However, remember over complicating solution can make it harder to extend and to add new features.

Base collection should be added to OnStart of the application.

Dynamic collection

Now when base collection is ready we can add following code OnVisible of every screen:

ClearCollect(colDynamicNavigation,
FirstN(colBaseNavigation,
LookUp(colBaseNavigation,varScreen=App.ActiveScreen,varID)
))

With that every time when Screen loads we will have the collection with n number of elements based on the varID. For example: Loading Screen scrItems will create a dynamic collection with 3 elements: Home, Categories and Products.

Display

Moving further having both collections gives us the data necessary to create dynamic breadcrumbs in Power Apps. For the display will use the horizontal gallery with a single label. Above all except adding the Dynamic Collection as the source of the gallery the rest of the configuration will be done in the label.

Label properties

Property	Formula
Color	If(varID=CountRows(colDynamicNavigation), lblWhite.Color,lblBlack.Color)
Fill	If(varID=CountRows(colDynamicNavigation), lblBackgroundAlpha.Color,lblWhite.Color)
HoverFill	If(varID=CountRows(colDynamicNavigation), lblBackgroundColor.Color,lblBackgroundAlpha.Color)
OnSelect	Navigate( LookUp(colDynamicNavigation,varName=lblNav_7.Text,varScreen), ScreenTransition.None)
Text	ThisItem.varName

NOTE:
In this app color schema is done via reference to the “Settings” labels colors.

Color, Fill, HoverFill properties are similar. All checking the value of the varID with number of items in collections. Thanks to that the active Screen label will always stand out. Of course to make it better looking other properties can be added like:

• Transition Pop to make more interactive experience
• Width to scale depending on the amount of the rows:

Text property is just the current value of the varName.

OnSelect property is using combination of Navigate function with Lookup. Idea is to find the Screen to which we want move. If you dislike the formula from table you can use the With function. It should increase readability of your code:

With(
{
varScreen:LookUp(colDynamicNavigation,varName=lblNav_4.Text,varScreen)
},
Navigate(varScreen,ScreenTransition.None))

Moving between screens

Finally, the last consideration is how to navigate to the next Screen. For example from Categories to Products. There are at least three ways how this can be done:

At First when you are starting to build. Just hard code that by simple Navigate function to specific screen.

Second option when you want to have some fun. You can extend the collections with new property which will point to the next screen.

Lastly you can try to use the current solution and add +1 to varID. I did that using With function:

With(
{
varNextID:LookUp(colBaseNavigation,varSName=App.ActiveScreen.Name,varID)+1
},
 With(
{
varNextScreen:LookUp(colBaseNavigation,varID=varNextID,varScreen)
},
 Navigate(varNextScreen,ScreenTransition.None)))

As this is eShop solution there is also option to navigate to the Basket. The action to do that is possible at any give moment of the shopping. Configuration of this Screen is simple. Remove the Dynamic Collection action OnVisible. With that User will see the last place of navigation.

Summary

In conclusion, I tried to make the dynamic breadcrumbs in Power Apps easy to setup and scale without the hard coded values (or at least keep them up to minimum). As the result you need only two collections, gallery and one label to start the work. Of course at this stage gallery need to be copied to next screen but maybe as the follow up I should prep the component version? Let me know your thoughts.

Hope you liked this article. And it will help you to build awesome Power Apps.

Thank you for reading. Stay tuned.

Ps. Meanwhile, if you are interested in other ways how to utilize collections and galleries check the Power Menu article where I’m showing how to build quick and good for performance menu in your Power Apps.