According to the Endowed Progress Effect (which is a phenomenon integrated into designing any UX process based on how the human brain makes decisions) we’re more likely to complete an action if there’s an illusion of progress and an effective visual aid of contextual information for landing pages. The best examples I can think of are –

1. Multi-step forms that break up a long intimidating form into smaller sections and provides the user a sense of accomplishment as they proceed from step to step.
2. Breadcrumb navigation to improve findability for users especially in apps with a lot of screens.

How do we incorporate those fancy, stylish and yet functional multi-step form indicators seen on websites in PowerApps using the OOB controls without custom scripts?

This is a two part series post with the first being multi-step form indicators in PowerApps and the second part of the series will walk through creating breadcrumb navigation from scratch. 

Below are few clickable multi-step indicator styles I’ve been experimenting & playing around with. Also, I uploaded a sample app with all of the below design templates to the PowerApps Community Gallery. Feel to free to reuse and/or provide feedback. I’d love to know if it helped enhance your PowerApps user experience.

Let’s build one from scratch…

For this example we will need a PowerApp screen per form section behind the scenes but the overall visual effect on the UX side will be seamless for the user. Here’s the design we will be building in this post-

This design of multi-step indicators will provide contextual information (tiny blue inverted triangle) on which section is currently being worked on and also a visual aid (solid green circle) to keep the user informed on accomplished sections.

Step 1

We will be using a Service Request app as an example with a multi-step form for submitting a new service request. Create 4 blank screens in PowerApp studio with the following names –
RequestInfoScreen, ContactInfoScreen, NotifcationInfoScreen & AgreementScreen

Set the ‘OnVisible’ property of all 4 screens to the following and replace ‘RequestInfoScreen’ with the name of the current screen you are updating the property for.

UpdateContext({selectedScreen:RequestInfoScreen});

Step 2

Next we need to create a structure of properties for the multi step indicators so they can be used dynamically on all form related screens in the app. Here’s where Collections come into play. We will create a collection of sections and related properties for the multi form indicator. Here are the 8 properties per section that we will be using to create the multi-step navigation style –

