© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2022
J. M. RhodesCreating Business Applications with Microsoft 365https://doi.org/10.1007/978-1-4842-8823-8_15

15. Dynamic Information in Power Apps and Sending an Adaptive Card to Teams Using Power Automate

Jeffrey M. Rhodes1  
(1)
Colorado Springs, CO, USA
 

This chapter illustrates how to use Power Apps , Power Automate , SharePoint , and Teams together to solve real-world requirements. It is based on an actual COVID-19 notification application . The gist of the design is that the decision-maker goes into a particular SharePoint list and selects the current level (1–4) and adds any additional instructions. The level has a set of associated steps on restrictions such as whether personnel are on-site or remote. Whenever the status changed, there is automated post to Teams via Power Automate with the summary and a link to a Power App that displays the color-coded status and all the restrictions and instructions. We deployed the solution quickly with no licensing costs1 to rave reviews.

Configuration in SharePoint

Let’s start with the configuration of our data sources in SharePoint . Figure 15-1 shows CovidStatusOptions list .

A table of Covid status options. The columns are named, titles, colors, text colors, and status numbers. A total of 4 levels are listed.

Figure 15-1

CovidStatusOptions SharePoint List

We give each status a Title (Level 1–4) and then a Color and TextColor (to be used later in Power Apps ). To avoid a “brittle” application that breaks if we rename our statuses, we make a numeric StatusNumber column as well.

Our next step is to use this as a lookup column for our CovidStatus list . As shown in Figure 15-2, we want to have access to the TextColor and Color columns as well as ID. So we include them as well.

A status lookup column is displayed. The contents are column names, types of information, description, and other choice-based inquiries.

Figure 15-2

Status Lookup Column

Figure 15-3 shows the resulting list. It only has a single record with a title of Current Status.

A snapshot of the covid status SharePoint lists the title, status, additional guidance, status colours, status text colour, and status ID.

Figure 15-3

CovidStatus SharePoint List

In addition to the lookup Status column and its associated information, we have an AdditionalGuidance column where the senior leader updating the status can give specific information about current restrictions not generally associated with the Covid level. We make this column Enhanced rich text so that we can add formatting, graphics, etc., if needed. Figure 15-4 shows how the leader would edit the status and the additional guidance.

A current status column comprises a title, status, additional guidance, and attachments.

Figure 15-4

Editing the Current Covid Status

Our last SharePoint list is CovidMitigationSteps , as shown in Figure 15-5.

A table of Covid mitigation steps lists status, title, description, and status ID.

Figure 15-5

CovidMitigationSteps SharePoint List

This has the same Status lookup column, but we only bring along the ID column this time. We then list as many common steps (Dining Out and Remote Teaching in this example) as needed for each level. These and the Additional Guidance from Figure 15-3 will show up in the Power App that we will cover next.

Creating the Status Application in Power Apps

We again create a Blank app ➤ Blank canvas app ➤ Tablet format in Power Apps . Our next step is to connect to the CovidMitigationSteps and CovidStatus lists, as shown in Figure 15-6. We don’t need to connect to CovidStatusOptions since we brought its info over to CovidStatus via our lookup column.

A column titled data, comprises a search bar, an option to add data, a tab of Covid mitigation steps, and Covid status.

Figure 15-6

Connecting to CovidMitigationSteps and CovidStatus from Power Apps

Our next step is to display the current status in a label (Figure 15-7).

A snapshot of a section of a window displays how to place a text based on the current Covid status.

Figure 15-7

Setting the Text Based on our Current Status

We use the fact that the CovidStatus list only has one record and use the First() method to grab the first item. We then read the Status column and its Value. Notice how Power Apps shows us that this Value is text and is “Level 2.” More challenging is getting the Fill property, as shown in Figure 15-8. The tricky part here is getting from the text value of “Yellow” to the actual color of Yellow.

A snapshot of a section of a window displays how to fill color using the color value method.

Figure 15-8

Setting the Fill Color Programmatically using ColorValue()

Luckily, Power Apps has a ColorValue() method just for this purpose. We read the first item of the CovidStatus list and then the Value of its Status:Color column and pass that to ColorValue() to convert it to a color2:
ColorValue(First(CovidStatus).'Status:Color'.Value)
We use similar code for the Color property of the label.
ColorValue(First(CovidStatus).'Status:TextColor'.Value)
Since our Additional Guidance is rich text, we need to match that with an HTML text control,3 as shown in Figure 15-9.

A snapshot of a section of a window displays how to set the H T M L text property.

Figure 15-9

Setting the HtmlText Property for Additional Guidance

Notice our formatted text comes over fine from SharePoint and that we set the HtmlText property to our column value.

To display our steps from the CovidMitigationSteps list , we use a Data Table control . This allows us to show as many steps as needed and get a scroll bar if the list becomes longer than the space available. To get the steps associated with our current Covid Status, we filter such that the Status:ID columns match between the two lists:
Filter(CovidMitigationSteps, 'Status:ID'.Id = First(CovidStatus).'Status:ID'.Id)
As we have seen, the first parameter is the data source ( CovidMitigationSteps ) and the second is the logical test. Figure 15-10 shows the results.

A snapshot of a section of a window displays how to edit the data table that comprises the steps for the current status.

Figure 15-10

Data Table Showing the Steps for the Current Status

Notice the delegation warning. This is because we are filtering by the non-primary lookup column values. Since there is a very limited number of statuses, we can safely ignore the warning in this case.

