How to use Power Apps Cards for Dataverse notifications with Power Automate and Microsoft Teams

In 2021, I had the honour of being a speaker for the Zero to Hero learning program that’s run by Victor Dantas. I presented two sessions and in one of the sessions I covered Adaptive Cards. The use case was to create a notification using Power Automate cloud flows whenever a new insurance claim was created in Dataverse. The Adaptive Card would be posted to a Microsoft Teams channel with details of the insurance claim. It also included hyperlinks to view the insurance claim and the member’s insurance policy in the model-driven app.

Fast forward to today, there’s now Power Apps Cards in preview. Power Apps Cards is the next step up from Adaptive Cards and you can use them with Power Automate cloud flows. In this WTF episode I’ll share how to open model-driven app forms and views from Power Apps Cards. 

If you want to learn more about Power Apps Cards, I recommend watching a couple of videos. 

1. The Microsoft 365 & Power Platform community call in November of 2022 with Matt MacLaurin 
2. The Power CAT Live episode in April of 2023 with Matt MacLaurin and Anthony Uitz

Use Case

I’m going to use the same use case in the last WTF episode. Whenever a new Challenge is created in Dataverse, post a Card into a Microsoft Teams channel with two hyperlinks to open the model-driven app form and view.

What I'll cover

1. Create a Power Apps Card
2. How to reference environment variables using PowerFx in Cards
3. Using the Card in Power Automate cloud flow

Create a new Power Apps Card

The starting point is similar to when you build a Canvas App, Cards can be created from make.powerapps.com.

Now initially, you may think that you can create a card inside a solution by clicking on +New, select More, select Other and then select Card.

However when you do this, you end up with the below, which isn’t correct. 

Keep in mind that this is the current experience when filming this WTF episode, it could change in the future. **EDIT 20/11/2023 - Cards can now be created in a solution as of Nov 2, 2023. Read more here.**

What you need to do is click on More in the left-hand side menu pane, and you’ll see Cards. You can then pin it and it will display permanently in the menu.

When you select Cards form the menu, you will first see your cards, and the next tab will display both yours and your team’s cards.

Click on New Card or Create a Card, followed by entering a Name and Description for your Card.

After you click on create, the Power Apps Card designer will appear. It will look familiar because it’s similar to the Power Apps studio user interface. You have,

1. The tree view to see your screens and elements.
2. There’s the drag and drop UI elements, such as adding inputs and changing the layout. There are some UI elements that aren’t available compared to the ones available in Power Apps studio so keep that in mind.
3. You also have the same ability of adding data sources.
4. There’s variables, which I’ll cover shortly.

1. Add data source

The first thing to do is add your data source. As of when this WTF episode was filmed, Dataverse is the only connection available, but the product team will be enabling other connections in future updates.

Since we’re applying the same technique from the last WTF episode of using environment variables to build URLs for model-driven apps, we'll need to reference the relevant tables using the Dataverse connector. Add the following Dataverse tables,

1. Environment Variable Definition - This is the table that contains the Environment Variables that have been created in a solution.
2. Environment Variables Value - This is the table that contains the current value of an Environment Variable.

2. Create variables

The second thing to do is create variables for the cloud flow. These variables will become input values in the Power Apps Cards action in the cloud flow.

Several variables are required to be created. First, there's variables that will be used on the interface of the card, I’ll refer to these as visible variables. Secondly, the other variable will be one that won’t be used in the interface of the card, but in the background. I’ll refer to this as an invisible variable.

For the visible variables, they will be the values from the table columns of the newly created Challenge in Dataverse. I’ll display the following from Dataverse,

1. Name of the Challenge
2. Description of the Challenge 
3. Owner of the Challenge

I’ll create a variable for the Name of the challenge by selecting Variables in the menu and click on + New variable.

This is the variable for the Name of the challenge,

I'll explain what some of the fields are.

Type

For the Type dropdown field I’ll keep it as Text.

Default Value

The Default Value field implies what you want the value to be when the Power Apps Card is created. It’s optional and for my use case, I want to leave it blank since it will be populated by the cloud flow.

Value settings - Persistence

Next, there’s two options on whether the value of the variable is either reset each time the card is opened or is left as-is. For my use case I will be using the Permanent option.

Value settings - Customization

Now the next couple of checkboxes were confusing initially. I reached out to Matt Maclaurin and Anthony Uitz in the Power Apps product team. 

For the When sending this card, this value can be cutsomized checkbox, this will turn the variable into an input for the card. 

For the Customization is required checkbox, the value of the variable is required, in other words mandatory, to be set by the cloud flow, power virtual agent bot or from the Cards play page. The play page is when you are copying and pasting the link to send through a Microsoft Teams message. Since the variables will be populated through the cloud flow, I’ll tick these two checkboxes.

Additional variable information

When you expand the additional variable information, Title and Description appears. These will be visible in cloud flows and in bots for Power Virtual Agents.

Repeat the above to create the rest of the visible variables, Description and Owner, and for the invisible variable, the GUID of the challenge.

3. Add controls to the Card

After the data source has been added and the variables have been created, it's time to create the Card.

By default, there will be a couple of controls already added to the screen of the card.

For the first control,

1. I updated the name of the Text Label where I've followed Matt Devaney's Power Apps coding standards for canvas apps when naming controls. Highly recommend you check out this free resource when building your apps or cards.
2. I also updated the text to be the title of the card. For a bit of fun, I inserted the lightbulb 💡 emoji.
3. I then updated the style by making the text larger.

I'll next update the second control,

1. I updated the name of the text label
2. I updated the text as the Name of the Challenge
3. I also updated the style by making it bolder

Next, I added a few more controls. 

1. Under the Name text label, I added another text label with a name of txt_varChallengeName
2. For the text property, this is set to the varChallengeName variable. This will be populated through the cloud flow. 
• 
  
  
  
  
3. The spacing of the text label was updated to none.

This will be the structure I apply to mimic key-value pairs like in Adaptive Cards where I have one text label acting as the key, and the other acting as the value.

I’ll repeat the steps for the two other visible variables of Description and Owner. I’ll have a text label that acts as the key, and another text label that will be the value which will reference the input variables created earlier in this episode.

The last two controls are the buttons that a user can click/tap on to open the challenge form in the model-driven app, or view all Active Challenges in the model-driven app. This will be the same functionality as you saw in my previous WTF episode where a user will click on the hyperlink, and it will open either the form or the view in the model-driven app. 

Add the button control and name the button, followed by entering a title for the button.

As a reminder the following are the query parameters when opening a form in model-driven apps. 

1. You need the Dataverse or Dynamics 365 environment URL. 
2. The appid or appname query parameter.
3. The value of the appid or appname query parameter.
4. The pagetype query parameter where the parameter value is entityrecord.
5. The etn query parameter which is the logical name of the table.
6. And the ID of the challenge.

For opening a system view in model-driven apps, it’s the same except the pagetype query parameter is entitylist, the viewid is the id of the view, and the viewType is 1039 which is the definition for system views.

I covered the above previously in my last WTF episode.

The URL is going to be built within the property of the button using PowerFx. The formula will be very similar to what I showed in the last episode where I shared how to build deep links to open model-driven apps in Power Apps mobile. Environment Variables will be referenced again using PowerFx. I’ll be using the same environment variables in a solution that you saw from the last WTF episode.

If you’re familiar with canvas apps, the launch function can be used to direct a user to a browser and load the URL which I showed you in the last episode. However, in Power Apps Cards, if you try entering the Launch function in the On Select property of the button control, you’ll come across this error message because it’s currently not supported in Power Apps cards. 

There’s a list of PowerFx functions that are supported in the Microsoft Learn documentation.

So, what can we use since the launch function is not currently supported? Well, we can switch the Type over to Open Url, and then use PowerFx to build the URLs.  

