Friday, October 22, 2021

Azure: App Registration

 Hello Friends,

Welcome back with some new topics. Today, we will discuss about Azure. Most of the times, we have to perform App Registration on Azure. Let's see, how do we do it?

  1. Login to Azure Portal. If you don't have account, you may create a trial account for 30 days with some credits for paid services.
  2. Then click on Hamburger icon at top left corner.
  3. Scroll down the list and you will get a link of "Azure Active Directory". click on this link.
  4. It will open the overview of Azure Active Directory. Here, click on + Add V link. It will show a drop down where the last option is App registration.
  5. Click on this option. It will take you to app registration page. Provide the name of the app and select the accounts type that will be having access to it.
  6. Click on Register button. It will take couple of seconds to get it registered and will show the information about Client ID, Object ID, Tenant ID etc.
  7. You may click on Endpoints link to get the URLs of various endpoints.
  8. This way you can register the app.
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. 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.
  3. So, here, we are creating Component library.
  4. Now, give a suitable name to this component library-
  5. 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. 

  6. Rename this component as "ApprovalComponentRoundImage". Set height of component as 200.
  7. 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
  8. Click on Create.
  9. It will create a custom property. Now click on this property and you will find a sample table in the function box.
  10. Replace this table with below one. This is the sample of the table which we will pass from screen-
  11. 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)
  12. Now click on edit pencil icon of gallery template so that we can add control to it.
  13. So, now, we have the sample data and we have the gallery. It's time to add controls to display the data.
  14. To display the Photo, we will use 3 controls-
    1. Circle
    2. Icon
    3. Image
  15. To display the Approval Status, we will use 1 control-
    1. Icon
  16. To display the Name and Designation, we will use 1 control for each value-
    1. Label
  17. For User Photo
    1. 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)
    2. 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
    3. 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
    4. For Approval Status:
    5. 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. For Approver Name:
    7. 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
    8. For Approver Designation:
    9. 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
    10. Final look of template:
    11. 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)
    12. There are 2 ways to do it-
      1. Mention colors as static
      2. Make input properties for these status and assign it accordingly.
    13. We will opt for 2nd option.
    14. Therefore, create custom property respective to each approval status.

    15. Selected Colors are-
      1. Approved: Green
      2. Pending: Orange
      3. Rejected: Red
      4. Skipped: LightGray
      5. NotStarted: White
    16. Now click on ApprovalStatusIcon and choose the Fill property and update the colors as below-
    17. Switch(
          ThisItem.ApprovalStatus,
          "Not Started",
          ApprovalComponentRoundImage.NotStartedColor,
          "Pending",
          ApprovalComponentRoundImage.PendingColor,
          "Approved",
          ApprovalComponentRoundImage.ApprovedColor,
          "Rejected",
          ApprovalComponentRoundImage.RejectedColor,
          "Skipped",
          ApprovalComponentRoundImage.SkippedColor
      )
      

    18. 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)-
    19. Switch(
          ThisItem.ApprovalStatus,
          "Not Started",
          ApprovalComponentRoundImage.NotStartedColor,
          "Pending",
          ApprovalComponentRoundImage.PendingColor,
          "Approved",
          Color.White,
          "Rejected",
          Color.White,
          "Skipped",
          ApprovalComponentRoundImage.SkippedColor
      )
      
    20. Update the Icon property as-
    21. Switch(
          ThisItem.ApprovalStatus,
          "Not Started",
          Icon.Information,
          "Pending",
          Icon.Information,
          "Approved",
          Icon.CheckBadge,
          "Rejected",
          Icon.CancelBadge,
          "Skipped",
          Icon.Information
      )
      
    22. Update the Tooltip property and bind it with 
      1. ThisItem.ApprovalStatus
    23. With this, Approval Status icon has been completed.
    24. 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
    25. Now, the remaining part is image link. For this, you need to add connection of "Office 365 Users".
    26. Update the Image property of "PhotoImage" control as-
      1. Office365Users.UserPhotoV2(ThisItem.UserEmail)
    27. I think, We have covered all the points. Let's test it.
    28. In order to test the component we have created, PowerApps, provide a default screen in this Component library-
    29. 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-
    30. Click on this component so that it get added on screen.
    31. You can seen in right side properties pane, all the default values of Custom Input Properties is getting reflected.
    32. Now, we will add more approvers in table. So, update the ApproversList property. Sample table is given below-
    33. 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"
      } )
    34. 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.
    35. Save it and run the app.
    36. 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.
    37. With this, we can create an approval flow display.
    38. 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.
    39. 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.
    40. First we will add flow lines.
    41. 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
    42. 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
    43. The output will be-
    44.  
    45. Looking cool. But we don't want the left most and the right most line as these are starting and ending points.
    46. 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)
    47. Let's see the output-
    48. Wow.
    49. Now we will update the approval status icon feature.
    50. Add a circle control-
      1. Name: ApprovalStatusCircle
      2. X: ApprovalStatusIcon.X
      3. Y: ApprovalStatusIcon.Y
      4. Height: ApprovalStatusIcon.Height
      5. Width: ApprovalStatusIcon.Width
    51. Reorder the ApprovalStatusIcon and set it's order to "Bring to front".
    52. Now we will update the Fill property of ApprovalStatusCircle-
    53. Switch(
          ThisItem.ApprovalStatus,
          "Not Started",
          Color.White,
          "Pending",
          Color.Orange,
          "Approved",
          Color.Green,
          "Rejected",
          Color.Red,
          "Skipped",
          Color.LightGray
      )
      
    54. Now update below properties also for ApprovalStatusCircle-
      1. BorderColor: White
      2. BorderThickness: 1
    55. 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
          )
          
    56. Now save the component and click on Screen tab and then play the App.
    57. 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.
    58. This way, we can create approval flow component.
    59. 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 !

    Wednesday, October 6, 2021

    PowerApps/Power Automate: Send List Data To PowerApps And Convert To Collection

     Hello Friends,

    Welcome back with another post on PowerApps with Power Automate. In real time scenarios, we often face the problem where we have to get some filtered data from data source and to display in PowerApps Gallery.

    One way it could be we can use delegation but sometimes it doesn't meet our requirements. In those scenarios, we have to move on towards Power Automate, which could return us a data result and we can show it in gallery.

    It sounds good but practically it has challenges like, we have no option to return table as output to PowerApps. We can return data of type Text, Yes/No, File, Email, Number, Date.

    You may be thinking that we can parse the result set in JSON and return it as text. 😊

    Yes, you can but the returned content is of type text and it will be treated as plain string. So, What Next?

    There is a trick through which we will send data to PowerApps and will convert into collection. Let's see how-

    1. Suppose I have a list called Quote where I am managing daily display quotes. It has primarily 2 columns-
      1. DisplayDate
      2. Quote
    2. I need to fetch these quotes from list and show in a gallery in PowerApps. I am using Power Automate.
    3. So, let's start with making flow in Power Automate. Open the Power Automate platform and click on + Create and choose Instant cloud flow. Give it a lovely name and choose the trigger type as PowerApps.

    4. Click on Create to get the flow created.
    5. Now click on + New step and add an action Get Items (SharePoint). Choose the SharePoint site in Site Address box. Then choose respective list in List Name box.

    6. From this data, we need only DisplayDate and the Quote to be sent to PowerApps. So, we will initialize a variable and concatenate this data using two separate delimiters-
      1. ## for separating the data (DisplayDate##Quote)
      2. $$ for separating the rows (DisplayDate##Quote$$DisplayDate##Quote)
    7. For this use Initialize variable and then use Apply to each action.

    8. In Apply to each action, use Append to string variable to append the concatenated value to the variable.
    9. This way, we have concatenated all rows. But the problem is that an additional instance of row delimiter ($$) is concatenated at the end of this string. So we have to remove it. For that, we will use the substring function.
    10. Choose a Compose action and assign the substring value to it.
    11.  
    12. Now, the last part of this flow is to return this data back to PowerApps. For this, add an action Respond to a PowerApp of flow.
    13. Choose Output as Text.
      1. Enter the title- "ResponseResult".
      2. Enter a value to respond- vrConcatenatedData

    14. That's all in Power Automate. You may test it manually-
    15. Now we will create PowerApps.
    16. Create a Canvas PowerApp.
    17. Add a button-
      1. Name: btnGetQuotes
      2. Display Text: Get Quotes

    18. Now we will use the OnSelect property of this button to apply our functionality.
    19. First of all, we will fetch the data from Power Automate to a variable. For this choose the OnSelect property of button and click in the function box then click on Action >> Power Automate >> GetQuotesForPowerApps.
    20. It will add this flow in function box of OnSelect property.
    21. Complete this function as below-
    22. Set(
          varResponseResult,
          GetQuotesForPowerApps.Run().responseresult
      );
      
    23. Now we will split this data based on Row Delimiter ($$).
    24. ClearCollect(
          collResponseResultSplitRowDelimited,
          Split(
              varResponseResult,
              "$$"
          )
      );
      

    25. Now execute the button to get the collection loaded.
    26. As we can see, the collection is loaded with each row. Now, we will split each row with data delimiter (##).
    27. ForAll(
          collResponseResultSplitRowDelimited.Result,
          Collect(
              collResponseResultFinal,
              {
                  ID: First(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result,
                  Title: Last(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result
              }
          )
      );
      


    28. Thus, complete code is-
    29. Set(
          varResponseResult,
          GetQuotesForPowerApps.Run().responseresult
      );
      ClearCollect(
          collResponseResultSplitRowDelimited,
          Split(
              varResponseResult,
              "$$"
          )
      );
      ClearCollect(
          collResponseResultFinal,
          []
      );
      ForAll(
          collResponseResultSplitRowDelimited.Result,
          Collect(
              collResponseResultFinal,
              {
                  ID: First(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result,
                  Title: Last(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result
              }
          )
      );
      
    30. The output is-
    31. Lastly, I had bind this collection to a gallery.
    32. This way, we can achieve the desired functionality.
    33. UPDATE:
    34. In case, if you need to send more than 2 columns from Power Automate then we need to make some changes in PowerApps to split using data delimiter. Let's suppose, we need to send the SNo column also. Then, first, we will make changes in Power Automate as (we are using the Title column because the internal name of this column is Title) below-
    35. concat(items('Apply_to_each')?['DisplayDate'],'##',items('Apply_to_each')?['Quote'],'##',items('Apply_to_each')?['Title'],'$$')
      
    36. Now, we know that the sequence of data in each row is as-
      1. DisplayDate
      2. Quote
      3. SNo
    37. But we want to display in below format-
    38. SNo
    39. DisplayDate
    40. Quote
    41. Therefore, we will make changes in the last ForAll function which is written on OnSelect property of btnGetQuotes button
    42. ForAll(
          collResponseResultSplitRowDelimited.Result,
          Collect(
              collResponseResultFinal,
              {
                  SNo: Last(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result,
                  DisplayDate: First(
                      Split(
                          Result,
                          "##"
                      )
                  ).Result,
                  Title: Last(
                      FirstN(
                          Split(
                              Result,
                              "##"
                          ),
                          2
                      )
                  ).Result
              }
          )
      );
      
    43. As the SNo was appearing at last of the item row, hence we fetched it using Last function.
    44. DisplayDate was appearing at first of the item row, hence we fetched it using First function.
    45. Quote is now appearing in the middle of the item row at position 2 hence we have used Last with FirstN function. First we fetched First 2 records. It will return DisplayDate & Quote, then we applied Last function, so as the Quote is at the last of this result set, we will get Quote.
    46. This way we can send as much as data from Power Automate and get it displayed in PowerApps.
    With this, I am concluding this post.
    Happy Coding !!!
    Will see you again with some new topics.

    Stay Safe !
    Stay Healthy !