Configuring the columns of the data table is similar to working with galleries. As shown in Figure 15-11, we use the ThisItem syntax as in ThisItem.Text and ThisItem.Description.

A snapshot of a section of a window displays how to configure a column of a data table of Covid status.

Figure 15-11

Configuring a Column of a DataTable

Figure 15-12 shows the complete application with a final HTML text control with the phone number and a link to the Team and channel with additional information.

A snapshot of a section of a window displays the Covid status application, which comprises a title and description.

Figure 15-12

Covid Status Application including a link to the associated Team

To get the link, we need to use our knowledge of HTML tags with &nbsp being a space, <strong> representing bold text, and the anchor tag (<a>) configuring a link.
"Covid Cell Number: 555-1234 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong>Team:</strong>&nbsp;<a href='https://teams.microsoft.com/l/channel/19%3a46aac9c8caf942e0acff73a65f56bb3f%40thread.skype/COVID%2520Response?groupId=321c7c59-8fd2-4f81-8400-8b7988935ee2&tenantId=314d6fd9-25a2-453f-b6d5-63f3aa9e355f'>Click Here</a> "

Posting to Teams from Power Automate

We are not on our last task for posting to our COVID Response Teams channel whenever the status changes. We accomplish this via Power Automate . We create an automated cloud flow with the trigger being whenever a list item is created or modified, as shown in Figure 15-13.

A schematic diagram displays how to build an automated cloud flow. A tab includes the flow name and another helps to choose the flow's trigger.

Figure 15-13

Creating Power Automated Flow with SharePoint List Trigger

We choose our SharePoint site and the CovidStatus list . We then create a CovidStatus variable and store the current Status Value in it. More significantly, we research into adaptive cards and realize that the only valid color values in its JavaScript Object Notation (JSON) are “default”, “dark”, “light”, “accent”, “good”, “warning”, or “attention”.4 Because of that, we will need to put one of these values in a new Color variable. Figure 15-14 shows connecting to the list and initializing both variables.

A set of three columns titled, when an item is created or modified, initialize Covid status variable, and initialize a colour variable.

Figure 15-14

Triggering on SharePoint and Initializing Variables

Note that we initialize the Color variable to one of our valid values – default. From there, we do a Switch condition on the Status:Color Value (Green, Yellow, Red, or Black) and set the Color variable to the associated string (good, warning, attention, or dark), as shown in Figure 15-15.

A snapshot of a section of a window displays how to switch on the colour value in our flow.

Figure 15-15

Switch on the Color Value in our Flow

Again thinking ahead to the fact that the adaptive card will want plain rather than rich text, we add an Html to text action for our AdditionalGuidance and then the Post adaptive card in a chat or channel action. Both are shown in Figure 15-16.

A schematic diagram displays how to switch from H T M L to text and further to Microsoft teams.

Figure 15-16

HTML to Text and Post Adaptive Card to Channel

Before we can configure our adaptive card , we need to look at the available JSON formats .5 Figure 15-17 gives an example.

A window displays a code snippet for the Adaptive card J S O N.

Figure 15-17

Example Adaptive Card JSON

We can copy this JSON and then adapt it to our purposes. Listing 15-1 shows the edited version,6 with Figure 15-18 showing how it looks within Power Automate .
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "text": "COVID Status:",
            "type": "TextBlock",
            "size": "Large",
            "separator": true,
            "spacing": "Medium"
        },
        {
            "text": "@{variables('COVIDStatus')}",
            "type": "TextBlock",
            "color": "@{variables('Color')}",
            "weight": "Bolder",
            "size": "ExtraLarge"
        },
        {
            "type": "RichTextBlock",
            "inlines": [
                {
                    "text": "@{outputs('Html_to_text')?['body']}",
                    "type": "TextRun"
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "title": "View Complete Status Information",
                    "type": "Action.OpenUrl",
                    "url": "https://teams.microsoft.com/l/entity/a6b63365-31a4-4f43-92ec-710b71557af9/_djb2_msteams_prefix_839829755?context=%7B%22subEntityId%22%3Anull%2C%22channelId%22%3A%2219%3A46aac9c8caf942e0acff73a65f56bb3f%40thread.skype%22%7D&groupId=321c7c59-8fd2-4f81-8400-8b7988935ee2&tenantId=314d6fd9-25a2-453f-b6d5-63f3aa9e355f"
                }
            ]
        }
    ]
}
Listing 15-1

Adaptive Card JSON Incorporating COVIDStatus, Color, Additional Guidance, and the URL

A column titled post adaptive card in a chat or channel displays tabs titled, post as, post in, team, channel, and adaptive card.

Figure 15-18

Edited Adaptive Card JSON

Figure 15-19 shows the resulting adaptive cards posted in the channel when we change the status twice.

A window displays level 1 and level 2 adaptive cards posted in the Teams channel of the Covid response application.

Figure 15-19

Adaptive Cards Posted in Teams Channel

Notice that even though we tell Power Automate to use the Flow Bot, it still posts my name as the one who initiated the post (since it is my flow). That is not necessarily totally optimal, but it is good from a security standpoint. At least it has the Flow Bot graphic rather than my picture each time.

Summary

In this chapter, we put many of the key pieces together to build a complete application. We stored some key pieces of data in SharePoint and allowed leadership to edit that information there. Users viewed the data (with color-coding) via Power Apps . They were prompted to do that by Power Automate , triggered by changes to the underlying SharePoint data. The flow sent an adaptive card with a link to the app to the specified Teams channel. This was very effective for pandemic response.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.196.223