Cards For Power Apps

Power Apps cards are a type of micro-app that businesses can use to quickly and easily create interactive and engaging user interfaces for their data and workflows. Unlike traditional apps, cards are much smaller in scope and can be integrated into other applications as content.

Creating cards is straightforward and does not require any advanced technical skills. Users can simply log into Power Apps, select the Cards feature, and create a new card using a drag-and-drop interface. Cards can also be easily customized with a variety of UI elements, including buttons, tables, images, and checkboxes.

One of the most significant benefits of Power Apps cards is their ability to integrate with enterprise data and cloud-based services using Power Platform connectors. This integration makes it easy to incorporate data and workflows from other applications into your cards without the need for complex coding or IT resources.

In addition, Power Fx, a low-code programming language, can be used to add advanced logic and functionality to cards. This allows businesses to create powerful, customized apps that meet their unique needs.

It's worth noting that the Cards feature is currently in preview mode, which means that it may not be suitable for production use and may have limited functionality. However, this preview period allows businesses to test the feature and provide feedback to Microsoft, ensuring that it meets their needs when it is officially released.

Getting Started With Cards:

Prerequisites

A Power Apps account

Step 1: Go to make.powerapps.com 

Step 2: Choose Cards from the left navigation bar.

Step 3: Click on '+ New Card'.

Step 4: Give the Name of the Card you want to create.

Step 5: Click on Create.

You will be navigated to the App designer for Cards. It may look like The Canvas Apps Maker Studio

Ask for text input

1.     Select the text Add and remove element to customize your new card., and then select the Remove icon (X) to delete it.

2.     In the left pane, select Insert.

3.     In the tool pane, select Input to expand the category, and then select Text input.

4.     In the text input properties pane, set Label to What's your name?.

Assign variables

1.     In the text input properties pane, set Name to UserAnswer.

We're giving the text input control the name of a variable that we're going to associate with the user's input.

 Tip

Give your variables descriptive and unique names to make them easier to use in Power Fx expressions.

We need another variable to add the user's input to the card title, so let's create one now.

2.     In the left pane, select Variables.

3.     Select + New variable.

4.     In the New variable window, enter UserName under Name and enter No Name under Default value. Leave the other values as they are.

5.     Select Save.

6.     Select the card title, which is a text label control. In the control's properties pane, set Text to ="Hello " & UserName.

This expression changes the card title to the string "Hello " followed by the value of the variable you created. You can enter the expression in the formula bar or the properties pane.

Add a Power Fx button

1.     In the left pane, select Insert.

2.     In the tool pane, select Input to expand the category, and then select Button.

3.     In the button properties pane, set Title to Say Hello.

4.     In the properties pane, select PowerFx to place your cursor in the formula bar.

5.     Type the following Power Fx expression in the formula bar: Set(UserName, UserAnswer)

This expression assigns the value of the user's input, UserAnswer, to the UserName variable you referred to in the card title, when the button is selected. Another way to read the expression is, "Set the value of the variable UserName equal to the value of UserAnswer." Since the expression is bound to the button's OnSelect property, it runs when the user selects the button.

Test the card

You should always save your changes before you play a card. Select Save, and then select Play.

Test your card a few times with different inputs. Make sure your input replaces the default value "No Name" in the card title each time.

 

Hope you guys like this Blog. 

Took a few Pictures from Microsoft Learn. And got some help from Chat GPT to enhance my wordings. You Guys should also try it.