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 !

Create PDF With Image Logo In SharePoint Online (Power Automate) And Schedule MS Teams Meeting

 Hello Friends,

Welcome back with another post on SharePoint Online functionality. Today, we will try to create a PDF with image as a logo and send it over email. Actually, it's not a rocket science to create a PDF in MS Flow and send it over email. We need an HTML template (a html replica of the letter with placeholders defined to replace the values dynamically) and an image to be place in the template, then we will convert it into PDF and send it over email as attachment. For this, let's take a scenario of Company Interviews process. We will send an interview schedule letter as a PDF  to the candidate over email. Let's start-

1. First we need a SharePoint list where we can save candidate's interview schedule details. I had created one as below-
2. 
   
   
   
   
3. 
   
   
   
   
4. We need a document library also where we can place our HTML template of letter as well as the company logo image.
5. 
   
   
   
   
6. The HTML is (InterviewLetterTemplate.html):- 

7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <!-- saved from url=(0014)about:internet -->
   <head>
   <meta charset="utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
   <title>Appointment Schedule</title>
   </head>
   <body>
   <!--Wrapper -->
   
   <table width="100%">
   	<tr>
   		<td width="30%" style="float:left;">
   			<img src="{logosrc}" style="width:100px;"/>
   		</td>
   		<td width="35%" style="text-align:center;">
   			Appointment Schedule
   		</td>
   		<td width="35%" style="float:right;">
   			{todaydate}
   		</td>
   	</tr>
   </table>
   <div style=width:100%;height:3px;background-color:#66CCFF;">
   </div>
   <div>
   	<p>
   		Dear <strong>{candidatename}</strong>,
   	</p>
   	<p>
   		We are pleased to inform you that your appointment for interview for the post of <strong>{postappliedfor}</strong> has been scheduled.
   	</p>
   	<p>
   		 The scheduled datetime are: <strong>{appointmentdate}</strong> at <strong>{appointmenttime}</strong>.
   	</p>
   	<p>
   		The interview location will be {interviewlocation}.
   	</p>
   	<p>
   		Please reach the venue at least 30 minutes before the scheduled time to complete the pre interview formalities.
   	</p>
   	<p>
   		<br/>
   		<br/>
   	</p>
   	<p>
   		Regards,
   	</p>
   	<p>
   		Admin
   	</p>
   	
   </div>
   <!--Ends Wrapper -->
   </body>
   </html>
   

8. The image is (LetterLogo.png)-
9. 
   
   
   
   
10. Now, we have to create a Flow to perform the activity. For this, click on "Automate" >> "Power Automate" >> "See your flows" menu  of InterviewSchedule list.
11. 
    
    
    
    
12. You can click on "Create a flow" also but here you need to drill down more in order to get the desired flow type. So , I feel the easy way to create a new one using "See your flows". 😉
13. So, when you click on "See your flows", it will take you to MS Flow Portal. Here click on "+ Create" link from left menu.
14. 
    
    
    
    
15. It will load the available option of type of flows, you can create. Choose "Automated cloud flow".
16. 
    
    
    
    
17. It will open a popup where it will ask you to choose the type of trigger upon which you want to execute your flow. It will also ask you to give your flow a lovely name.
18. 
    
    
    
    
19. Now click on Create button.
20. It will create a basic flow and show the below screen-
21. 
    
    
    
    
22. Click on "Site Address" drop down. It will show all the site you are having on your tenant. Select the site where you had created the list "InterviewSchedule".
23. Once you select the site, it loads all the lists in "List Name" drop down. Select the list "InterviewSchedule"-
24. 
    
    
    
    
25. Now click on "+ New step" button. With this, you can add next step to be taken. It could be anything, like - Initialize Variable, Get Items, ...
26. The moment you click on "+ New step", it shows a popup to choose the action-
27. 
    
    
    
    
28. Just start typing in the search box provided to choose the action. Here we will with getting the file content of image logo, so we will search for "get file content"-
29. 
    
    
    
    
30. It will add the action to your flow and ask to provide the "Site Address" and the "File Identifier" so that it can get the content of that file -
31. 
    
    
    
    
32. Select the "Site Address" and the logo image file location-
33. 
    
    
    
    
34. 
    
    
    
    
35. Now we will initialize couple of variables to store some information and make calculations-
36. Create a string variable "strLogoContent" to store logo image. For this again click on "+ New step" button. A popup will open, type "initiali" in search box. It will show the "Initialize variable" action in list.
37. 
    
    
    
    
38. Choose the "Ïnitialize variable". Type the name as "strLogoContent". Choose Type as "String". One more interesting fact that you should know is that you can rename the action titles. Just click on elipses (...) as shown and rename the title. Remember, these action titles plays a very important role in MS Flows. Whenever you use any dynamic content value, you will find that the popup showing these dynamic content variables, categorize them using these action titles. It will be more clear in next steps.
39. 
    
    
    
    
40. Now click on Value box. It will show another popup as shown in right side of above image. The same can be populated by clicking on "Add dynamic content" link provided at just below the Value box.
41. Click on Expression tab. Type dataUri. It will show the matching list. Click on "dataUri" and add bracket to it "()". Now click in the middle of this bracket and then click on Dynamic content tab.
42. 
    
    
    
    
43. Before using the dynamic content, I had updated the action title of "Get file content" to "Get file content - Logo Image".
44. 
    
     
    
    
45. It will show the content variables that can be added in expression. Click on "File content". 
46. 
    
    
    
    
47. Now click on Ok button shown just below the fx. It will add this function to the Value box.
48. 
    
    
    
    
49. Here, you will see that the dynamic variable "File content" is displaying under heading "Get file content - Logo Image". This way, it segregates the dynamic content so that you can choose wisely.
50. Next we will create 2 more variables-
1. strInterviewStartDateTime of type String and will assign the InterviewDate value of list item.
2. 
   
   
   
3. strInterviewEndDateTime of type String and will assign the 1 hour added to strInterviewStartDateTime value of list item.
4. 
   
   
   
51. The main point to remember here is that in SharePoint Online & Power Automate, there is a big role of Time Zone. Currently the portal I am using is on different time zone as compared to Power Automate Portal. Therefore, you may get a time difference in my blog. However, we have to focus on the process to achieve the functionality.
52. Now, click on "+ New step" and search for "get file content". As our template is in SharePoint library hence we will choose the "Get file content (SharePoint)" option. 
53. 
    
    
    
    
54. Now change the title. (optional)
55. Select the Site Address where your Template library is created.
56. Select the file (HTML template) from the template folder.
57. 
    
    
    
    
58. Now we have all the content to replace in this template.
59. Start and replace one by one. For this, we have to use Compose action. We will do repeated steps as below-
1. Click on "+ New step".
2. Search for "Compose" action.
3. 
   
   
   
   
4. Compose action will be added to your workflow.
5. Now click on "Inputs" box. Dynamic query window will be shown
6. Now click on "Expression" tab.
7. Search for "replace" function. It takes 3 inputs-
1. Text in which replacement is to made (HTML template content in our case)
2. Old text to be replaced (html variable defined in template i.e. {logosrc})
3. New text that will replace the old one (content we had got from list / logo)
8. 
   
   
   
   
9. Elaborated mode:-
10. 
    
    
    
    
60. The above step will replace the logo variable with logo image. 
61. Now in order to replace rest of the information, remember that the first value in "replace" function is to be taken as the output of last action. As the above action was the first action, hence we had taken the HTML template.
62. Now, the HTML template has been updated with logo. So in next Compose action, we will take the output of above Compose action and so on.
63. So, now, we will replace rest of the information. I am giving the screenshots of the same.
64. Replace Letter Date
65. 
    
    
    
    
66. Replace Candidate Name
67. 
    
    
    
    
68. Replace Post Applied For
69. 
    
    
    
70. Replace Appointment Date
71. 
    
    
    
    
72. Replace Appointment Time
73. 
    
    
    
    
74. Replace Interview Location
75. 
    
    
    
    
76. Thanks for your patience to replace all these values. 👍 😉
77. Now we have to save this updated content as HTML file at any OneDrive location. Create a folder on OneDrive. For this, you may click on grid icon (9 dots) at top left side of your SharePoint Online site.
78. 
    
    
    
    
79. Click on One Drive link-
80. 
    
    
    
    
81. It will show you below screen. Click on "+ New" link and create a new folder (I had create PowerApps)
82. Let's save out updated HTML template file here. 
83. Click on "+ New step" and search for "create file". Choose "Create file (OneDrive for Business)".
84. Set the Folder Path.
85. Set File Name.
86. Set File Content (output of last compose action)
87. 
    
    
    
    
88. Now convert this html file to PDF. For this again click on "+ Next step" and search for "convert file" and select the "Convert file (preview) (OneDrive for Business)" action.
89. It will ask for file and the Target type.
90. Target type is by default shown as PDF so nothing to do with it.
91. For File, click on it's input box and choose the Id of Temporary HTML file created in previous action. 
92. 
    
    
    
    
93. It will create the PDF file on OneDrive with a new guid name. 
94. Now, if you wish to delete the Temporary HTML file then you can use below action-
95. 
    
    
    
    
96. Now, the PDF file can also be saved in SharePoint. For this, you need to use "Create File (SharePoint)" action.
97. 
    
    
    
    
98. Last 2 steps remaining. To send this PDF file as attachment, first we need to get its content and then send it via email. 
99. To get the content of PDF file, use "Get file content (SharePoint)" action.
100. 
     
     
     
     
101. Now use "Send an email (V2)" action.
102. 
     
     
     
     
103. This way you had completed the process.
104. If you don't wish to save the PDF in SharePoint, you may skip the steps 96-100. So, now, you will be thinking that to send the PDF by email, from where, you will get the FileContent? So, you may use the output "File content" of step 92 (Convert file - To PDF (Preview)) in Attachment Content section. 😉
105. What are you waiting for? Try it !
106. I executed and got below mail and attachment-
107. 
     
     
     
108. 
     
     
     
     
109. And the PDF file received is-
110. 
     
     
     
     
111. Would you please give me 5 more minutes. I will give you one more surprising functionality. Send MS Teams meeting schedule through MS Flow.
112. Let's start quickly-
113. Click on "+ New step" and search for "create a teams", you will find below action. Select it-
114. 
     
     
     
     
115. Fill/select details as mentioned below-
116. 
     
     
     
     
117. It's done.
118. 
     
     
     
119. 
     
     
     
     
120. Thanks for you patience.
121. This way you can create PDF using MS Flow, add image to it, send it through Email and also can schedule MS Teams meeting.
122. Sorry, forgot to attach screenshots of SharePoint library yesterday, where we were saving the PDF file. Please find the same below-
123. 
     
     
     
     
124. Screenshot of PDF in zoom mode-
125. 
     
     

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !