PowerApps: Approval Flow (Component)

 Hello Friends,

Welcome back with another post on PowerApps. Sometimes, we require to show the approval flow of any request in pictorial representation.

Here a request has 5 level of approvals. We are trying to show below information for each approver- 

1. Photo
2. Name
3. Designation
4. Approval Status
1. Approved: Green
2. Pending: Orange
3. Rejected: Red
4. Skipped: Gray
5. Not Started: White

There are several ways to show the information. It depends upon the requirement of the client as well as other factors. I have show above the initial 2 ways. Another one, we will try to create. 🙂

Basically, we have created a component here in PowerApps. The benefit of making this as component is that, any change required in design will make reflected everywhere. Secondly, it is purely dynamic. You may have 2/3/4... level approval. It will manage accordingly.

So, let's start-

1. Open the PowerApps Development Environment. Then click on-
1. Apps link from left navigation. 
2. Components libraries (preview) from right panel.
3. + New component library (preview) on top menu strip.
2. 
3. Basically, there are 2 ways to create a component in PowerApps-
1. Inside a particular app. The drawback is that scope of such components is restricted to that app only. You cannot re-use that component in other apps.
2. In component library. The benefit of such components are available for use in all apps.
4. So, here, we are creating Component library.
5. Now, give a suitable name to this component library-
6. 
7. Click on Create. It will create a library with this name and add a default blank component named Component1 in this library. The benefit of Component library is that you can create multiple component in a single library. For example, as we have seen 2 ways to create Approval Flow component in the first screenshot and here we are creating the 3rd way. It means we have created 3 types of component for same feature. So, we can create all these 3 components in a single library and choose as per our requirement in PowerApps. 
8. 
   
   
9. Rename this component as "ApprovalComponentRoundImage". Set height of component as 200.
10. Add a custom property of input type so that we can ask the screen to provide the approvers list.
1. Display Name: Approvers List
2. Description: Please provide list of approvers.
3. Property type: Input
4. Data type: Table
11. Click on Create.
12. 
13. It will create a custom property. Now click on this property and you will find a sample table in the function box.
14. 
15. Replace this table with below one. This is the sample of the table which we will pass from screen-
16. 
17. Now, add a Blank horizontal gallery-
1. Name: GalleryApprovers
2. Height: Parent.Height
3. Width: Parent.Width
4. Items: ApprovalComponentRoundImage.ApproversList
5. TemplatePadding: 0
6. TemplateSize: 200 (Do not change right now, we will change it later)
18. Now click on edit pencil icon of gallery template so that we can add control to it.
19. 
20. So, now, we have the sample data and we have the gallery. It's time to add controls to display the data.
21. To display the Photo, we will use 3 controls-
1. Circle
2. Icon
3. Image
22. To display the Approval Status, we will use 1 control-
1. Icon
23. To display the Name and Designation, we will use 1 control for each value-
1. Label
24. For User Photo: 
25. Add a circle. You will find circle control in Shapes section from left navigation menu >> + Insert >> Shapes.
1. Name: PhotoCircle
2. Height: 100
3. Width: PhotoCircle.Height
4. X:(GalleryApprovers.TemplateWidth-PhotoCircle.Width)/2
5. Y: 0
6. Fill: RGBA(230, 230, 230, 1)
7. 
26. Now, add Icon of type Person-
1. Name: PhotoIcon
2. Height: PhotoCircle.Height*0.6
3. Width: PhotoIcon.Height
4. X:PhotoCircle.X + (PhotoCircle.Width - PhotoIcon.Width) / 2
5. Y: (PhotoCircle.Height-PhotoIcon.Height)/2
6. 
27. Now add an Image control-
1. Name: PhotoImage
2. Height: PhotoIcon.Height
3. Width: PhotoIcon.Width
4. X: PhotoIcon.X
5. Y: PhotoIcon.Y
6. RadiusBottomLeft: PhotoIcon.Height/2
7. RadiusBottomRight: PhotoImage.RadiusBottomLeft
8. RadiusTopLeft: PhotoImage.RadiusBottomLeft
9. RadiusTopRight: PhotoImage.RadiusBottomLeft
10. 
28. For Approval Status:
29. Add an Icon (for now select Check(badge))-
1. Name: ApprovalStatusIcon
2. Height: PhotoCircle.Height*.3
3. Width: PhotoCircle.Width*.3
4. X: PhotoCircle.X+PhotoCircle.Width-ApprovalStatusIcon.Width
5. Y: PhotoCircle.Y+PhotoCircle.Height-ApprovalStatusIcon.Height
6. 
30. For Approver Name:
31. Add a Label-
1. Name: DisplayNameLabel
2. Size: 16
3. FontWeight: Bold
4. Align: Center
5. AutoHeight: true
6. DisplayMode: View
7. PaddingTop: 1
8. PaddingBottom: 1
9. PaddingLeft: 5
10. PaddingRight: 5
11. Width: GalleryApprovers.TemplateWidth
12. X: 0
13. Y: PhotoCircle.Y+PhotoCircle.Height
32. For Approver Designation:
33. Add a Label-
1. Name: DesignationLabel
2. Size: 16
3. FontWeight: Normal
4. Italic: true
5. Align: Center
6. AutoHeight: true
7. DisplayMode: View
8. PaddingTop: 1
9. PaddingBottom: 1
10. PaddingLeft: 5
11. PaddingRight: 5
12. Width: GalleryApprovers.TemplateWidth
13. X: 0
14. Y: DisplayNameLabel.Y+DisplayNameLabel.Height
34. Final look of template:
35. 
36. The basic designing has been completed. Now, we need to bind data to these controls. But, there is a problem. The approval status can be one of the below possible values-
1. Not Started (we will display WHITE filled circle)
2. Pending (we will display ORANGE filled circle)
3. Rejected (we will display RED filled circle with white ╳ in the middle)
4. Approved (we will display GREEN filled circle with white ✓ in the middle)
5. Skipped (we will display GRAY filled circle)
37. There are 2 ways to do it-
1. Mention colors as static
2. Make input properties for these status and assign it accordingly.
38. We will opt for 2nd option.
39. Therefore, create custom property respective to each approval status.
40. 
41. 
    
    
42. Selected Colors are-
1. Approved: Green
2. Pending: Orange
3. Rejected: Red
4. Skipped: LightGray
5. NotStarted: White
43. Now click on ApprovalStatusIcon and choose the Fill property and update the colors as below-

44. Switch(
        ThisItem.ApprovalStatus,
        "Not Started",
        ApprovalComponentRoundImage.NotStartedColor,
        "Pending",
        ApprovalComponentRoundImage.PendingColor,
        "Approved",
        ApprovalComponentRoundImage.ApprovedColor,
        "Rejected",
        ApprovalComponentRoundImage.RejectedColor,
        "Skipped",
        ApprovalComponentRoundImage.SkippedColor
    )
    

45. 
    
    
46. Update the Color property as (The reason is we have to display the icon type only if it is Approved/Rejected. For all other cases, we will display only filled circle)-

47. Switch(
        ThisItem.ApprovalStatus,
        "Not Started",
        ApprovalComponentRoundImage.NotStartedColor,
        "Pending",
        ApprovalComponentRoundImage.PendingColor,
        "Approved",
        Color.White,
        "Rejected",
        Color.White,
        "Skipped",
        ApprovalComponentRoundImage.SkippedColor
    )
    

48. Update the Icon property as-

49. Switch(
        ThisItem.ApprovalStatus,
        "Not Started",
        Icon.Information,
        "Pending",
        Icon.Information,
        "Approved",
        Icon.CheckBadge,
        "Rejected",
        Icon.CancelBadge,
        "Skipped",
        Icon.Information
    )
    

50. Update the Tooltip property and bind it with 
1. ThisItem.ApprovalStatus
51. With this, Approval Status icon has been completed.
52. Now bind the Approver Name and Designation. For this, update the Text property of-
1. "DisplayNameLabel" label as 
1. ThisItem.UserName
2. "DesignationLabel" label as 
1. ThisItem.UserDesignation
53. Now, the remaining part is image link. For this, you need to add connection of "Office 365 Users".
54. 
55. Update the Image property of "PhotoImage" control as-
1. Office365Users.UserPhotoV2(ThisItem.UserEmail)
56. 
57. I think, We have covered all the points. Let's test it.
58. In order to test the component we have created, PowerApps, provide a default screen in this Component library-
59. 
60. Click on Screens. The click on Insert from tp navigation menu, then click on Custom. You will find the component you had created just now-
61. 
62. Click on this component so that it get added on screen.
63. 
64. You can seen in right side properties pane, all the default values of Custom Input Properties is getting reflected.
65. Now, we will add more approvers in table. So, update the ApproversList property. Sample table is given below-

66. Table(
        {
            SrNo: 1,
            UserName: "Sachin Jain",
            UserDesignation: "Module Leader",
            Icon: Icon.Person,
            ApprovalStatus: "Approved",
            UserEmail: "ml@companyname.com"
        },
        {
            SrNo: 2,
            UserName: "Lokesh Kumar",
            UserDesignation: "Project Leader",
            Icon: Icon.Person,
            ApprovalStatus: "Approved",
            UserEmail: "pl@companyname.com"
        },
        {
            SrNo: 3,
            UserName: "Nitin Paliwal",
            UserDesignation: "Senior Project Manager",
            Icon: Icon.Person,
            ApprovalStatus: "Skipped",
            UserEmail: "spm@companyname.com"
        },
        {
            SrNo: 4,
            UserName: "Mayank Singh",
            UserDesignation: "Deputy General Manager",
            Icon: Icon.Person,
            ApprovalStatus: "Pending",
            UserEmail: "dgm@companyname.com"
        },
        {
            SrNo: 5,
            UserName: "Finance Department",
            UserDesignation: "Finance Department",
            Icon: Icon.People,
            ApprovalStatus: "Not Started",
            UserEmail: "sample@companyname.com"
        }
    )
    

67. Note: Here, I have added a sample email id for Finance Department UserEmail property because, Office365UserPhotoV2 will through error in case of blank value, hence, we have passed a dummy email id.
68. Save it and run the app.
69. 
70. As you can see, images of all approvers are getting appeared as well as the approval status color coding is also well managed. Have you noticed that the image of Finance department is not appearing, instead a person icon is showing. This is the reason, we have taken Icon control just below the Image control. In case, if image of any user is not available in system, then default person icon will be shown.
71. With this, we can create an approval flow display.
72. I had added a landscape screen and added the component upon it. SEcondly, I had changed the TemplateSize property of gallery "GalleryApprovers" to 200. As we have used all dimensions related to each other, therefore, it didn't hampered our design. The design managed the controls size and position itself.
73. 
74. Now there are 2 more changes which we can add to it.
1. Flow line (joining one approver to other)
2. Look of approval status icon. As we can see, the square is not appealing good.
75. First we will add flow lines.
76. Add a rectangle and update below properties-
1. Name: FlowLineLeftRectangle
2. X: 0
3. Y: PhotoCircle.Y+PhotoCircle.Height/2
4. Width: PhotoCircle.X
5. Height: 5
77. Add another rectangle and update below properties-
1. Name: FlowLineRightRectangle
2. X: PhotoCircle.X+PhotoCircle.Width
3. Y: PhotoCircle.Y+PhotoCircle.Height/2
4. Width: GalleryApprovers.TemplateWidth-PhotoCircle.X-PhotoCircle.Width
5. Height: 5
78. The output will be-
79.  
80. Looking cool. But we don't want the left most and the right most line as these are starting and ending points.
81. Change the Visible properties for above rectangles-
1. FlowLineLeftRectangle-
1. Visible: If(ThisItem.SrNo = First(ApprovalComponentRoundImage.ApproversList).SrNo,false,true)
2. FlowLineRightRectangle-
1. Visible: If(ThisItem.SrNo = Last(ApprovalComponentRoundImage.ApproversList).SrNo,false,true)
82. Let's see the output-
83. 
84. Wow.
85. Now we will update the approval status icon feature.
86. Add a circle control-
1. Name: ApprovalStatusCircle
2. X: ApprovalStatusIcon.X
3. Y: ApprovalStatusIcon.Y
4. Height: ApprovalStatusIcon.Height
5. Width: ApprovalStatusIcon.Width
87. Reorder the ApprovalStatusIcon and set it's order to "Bring to front".
88. 
89. Now we will update the Fill property of ApprovalStatusCircle-

90. Switch(
        ThisItem.ApprovalStatus,
        "Not Started",
        Color.White,
        "Pending",
        Color.Orange,
        "Approved",
        Color.Green,
        "Rejected",
        Color.Red,
        "Skipped",
        Color.LightGray
    )
    

91. Now update below properties also for ApprovalStatusCircle-
1. BorderColor: White
2. BorderThickness: 1
92. Now update the below properties of ApprovalStatusIcon-
1. Fill: Transparent
2. Visible: 

1. Switch(
       ThisItem.ApprovalStatus,
       "Not Started",
       false,
       "Pending",
       false,
       "Approved",
       true,
       "Rejected",
       true,
       "Skipped",
       false
   )
   

93. Now save the component and click on Screen tab and then play the App.
94. 
95. In case, if you wish to show the approval status circle as full circle for Not Started status, you may add logic on BorderColor for ApprovalStatusCircle.
96. This way, we can create approval flow component.
97. There can be many more ways to design the component for the same functionality. This post is to give an idea for the same.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !