Power App Cards + Dataverse
Have you tried Power Apps Cards already? These are great ways to display information and perform actions with them. In this post, I will share with you how to set up Power App Cards with Dataverse.
Let's start with the basics, what is Power App Cards? According to Microsoft documentation:
Power Apps cards are micro-apps with enterprise data and workflows and interactive, lightweight UI elements that other applications can use as content. Because they're part of the Power Apps ecosystem, cards can add business logic through Power Fx and integration with business data through Power Platform connectors. Using cards, you can quickly build and share rich, actionable apps without any coding or IT expertise.
One thing you need to know before jumping into creating cards is that these are under preview, which means you can have early access to the feature but you might find some difficulties along the way.
The card I'm about to share was created to present at Cloud Technology Townhill Tallinn 2023 in a session I delivered with Yannick Reekmans. This is the documentation used to create the card: Create a card with data from Dataverse (preview) - Power Apps | Microsoft Learn.
What is this card for? To help users update account names automatically integrated with Dataverse. If the user changes the name of the account, this change will reflect in the Table 'account' from Dataverse. ,
Before starting
Select a data source: this is your lucky day because as of now (02/13/2023) the only data source available is Dataverse.
2. Add a variable: for this specific card, the variable will be EnteredAccountName.
Screens
This Card will have four screens:
A. Main
B. Details Screen
C. Thank you
D. Bye
Components
A. Main
The main screen it's the first one the user will see. In this screen we have the following components:
Text label x2
Text input x1
Button
First text label:
2. Second text label:
3. Text input:
4. Button:
This is the formula for the button OnSelect:
Set(EnteredAccountName, AccountName); Navigate(DetailsScreen);
B. Details Screen
The details screen it's the second one the user will see. In this screen we have the following components:
Text label x4
Text input x1
Button x2
First text label:
2. Second text label
This is the formula:
LookUp(account, 'Account Name' = EnteredAccountName).'Account Name'
3. Third text label
4. Fourth text label
This is the formula:
LookUp(account, 'Account Name' = EnteredAccountName).'Account Number'
5. Text input:
6. First button:
This is the formula:
Patch(account, LookUp(account, 'Account Name' = EnteredAccountName), { 'Account Name': NewName });Navigate('Thank you');
7. Second button:
This is the formula: Back()
C. Thank you
The thank you screen it's the third one the user will see. In this screen we have the following components:
Text label x2
Button x2
First text label:
2. Second text label:
3. First button:
Formula: Navigate('main');
4. Second button:
Formula: Navigate('Bye');
D. Bye
The bye screen it's the last one the user will see and it's completely optional. On this screen. we will only have 1 component: an image. You will need the URL of the picture to add the image to the card.
After following the steps, you can add some fun to the card. I want to add a nice background image so you are able to deliver a better user experience. This is what the card looks like: