PowerApps: Highlight Selected Item In Gallery

Hello Friends,

Welcome back with another post on PowerApps. Sometimes, the client asks that when a user clicks on any row in gallery, it should be highlighted. As of know, there is no direct feature. However, we can achieve using a very small piece of code. The expected outcome is-

1. 
2. 

Let's start-

1. First create a list "EmployeeInfo" in SharePoint and have some records.
1. 
2. Now, open the PowerApps maker portal and create a canvas app.
1. 
3. There will a screen by default "Screen1". Rename it to "ScreenViewByExperience".
4. Add the list "EmployeeInfo" as DataSource.
1. 
2. 
5. Now, add a "Blank flexible height gallery" and rename it to ParentGallery.
1. 
2. 
6. Update below properties of "ParentGallery"-
1. X: 0
2. Y: 100
3. Width: ScreenViewByExperience.Width
4. Height: ScreenViewByExperience.Height-ParentGallery.Y
5. Items: Distinct(EmployeeInfo,Experience.Value)
7. Now, click on template edit icon and add a "Label" and another "Blank flexible height gallery".
1. 
8. For Label, update below properties:
1. Name: Label_Experience
2. Text: ThisItem.Result
3. X: 0
4. Y: 0
5. Width: Parent.Width
6. Height: 40
7. Fill: RGBA(0, 13, 75, 1)
8. Color: RGBA(255, 255, 255, 1)
9. The outcome will be-
1. 
10. Similarly, update the properties of child gallery as below
1. Name: ChildGallery
2. X: 0
3. Y: Label_Experience.Y+Label_Experience.Height
4. Width: Parent.Width
5. Height: Parent.TemplateHeight-Label_Experience.Y-Label_Experience.Height
6. Items: Filter(EmployeeInfo,ThisItem.Result in Experience.Value)
7. TemplateSize: 40
8. TemplatePadding: 0
11. The outcome will be-
1. 
12. Now, edit the ChildGallery again and add 2 labels to show "First Name" and "Last Name". Link them with ThisItem.'First Name' and ThisItem.'Last Name'.
1. 
13. We have the basic structure ready. Now, comes to the actual part.
14. Click on App >> OnStart property and add below code.

1. Set(vrSelectedItemID,0);
   Set(vrClickCounter,0);
   

15. We have initialized 2 variables-
1. vrSelectedItemID- It will capture the ID of the item, user has clicked and will be used to validate the upon next click whether the same item is re-clicked or other item is clicked.
2. vrClickCounter- It will capture the count of click for a particular item
3. 
16. Now, click on ChildGallery >> OnSelect property and write below code

1. If(
       vrClickCounter = 0,
       Set(
           vrClickCounter,
           1
       );
       Set(
           vrSelectedItemID,
           ChildGallery.Selected.ID
       );
       ,
       If(
           vrClickCounter = 1 && vrSelectedItemID = ChildGallery.Selected.ID,
           Notify(
               Concatenate(
                   ChildGallery.Selected.'First Name',
                   " ",
                   ChildGallery.Selected.'Last Name'
               ),
               Success
           );
           ,
           Set(
               vrSelectedItemID,
               ChildGallery.Selected.ID
           );
       )
   )

17. The outcome is-
1. 
18. Next, click on ChildGallery >> TemplateFill property and write below code.

1. If(vrSelectedItemID = ThisItem.ID,RGBA(244, 196, 48, 1),RGBA(0, 0, 0, 0))
   

19. The outcome is-
1. 
20. Save the application, publish it and run/play.
21. On Load-
1. 
22. Clicked "Deepika Gupta"
1. 
23. Clicked "Manoj Sharma"
1. 
24. Re-Clicked "Manoj Sharma"
1. 
25. This is how, you can achieve the functionality. If you want to navigate to another screen upon double click, then instead of using Notify, use Navigate function.
26. In case, if you wish to give user the "Hand" experience upon hover, then replace the labels used in child gallery with buttons and update the properties as below-

27. Color	RGBA(0, 13, 75, 1)
    Fill	Transparent
    BorderColor	Transparent
    DisabledColor	Self.Color
    DisabledFill	Self.Fill
    DisabledBorderColor	Self.BorderColor
    PressedColor	Self.Color
    PressedFill	Self.Fill
    PressedBorderColor	Self.BorderColor
    HoverColor	Self.Color
    HoverFill	Self.Fill
    HoverBorderColor	Self.BorderColor
    BorderStyle	None
    BorderThickness	0
    OnSelect	Select(Parent)
    BorderRadius	0

28. After replacing labels with buttons, below is the outcome-
1. 
2. 
29. As we can see, there is no difference in the outcome. However, when you hover the mouse upon the item, you will find the cursor converted into Hand.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !

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 !

PowerApps: Context Variable With Navigate Function

 Hello Friends,

Welcome back with another post on PowerApps. We all know that we can define two types of variables in PowerApps-

1. Global Variable:- These types of variables are defined using Set function. Scope of these types of variables is entire App.

1. Set(varGlobal001, "Global Variable 1")
   

2. Context Variable:-  These types of variables are defined using UpdateContext function. Scope of these types of variables is the same screen. These variables are not available on other screens in that App.

1. UpdateContext({varContextVariable:"Context Variable 1"})
   

But, if I say that you can access Context Variables on other screen to which you are navigating, then you will be surprised.

Yes, we can access the Context Variables on other screens as well. But there is a condition. Let me explain. We have Navigate function which is used to navigate from one screen to other. Everyone provides 2 values to this function-

1. ScreenName (to which user has to be navigated)
2. ScreenTransitionType (transition type of screen during navigation. i.e. None, Fade, Cover...)

Now, rare of you knows that the Navigate function has one more parameter called context. It is optional type parameter. You can pass a record that contains the name of at least one column and a value for each column. This record updates the context variables of the new screen as if passed to the UpdateContext function.

Let's understand with an example.

1. Create a PowerApp. By default Screen1 will be added automatically. Now add one more blank screen "Screen2".
2. Navigate to Screen1 and add 2 labels, 2 input text boxes and 1 button.
3. 
4. Now add below Navigate function on Button >> OnSelect property.

5. Navigate(Screen2,ScreenTransition.Fade,{varText1:TextInput2.Text,varText2:TextInput3.Text})
   

6. 
   
   
7. Remember, till now, we haven't perform any activity on Screen2.
8. Now, click on Screen2 and add 2 labels. Now change the Text property on these labels. The moment you start writing vart, it will populate both variables, we have defined on previous screen in Navigate function.
9. 
10. Assign varText1 variable to first label and varText2 variable to second variable.
11. 
12. You may add one button to navigate back to Screen1.
13. Now save the app and play. Below are 2 screenshots. The first one is on Screen1 where I input "Hello" and "World" as input text to first and second textbox respectively.
14. 
15. Now clicked on Navigate button. Second screen appears where first label is showing the value of first variable while second label is showing value of second variable.
16. You may play with this by going back, changing the text box values and navigating again to Screen2.
17. 
    
    
18. This way you can use Context Variables to pass information from one screen to other screen. Using this feature, you can remove dependency upon Global Variables, thus resulting the App performance.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !