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.

Table(
    {
        Label: "Initiation",
        Id: 1,
        Visible: true
    },
    {
        Label: "Kick-off",
        Id: 2,
        Visible: true
    },
    {
        Label: "Schema Convertion",
        Id: 3,
        Visible: true
    },
    {
        Label: "Data Migration",
        Id: 4,
        Visible: true
    }
)

 

Step 8 - (Colors in component)

 

After adding the above custom properties, click on your component.

{
    StateToDo: "Gray",
    StateActive: "#FFBF00",
    StateDone: "Green",
    LabelTodo: "#000000",
    LabelActive: "DB5E04",
    LabelDone: "#808080",
    CircleBorderColor: "#FFFFFF"
}

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)

ColorValue(
            If(
                ThisItem.Id > Progressbar.activeStep,
                Progressbar.colors.StateToDo,
                ThisItem.Id = Progressbar.activeStep,
                Progressbar.colors.StateActive,
                ThisItem.Id < Progressbar.activeStep,
                Progressbar.colors.StateDone,
                "Gray"
                )
                )

Check Mark Properties (visible)

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.