1. Section (Indicates an index for the section
2. Title (Display Title)
3. Screen (Associated app screen)
4. IsCompleted (Track the status of the section)
5. Color (Base font color)
6. CompletedColor (Font color for completed sections)
7. Fill (Base shape Fill color)
8. CompletedFill (Shape Fill color for completed sections)

All colors are in RGBA format. Adobe color wheel is a good resource for determining RGB codes.  Let’s start building out the collection of records for each of those sections. Paste the below formula into the app ‘OnStart’ property of the app.

UpdateContext({selectedScreen:RequestInfoScreen});ClearCollect(MultiFormSections,{Section:1,Title:"Service Request",Screen:RequestInfoScreen,IsCompleted: true ,Color:RGBA(0,98,155,1),CompletedColor:RGBA(255,255,255,1),Fill:RGBA(241,241,241,1),CompletedFill:RGBA(127,178,57,1)},{Section:2,Title:"Contact",Screen:ContactInfoScreen,IsCompleted: false ,Color:RGBA(0,98,155,1),CompletedColor:RGBA(255,255,255,1),Fill:RGBA(241,241,241,1),CompletedFill:RGBA(127,178,57,1)},{Section:3,Title:"Notifications",Screen:NotificationInfoScreen,IsCompleted: false ,Color:RGBA(0,98,155,1),CompletedColor:RGBA(255,255,255,1),Fill:RGBA(241,241,241,1),CompletedFill:RGBA(127,178,57,1)},{Section:4,Title:"Agreement",Screen:AgreementScreen,IsCompleted: false ,Color:RGBA(0,98,155,1),CompletedColor:RGBA(255,255,255,1),SelectedFill:RGBA(252,146,97,1),Fill:RGBA(241,241,241,1),CompletedFill:RGBA(127,178,57,1)})

The above formula is not formatted but you can paste it into the formula bar and click on ‘Format Text’ for clarity on the collection structure. Below is a snapshot of how one record in that collection looks like –

ClearCollect(
    MultiFormSections,
    {
        Section: 1,
        Title: "Service Request",
        Screen: RequestInfoScreen,
        IsCompleted: true,
        Color: RGBA(
            0,
            98,
            155,
            1
        ),
        CompletedColor: RGBA(
            255,
            255,
            255,
            1
        ),
        Fill: RGBA(
            241,
            241,
            241,
            1
        ),
        CompletedFill: RGBA(
            127,
            178,
            57,
            1
        )
    }
)

Step 3

Navigate to the first screen (RequestInfoScreen) and insert a blank Gallery control. Set the ‘Items’ property of the gallery to the Collection we created above – MultiFormSections.

Then edit the Gallery item and insert the following 5 controls one by one –

1.Label control (To display form section index)
Width & Height: 26
Size: 18
Color: If(ThisItem.IsCompleted, ThisItem.CompletedColor,ThisItem.Color)
Setting the color based on section completion status
Text: ThisItem.Section (reading the value of section property from the collection)

2.Circle shape (To display form section index)
Width & Height: 40
Fill: If(ThisItem.IsCompleted, ThisItem.CompletedFill,ThisItem.Fill)
Setting the circle fill color based on section completion status
Text: ThisItem.Section (reading the value of section property from the collection)

3.Label control (To display form section title)
Width & Height: 262 & 28
Size: 12
Align: Center
Color: ThisItem.CompletedColor
Setting the color to white

4.Rectangle shape (To act as a shell/container for all the controls above)
Width & Height: 275 &102
Fill: RGBA(9, 33, 98, 1)

5.HtmlText control (Using html for visual indication on current section being worked on)
Width & Height: 63 & 39
Visible: If(ThisItem.Screen = selectedScreen, true,false)
Only visible if that’s the current section.
HtmlText: Pure html/css to build an inverted blue triangle.
Css tricks is a good resource for building pure css based shapes without requiring images or icons. Paste below html content to create the inverted triangle.

"<div style='width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #092162;'>
</div>"

Now that we have all the controls for the Gallery item added, move/rearrange them to match their placements in the image below –

Lastly set the ‘OnSelect’ property of the Gallery control to the following – 

Navigate(ThisItem.Screen, ScreenTransition.Fade)

This will help navigate back and forth form sections by clicking on the multi-step indicators.

Step 4

To be able to track user progress and show visual confirmation, let’s add a ‘Submit’ button to the screen. Set the ‘OnSelect’ property of the button with the fomula below:

Patch(
    MultiFormSections,
    LookUp(
        MultiFormSections,
        Section = 1
    ),
    {IsCompleted: true}
);
Navigate(
    LookUp(
        MultiFormSections,
        Section = 2
    ).Screen,
    ScreenTransition.Fade
)

On submitting a section, this formula looks up the object for that section in the ‘MultiFormSections’ collection and Patches the ‘IsCompleted’ value to be true. Then navigates the user to the next section.

You could specify the screen name directly without needing to do a lookup. The above approach helps keep your formula dynamic. You’d only need to update any of the section’s property values at one location (‘OnStart’ property where this collection was initialized) rather than updating every screen where the property is referenced.

Step 5

We have done all the setup for just 1 screen so far and need to replicate it on the other screens as well so that from a UX perspective it would look like you are tabbing through form sections while they are individual screens behind the scenes. Luckily the PowerApps copy/paste controls feature works great across screens. Right click to copy the Gallery control and the Submit button from the left tree view and then paste them into the the screen you want. This should bring over all the formulas and property values.

Update the formula for the submit buttons on all screens to reflect the right Section indexes.

We are now done designing the multi-step form indicators. Run the app and Submit the sections one by one to see the colors and indicators change.

Here’s how the multi-step form indicators look like in action –

In the next part of this series, we’ll create a simple breadcrumb navigation  that indicates the location of the user within the app’s hierarchy along with a back button to navigate the crumbs backwards.