How to change Power Apps DataCard to dropdown

This Power Apps tutorial will discuss, how to change a Power Apps Data Card to a dropdown control.

Recently, I was working on a requirement where I needed to change Power Apps DataCard to a dropdown. To achieve this need, we will follow the below instructions.

Power Apps change DataCard to dropdown

Here, we will discuss how to change the Power Apps DataCard to dropdown control.

Requirement:

When the user clicks on the Manager data card instead of a text field it will appear as a dropdown control.

Additionally, when the user selects an option from Manager’s dropdown control and clicks on the Save button, the data will save to the specified SharePoint list.

powerapps change data card to dropdown
powerapps change data card to dropdown

Here, we have a SharePoint list named Employees, which has several columns such as:

  • Employee Name: People Picker column
  • Address: Single line of text
  • Contact: Number
  • Join Date: Date and Time
  • Department: Choice column
  • Manager: Single line of text
Power Apps change data card to dropdown
Power Apps change data card to dropdown

To fulfill the requirement, now we will create a Power Apps edit form (i.e., Employee Registartion) using the above-mentioned SharePoint list (Employees).

To create an edit form within the Power Apps, the following steps are required:

  • On the Power Apps, build a blank canvas app.
  • It will redirect to a Power Apps screen, where the form will build.
  • Connect the app with the SharePoint list (Employees).
  • Again, go to Insert tab > Edit form. A blank edit form will appear on the screen.
  • Connect that edit form to the SharePoint list as the data source or you can select the edit form and insert the SharePoint list name on the edit form’s DataSource property.
DataSource = Employees

Once connected to the data source, the form will retrieves all the fields from the SharePoint list as shown below:

Build a Power Apps edit form using SharePoint list
Build a Power Apps edit form using SharePoint list
  • According to the specifications, we must now convert the Manager Data Card from a text field to a Dropdown control. Connect that dropdown control to the Office365Users connector to display the list of the user name.
  • For this, select the edit form > go to Properties > Fields > Edit fields > Expand Manager.
Change Power Apps data card to dropdown
Change Power Apps data card to dropdown
  • Again expand the control type. We can find various types of control types are there. From them, select Allowed values.
Update Power Apps data card value
Update Power Apps data card value
  • We can now see that the Manager data card will be converted to a dropdown list, but it will initially display as blank.
  • Let’s Unlock this data card to change the properties. By default, the ‘AllowedValues‘ property will display the expression as below:
AllowedValues = DataSourceInfo([@Employees], DataSourceInfo.AllowedValues, "Manager")
Change PowerApps data card to drop down
Change PowerApps data card to drop down
  • To display the list of Office365 users on the Manager data card, we need to add a connector i.e., Office365Users to the canvas app.
  • Insert the below expression on the AllowedValues property:
AllowedValues = Office365Users.SearchUser() 
Convert Power Apps DataCard to Dropdown
Convert Power Apps DataCard to Dropdown
  • Similarly, modify the Update property of the data card with the following expression:
Update = DataCardValue6.Selected.DisplayName

where DataCardValue6 is the name of the manager data card value.

Convert Power Apps DataCard to Drop Down
Convert Power Apps DataCard to Drop Down
  • Finally, select the DataCard value or dropdown control under the manager data card, and set the value as DisplayName (on the right-side panel). We can see the user’s list on the Manager data card as shown below:
change data card to dropdown in PowerApps
change data card to dropdown in PowerApps

Now, we can see the text value of the Power Apps data card is updated to the people dropdown list.

To submit the data into the SharePoint list, add a button control to the Power Apps screen. Insert the below expression on the button’s OnSelect property.

OnSelect = SubmitForm(EmployeeRegistrationForm)

Where EmployeeRegistrationForm is the name of the Power Apps edit form.

Change PowerApps data card to dropdown
Change PowerApps data card to dropdown

Let’s save and preview the app. Fill out each field in the edit form as well as select the respective manager from the drop-down list. Then click on the Save button to save the data.

But we can see the choice value from the Manager field will be saved in a SharePoint text field, as shown below:

Change Power Apps data card to dropdown control
Change Power Apps data card to dropdown control

This is how to change the Power Apps data card to the drop-down control.

Conclusion

This Power Apps tutorial taught us how to change Power Apps DataCard to Dropdown control.

You may also like the following Power Apps tutorials:

>