In the first part of this series we walked through creating multi-step form indicators in PowerApps. This post will help build a simple secondary navigation scheme using breadcrumbs to indicate the location of a user within the app’s hierarchy. They come in handy when apps have several nested screens and an effective visual aid is needed from a user’s perspective for contextual information around primary app screens.
Brian Dang has a terrific video on a fully functional back button system that breadcrumbs your way back based on your clicks. It’s multi-functional and can also be used for building an undo system. This post is an inspiration from his work. Thanks to Mr. Dang for the useful design pattern!
Below is the sample breadcrumb navigation we’ll be creating. I also uploaded a sample PowerApp to the PowerApps Community Gallery with the below breadcrumb design pattern and multi-step form indicator templates. Feel to free to reuse and/or provide feedback. I’d love to know if it helped enhance your PowerApps user experience.
We’ll also create a functional back button to help navigate the crumbs backwards. To keep this post simple and focused on the design pattern for breadcrumbing, we’ll use a Gallery of items as our navigation system rather than individual app screens.
Step 1
Create a blank screen in PowerApps studio and set the following formulas on the ‘OnVisible’ property. First we are creating a Collection of ‘NavigationItems’ that we can use for building the breadcrumbs.
ClearCollect(NavigationItems,{NavigationId:1,Title:"Home"},{NavigationId:2,Title:"Dashboard",ParentId:1},{NavigationId:3,Title:"Reports",ParentId:1},{NavigationId:4,Title:"Admin Center",ParentId:1},{NavigationId:5,Title:"Create Service Request",ParentId:2},{NavigationId:6,Title:"Request A",ParentId:2},{NavigationId:7,Title:"Request B",ParentId:2},{NavigationId:8,Title:"Request C",ParentId:2},{NavigationId:9,Title:"Vendors",ParentId:3},{NavigationId:10,Title:"Archive Service Requests",ParentId:3},{NavigationId:11,Title:"Print Report",ParentId:4},{NavigationId:12,Title:"Email Report",ParentId:4},{NavigationId:13,Title:"Download Report",ParentId:4},{NavigationId:14,Title:"Dispatch Request",ParentId:6},{NavigationId:15,Title:"Update Contact",ParentId:6},{NavigationId:16,Title:"View Invoice",ParentId:6},{NavigationId:17,Title:"Dispatch Request",ParentId:7},{NavigationId:18,Title:"Update Contact",ParentId:7},{NavigationId:19,Title:"View Invoice",ParentId:7},{NavigationId:20,Title:"Dispatch Request",ParentId:8},{NavigationId:21,Title:"Update Contact",ParentId:8},{NavigationId:22,Title:"View Invoice",ParentId:8});Each object in the collection has –
1. NavigationId: Index for navigation items
2. Title: Navigation item display name
3. ParentId: Parent navigation id for parent-child hierarchy
Next we are setting the current naviagtion context to the the current screen with a NavigationId of 1. Lastly, we are creating a ‘NavigationLog’ collection to track user clicks in order to create breadcrumbs.
Set(
CurrentNavigationId,
1
);
ClearCollect(
NavigationLog,
{
Name: LookUp(
NavigationItems,
NavigationId = CurrentNavigationId,
Title
)
}
)Step 2
Insert a blank Gallery control and set the ‘Items’ property to the following formula. Here, we filtering out the child navigation items based on the ‘CurrentNavigationId’ context.
Filter(NavigationItems, ParentId = CurrentNavigationId)Edit the Gallery Item, Insert a label control and set the ‘Text’ to ‘ThisItem.Title’. And then insert the right chevron icon and set the ‘OnSelect’ property to the following formula –
Collect(NavigationLog, { Name: ThisItem.Title, ParentId:ThisItem.ParentId});Set(CurrentNavigationId, ThisItem.NavigationId)The idea here is to continue to append the navigation context on every gallery item click to the “NavigationLog’ Collection so we have a history of the user’s navigation. And then we are updating the current navigation context – ‘CurrentNavigationId’ to point to the most recent screen/gallery item the user is navigating away from.
Even though we are using a gallery to mimic navigation, this can be translated to actual screens with a button based navigation as well.
Step 3
Now let’s get started on the fun part – styling our breadcrumbs. For this example I used a HtmlText control with div tags and inline css styles for a shadow effect. And added a conditional bold on text based on navigation context. Insert a HtmlText control and paste the html content from below –
"<div style='margin: 0 0 0;
padding: 20px;
background: #092162;
display: block;
box-shadow: 0 2px 16px #333;'><div style='margin-left:45px;'>"&
Concat(NavigationLog,
"<span style='font-size:18px;
color:"&If(Name=LookUp(
NavigationItems,
NavigationId = CurrentNavigationId,
Title),"yellow","#fff")&"';
font-weight:"&If(Name=LookUp(
NavigationItems,
NavigationId = CurrentNavigationId,
Title),"bold","semi-bold")&"'>"& Name &"</span>",
"<span style='color:#fff; font-size:20px; font-weight:800; margin:0 10px 0 10px'>></span>") &
"</div>
</div>"There is an outer div as a container/placeholder for the breadcrumbs. For each item in the ‘NavigationLog’ Collection we are concatenating the navigation item’s display name and a ‘>’ text as a separator. The font color & font weight have values set based on a conditional logic. Font color is set to be yellow with a bolder style if that is the current screen the user is in.
Next insert a back icon and place it at the top left corner over the HtmlText control as seen in the image below –
Paste the below formula on the ‘OnSelect’ event of the back icon.
Set(
CurrentNavigationId,
Last(NavigationLog).ParentId
);
Remove(
NavigationLog,
Last(NavigationLog)
)Everytime the user clicks back, two things need to happen –
1. Remove the current clicked crumb from the ‘NavigationLog’ Collection since the user is navigating away.
2. And then reset the current navigation context so the gallery control filters and displays child items associated to the current parent navigation hierarchy.
That’s it! Run the app to test the breadcrumbs and the back system.
Here’s a snippet of the breadcrumbs and the back system in action –
