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 –
Section (Indicates an index for the section
Title (Display Title)
Screen (Associated app screen)
IsCompleted (Track the status of the section)
Color (Base font color)
CompletedColor (Font color for completed sections)
Fill (Base shape Fill color)
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 –
