Introduction
In today’s article, we will learn about the great use cases of Horizontal Progress Bar in PowerApps. Basically, a Progress Bar is used to show the progress of any task which is being carried out. We are going to use the PowerApps and Components controls to create Horizontal Progress Bar.
Create PowerApps
You need to first login to
PowerApps using your tenant account and create one blank canvas app using a tablet layout and provide your app name.
Create Components
Click on the Insert menu from the top bar in PowerApps and create a new component from the Custom menu and rename it "HorizontalProgressBar".
Now, insert the gallery control in component and select the Title only layout. Select the component and create a new custom property. Give the name of the property as Items and select the data type as Table from the dropdown and save it. Also, set the WrapCount property to CountRows(HorizontalProgressBar.Items) so it will display the items dynamically based on the items count.
Set the Items property that we just created in the above step for the component. As we selected the data type as a table, we need to provide the details in tables like ID, Label, and Visible information. For this session, I’ve created the below tables in Items property of the component.
Now, select the gallery control and set the Items property to HorizontalProgressBar.Items. It will display the information of the component table that we just set in the above step.
In the next step, add a circle icon in gallery control and set it before the Title. Also, add the check icon inside the circle icon. Insert the rectangle control inside the gallery and set the background color to gray and bring forward all the gallery controls and set backward the rectangle control.
Again, select the component and create 2 more custom property for Colors data type as Record and Active Step data type as number.
Now, we need to set the component property for Colors and Active Step that we just created. Select the component and set the Colors property as below. For ActiveStpe, you can provide any ID for time being, like 1 or 2.
Select the circle icon and set the Fill property using the ColorValue function, as shown below.
We need to make visible the true and false check icon inside the circle based on the active step condition. Set the Visible property of the check icon as below.
Now, it’s time to use this component in the PowerApps screen. I’ve created four PowerApps screens like Info, Contact, Details, and Confirm for this session. Add HorizontalProgressBar component on each screen from the Custom menu and set the ActiveStep property 1,2,3 and 4 id for each screen.
It’s time to run the PowerApps and test the Horizontal Progress Bar based on all the screens. Below is the output for this session.
Conclusion
This way, we can use the component and PowerApps screens to create the progress bar. This is a small use case, but we can use this for the broader scope as per the business requirements. Happy Learning!!