Customizing Data Card In PowerApps

In this article, we will learn how to customize data cards in PowerApps. There were scenarios where we need to change properties for the custom cards other than what is provided by default. So to achieve that we need to customize in Data Card in Form control connected to our data Source.

Let's see how customization in Data cards works.

Customize Data Cards in PowerApps

Step 1 - Open your App > Add New Screen > from Insert Menu add Edit Forms.

Customize data cards in PowerApps

Step 2 - On Right Pane > Select Data Source by default it will be none > from Dropdown you can search for SharePoint connector if you want to connect to SharePoint list

Customize data cards in PowerApps

Step 3 - Once selecting the connector, it will ask you to connect from On-premise or online services > select online and click connect.

Customize data cards in PowerApps

Step 4 - One the Connector connected > It will display all available list of SharePoint sites > select site from which you want to connect

Customize data cards in PowerApps

Step 5 - Now select the list available from the selected site

Customize data cards in PowerApps

Step 6 - It will add all fields available in your list to the form

Customize data cards in PowerApps

Step 7 - From the below snap, if you notice that Data Card is a lock so to change anything in the existing Data Card you need to select data card and click on Unlock to change properties.

Customize data cards in PowerApps

This is a scenario where we want to display a list of users available in our Office365 in Manager dropdown but the case here is it is a single line of text so let see below how we can modify default control to a custom one,

Step 8 - Select Form > In Right pane, select Edit Fields > Select the field you want to change > select Edit Text dropdown

Customize data cards in PowerApps

Step 9 - When you open the Edit Text dropdown, it will ask for various options. you can select any of them. For example, if there is a number field it will automatically accept only numbers, the same goes with the phone, email, multiline of text, and so on. So in our case, we will select Allowed Values

Customize data cards in PowerApps

Step 10 - As we selected allowed Values, it will automatically change to dropdown but currently, it is blank so we need to define the data source in it.

Customize data cards in PowerApps

Step 11 - Now to add AllowedValues we need to first click on unlock to change properties

Customize data cards in PowerApps

Step 12 - To display the list of Office 365 users in the dropdown, we first need to add the Office365 Users connector

Customize data cards in PowerApps

Step 13 - Add Office365Users.SearchUser({top:100}) code in AllowedValues

Customize data cards in PowerApps

Step 14 - Select the Manager Dropdown > In Right Panel > Select Value. By default it is City > Change it to Display Name

Customize data cards in PowerApps

Customize data cards in PowerApps

Now we can see the Manager dropdown is displaying all available Users from the Office365 account

Customize data cards in PowerApps

Now similarly we can change the Address to multiline text

Customize data cards in PowerApps

Customize data cards in PowerApps

It will be displayed as below,

Customize data cards in PowerApps

So this way, we can change any properties, look and feel, validation for data card control like we do for any single control.

Hope this helps...Happy low coding..!!