Progress Bar Custom Component In PowerApps

In Power Apps, there are a lot of default components availabe for us and we mostly make use of them to get our job done. 
 

Default components include

  • Forms
  • Data Table
  • Gallery (Vertical, Horizontal, etc)
  • Text boxes
  • Drop down's etc 
With the help of existing components most of the general use cases can be done, but there are certain cases where the existing components don't help to meet our requirements. 
 
To overcome this, Power Apps has this amazing feature to develop our own components in our own design and the primary advantage is that once we create any custom component, we can re-use this with any of the other canvas applications.
 
Let's see how to create a Custom Progress-Bar Component.
 
Step 1
 
Take a new Canvas App in Power Apps after you sign-in.
 
Step 2
 
Select Components in the left side Tree View
 
Step 3
 
Click on + New Component and name it as “Progressbar” in PowerApps components
 
 
Step 4
 
Edit Size of the component (Width * Height) Ex: - 1200*100
 
Step 5
 
Add a Vertical Gallery in the component. Change its layout to title only.
 
Resize the Gallery also (Width * Height) Ex: - (1200 * 100)
 
Step 6
 
Add Properties to the Progress bar. Click on Component and you can add by clicking on +
 
 
Step 7 - (Items in component)
 
After adding above custom properties. Click on your component and update Items property with the below code.
  1. Table(  
  2.     {  
  3.         Label: "Initiation",  
  4.         Id: 1,  
  5.         Visible: true  
  6.     },  
  7.     {  
  8.         Label: "Kick-off",  
  9.         Id: 2,  
  10.         Visible: true  
  11.     },  
  12.     {  
  13.         Label: "Schema Convertion",  
  14.         Id: 3,  
  15.         Visible: true  
  16.     },  
  17.     {  
  18.         Label: "Data Migration",  
  19.         Id: 4,  
  20.         Visible: true  
  21.     }  
  22. )  
 
Step 8 - (Colors in component)
 
After adding the above custom properties, click on your component.
  1. {  
  2.     StateToDo: "Gray",  
  3.     StateActive: "#FFBF00",  
  4.     StateDone: "Green",  
  5.     LabelTodo: "#000000",  
  6.     LabelActive: "DB5E04",  
  7.     LabelDone: "#808080",  
  8.     CircleBorderColor: "#FFFFFF"  
  9. }  
Step 9 - (activeStep in component)
 
This is something that you need to pass from the application. (You can try editing this field with numbers ranging from 1 to 5 and observe how progress bar changes.)
You can pass values dynamically to this in your application by passing value from API or i/p by user based on your requirement.
 
Step 10 - (Update Gallery properties)
 
Items: Progressbar.items
WrapCount:CountRows(Progressbar.items)
 
Step 9
 
Add a circle and check mark into the Gallery
 
Circle
 
 
Checkmark
 
Circle Properties (Fill)
  1. ColorValue(  
  2.             If(  
  3.                 ThisItem.Id > Progressbar.activeStep,  
  4.                 Progressbar.colors.StateToDo,  
  5.                 ThisItem.Id = Progressbar.activeStep,  
  6.                 Progressbar.colors.StateActive,  
  7.                 ThisItem.Id < Progressbar.activeStep,  
  8.                 Progressbar.colors.StateDone,  
  9.                 "Gray"  
  10.                 )  
  11.                 )  
Check Mark Properties (visible)
  1. If(ThisItem.Id < Progressbar.activeStep,true,false)  
Click on Save and give any name to the application. That's all, now the Progress Bar is ready to use. 
 
Demo
How to Use it in the Application 
  1. Select Screens in the Tree View and select the screen that is already created where you want to add the progress bar.
  2. In the top Menu bar, click on insert
  3. Select Custom & you can see the Progress Bar Connector that you created just now. 
  4. Click on it and it will get added to your application.
If your requirement is to use the Custom Connector in different applications, then follow the below steps,
  1. Create your custom connector in a new canvas app and save the application with some name.
  2. Open the canvas app to where you want to add custom connector.
  3. In the top menu bar, click on Insert
  4. Select Custom connector & click on Import Component.
  5. You will see the Custom Connector with the name that you created in the above step 1.
  6. Select & click on Import.