Shout out again to Anthony Uitz for answering my question when I was scratching my head over why I couldn’t use the launch function and he guided me towards this. One thing to be aware of is that the URL string must start with https, colon, and forward slashes (https://) otherwise it won’t work.

To build the URLs, I’ll be concatenating strings again as seen from the last two episodes. I’ll use string interpolation rather than the concatenate function or the ampersand operation. I’ll refer you again to Matt Devaney’s blog post, where he explains how to use the string interpolation method in detail. 

The following is the PowerFx expression for the View Challenge button.

$"{LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_DataverseEnvironmentURL",
    Value
)}/main.aspx?appname={LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_InnovationChallengeapp",
    Value
)}&pagetype=entityrecord&etn={LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_Challengestable",
    Value
)}&id={varChallengeGUID}"

Tip: Currently the PowerFx bar in Power Apps Cards doesn't have formatting or the ability to drag the bar to expand it, like in Power Apps studio. What I like to do is build my expression in Power Apps studio, format it, and then copy it over.

Note: You'll also see yellow squiggly lines which is a delegation warning that you can safely ignore. Delegation in PowerFx cards doesn’t have the same support as delegation in canvas apps but because the expression is only performing a string comparison on a single field, it’s fine. 

The following is the PowerFx expression for the View Active Challenges button.

$"{LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_DataverseEnvironmentURL",
    Value
)}/main.aspx?appname={LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_InnovationChallengeapp",
    Value
)}&pagetype=entitylist&etn={LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_Challengestable",
    Value
)}&viewid={LookUp(
    'Environment Variable Values',
    'Environment Variable Definition'.'Schema Name' = "ben_ActiveChallengessystemview",
    Value
)}&viewType=1039"

4. Play Power Apps Card

Now, the cool thing about Power Apps Cards is that you can preview your card in real-time with the data which you can’t do in Adaptive Cards. This is through the Play button. A new browser tab will open, and you’ll first be prompted to enter the values for the required input variables. You can copy and paste the values from a row/record in your model-driven app.

The Card will then load, and you can see the data.

This Send button will generate a link that you can copy and paste into a Microsoft Teams message. Since this card will be populated by a Power Automate cloud flow, we won’t be using this feature. Let’s next learn how to pass values from cloud flow to the input variables in the card.

Building the cloud flow

In my cloud flow I have my trigger which is when a new Challenge is created in Dataverse, followed by an action that will retrieve the user details of the Owner associated to the Challenge.

To call the Power Apps Card, add a new step and search for Cards for Power Apps and select the connector. You’ll see two actions and the one to select is Create card instance. In the dropdown field, select the card that you want to create.

You’ll then see the input variables as input values for the action. This is the title and the description of the input variables from the Card.  

• I’ll use dynamic content from the trigger to as the input values for the Challenge Name, Description, and Challenge ID. 
• For the Owner, I’ll use dynamic content from the previous action to reference the full name from the User table.

Next, add a new step and search for the action, Post card in a chat or channel. In the Post as dropdown field, select Power Apps. Then select where you want to post the card to. I’m posting to a Channel, and I’ll select the Team and the channel. Lastly, select the Card input value as dynamic content. And that’s it, save the cloud flow and it’s ready to be triggered.

Card in action

I create a new Challenge in Dataverse in the Innovation Challenges model-driven app, this will trigger the cloud flow. The cloud flow will then create a Power Apps Card and using the dynamic content from the trigger and previous action, it will populate the input variables of the card. The Power Apps Card will then be posted to a channel in Microsoft Teams.

Summary

Power Apps Cards allows you to create reusable cards that can be saved in the Power Apps maker portal which makes it easier to maintain compared to Adaptive Cards. You can also create variables in cards, and use them as visible or invisible variables which can be populated by a cloud flow or a bot in Power Virtual Agents.

Power Apps Cards is one method that you can use to create Dataverse notifications for users by making use of

• variables to display data from Dataverse through a cloud flow
• embed hyperlinks in the buttons using PowerFx that reference Environment variables in a solution

All of this is achieved without code with Power Platform 😊

Hope you learnt something new and thanks for stopping by 👋🏻

Read More