Power Apps Dropdown Control with SharePoint

Do you want to interact with the Power Apps Dropdown control with SharePoint? If so, keep reading this Power Apps tutorial to learn how to use the Power Apps dropdown control with different types of SharePoint columns in different scenarios.

We will also talk about the following topics:

1. How to work with choices within the Power Apps dropdown control?
2. How to use SharePoint yes/No on the Power Apps dropdown?
3. Working with PowerApps dropdown person field
4. PowerApps dropdown with image
5. What is PowerApps dropdown two columns
6. Working with PowerApps dropdown list number
7. PowerApps dropdown year
8. Power Apps dropdown concatenate values

We must first create a SharePoint list and connect it to the Power Apps before we work with the Power Apps dropdown control with the SharePoint list. Following that, we will add a dropdown control based on our needs.

Do not know how to add and use a Power Apps Dropdown control in Power Apps? Check out this complete tutorial to know more details: How to use Power Apps drop-down control?

Power Apps dropdown to SharePoint list

Here, we will see how to work with the Power Apps dropdown to the SharePoint list.

We are going to use the above app to connect with data sources such as SharePoint, SQL, excel, etc. So that we can build a dropdown control using the SharePoint data source.

We have Prepared a SharePoint list named Organizer having two single lines of text columns.

To connect this above list to Power Apps, the following steps are:

• On the Power Apps screen, navigate to the Data section.
• Click on Add Data.
• Write ‘SharePoint’ in the Searchbar.
• Select the SharePoint.
• Choose the connection and site address.
• Select the list i.e. Organizer.
• Connect.

We can find this connected data source in the Power Apps data section. Next, we will add a gallery and connect it with the data source to display the above data.

• On the Power Apps screen, go to Insert tab > Gallery > Blank vertical.
• Select the SharePoint list as Data Source.

• Now, we will add two drop-down controls to the Power Apps screen. So that when the user selects the items from both the dropdown control, it will save to the SharePoint list.

• Select the first drop-down control and insert the below expression in the dropdown’s Items property to display the Title column list.

Items = Distinct(Organizer,Title)

Where,

• Organizer: The name of the SharePoint data source.
• Title: The SharePoint column name. As it is a single-line column and to remove the duplicate values we have used the Distinct() function.

Similarly, select the second drop-down control and insert the below expression in the dropdown’s Items property to display the Place column list.

Items = Distinct(Organizer,Place)

To save the selected data from Power Apps dropdown control to SharePoint, insert the below expression on the second dropdown’s OnSelect property.

OnSelect = Patch(Organizer, Defaults(Organizer),{Title:Title_Dropdown.Selected.Result, Place:Place_Dropdown.Selected.Result})

Where Title_Dropdown and Place_Dropdown are the names of the dropdown controls.

Now, save, publish and ply the app in preview mode. Select an item from the first drop-down control and then select another item from the second drop-down list, we can see a new item has been added to the gallery.

Also, we can see this item has been updated in the SharePoint list too.

This is how to work with power apps dropdown control to SharePoint list.

Also Read: Power Apps Gallery Group By [With Real Examples]

Power Apps dropdown choices

Here, we will see how to work with Power Apps dropdown choices. Power Apps Choices function returns a table of the possible values for a lookup column.

Suppose, we have a SharePoint list named ‘Orders list’ having a choice column ‘Company‘.

Now, we’ll add a dropdown control on the Power Apps screen with the above choice column.

Items = Choices('Orders List'.Company)

Where,

• Orders List: The name of the SharePoint data source.
• Company: The name of the SharePoint choice field.

Once the formula is applied the choices are reflected in the dropdown control like below.

This is how to use the PowerApps dropdown choices.

Check out: Power Apps Gallery Patch [With Various Examples]

Power Apps dropdown yes no

Here, we will see how to use SharePoint yes/no column within a Power Apps dropdown control. When the user selects any dropdown value and clicks on the button, it will save on the SharePoint list.

We have prepared a SharePoint list named ‘Attendance’ having a Title (Default column) and Attended? (Yes/No column).

To work with this requirement, the following steps are:

• Add this above SharePoint list to the Power Apps (Follow the above steps to connect the list to Power Apps)
• Next, add a Power Apps gallery to the screen and connect the gallery with the SharePoint list. But the yes/no column (i.e., ‘Attended?’) will come as true/false respectively.

• To convert the true/false to yes/no, we need to insert the below expression on the ‘Attended?‘ label’s text property.

Text = If(ThisItem.'Attended?'= true, "Yes","No")

• To insert the data dynamically, we will add a text input and a dropdown control to the screen.

• On the dropdown control, insert the below expression into the dropdown’s items property.

Items = Distinct(Attendance,If('Attended?' = true,"Yes", "No"))

• To save the data to the Power Apps gallery, we will add a button to the screen and rename the button as Save.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Patch(Attendance,Defaults(Attendance),{Title: Title_TextInput.Text,'Attended?':Switch(Attended_Dropdown.Selected.Result,"Yes", true,"No",false)})

Where,

• Attended_Dropdown: The name of the dropdown control
• Title_TextInput: The name of the text input control

That’s it! Now, save, publish, and play the app in preview mode. Let’s insert data on the text input(ex- David Potter) and select a value from the dropdown control(Ex- No). Click on Save.

We can see the data got saved on the gallery like below:

This is how to work with the Power Apps dropdown control with YesNo.

Also check: Power Apps Gallery SharePoint [With 15+ Examples]

Power Apps dropdown person field

Here, we will see how to use the person field within the Power Apps dropdown control. Suppose, we have a SharePoint list named ‘Projects‘ having a person field ‘ProjectHandler‘.

• Now, we will create a dropdown control using the above SharePoint people column. To do this, the following steps are:
• On Power Apps screen, insert a dropdown control. Go to Insert tab > Inputs > Dropdown.
• Select the dropdown control and insert the below expression in the dropdown’s items property:

Items = Distinct(Projects, ProjectHandler.DisplayName)

Where

• Projects: The name of the data source
• ProjectHandler.DisplayName: The display name of the Project Handler person.

Now, we can see all the items are listed in the Power Apps dropdown control.

• To display the selected person’s name, add a label control to the screen and place it beside the dropdown control.
• Insert the below expression on the label’s text property.

Text = ProjectHandler_Dropdown.Selected.Result

Where, ProjectHandler_Dropdown is the name of the dropdown control.

Let’s save, publish and play the app in preview mode. Select an item from the dropdown control (ex: Uesr2) and we can see it will reflect on the label control like below:

This is how to work with the powerapps dropdown with the SharePoint person field.

Read: Power Apps Gallery Filter [With Real Examples]

Power Apps dropdown with image

In this section, we will see how to use the Power Apps dropdown control with the SharePoint Image column. Unfortunately, no SharePoint images or pictures can be displayed by a Power Apps Dropdown control.

Because there is no such property that allows us to visualize the images in the dropdown menu.

But, we can include an image control and a dropdown control to the Power Apps screen for reference.

That means when the user selects any item from the dropdown list, it will display the image of that respective selected item. To work with this, the following steps are:

• We have designed a SharePoint list named ‘Product Model’ with a title column and an Image column.

• Next, we’ll use the above SharePoint list’s title column to create a dropdown control on the Power Apps screen.
• On the Power Apps screen, insert a dropdown control and set the below expression on the dropdown’s Items property.

Items = 'Product Model'.Title

Where,

• Product Model: The name of the SharePoint data source
• Title: The name of the SharePoint column.

It will display the items of the title column like below:

• Next, add an image control to the Power Apps screen. Go to Insert > Media > Image.
• Insert the below expression into the image’s Image property.

Image = LookUp('Product Model',Title =ModelImage_Dropdown.Selected.Title,  'Model Image'.Large)

Where,

• ModelImage_Dropdown: The name of the dropdown control
• ‘Model Image‘: The name of the image column

Next, play the app and select any item from the dropdown list. We can see the respective item will be displayed in the Power Apps image control like below:

This is how to use the SharePoint Image with Power Apps drop-down list.

Also check: Power Apps Gallery Control [Complete Tutorial]

Power Apps dropdown two columns

Here, we will see how to work with Power Apps dropdown control using two columns. That means we have a SharePoint list named ‘Voter List’ having two single lines of text columns i.e., Address1 & Address2.

In the Address2 column, we can see that some fields are missing. We will now create a dropdown control using the Address2 column that will display the item if it is not blank and the value is present; otherwise, it will show the value of Address1.

To achieve this need, the following steps are:

• On the Power Apps screen, we have added a data table to display the list of items.

• Now, add a dropdown control to the screen. We need to insert the below expression within the dropdown’s Items property to store both column’s values in one column

Items = AddColumns('Voters list',"Present Address",If(IsBlank(Address2) || IsEmpty(Address2), Address1, Address2))

Where,

• ‘Voters list: The name of the SharePoint data source
• Present Address: The name of the new column
• Address1, Address2: The name of the list column

Select the dropdown list and set the value as Present Address.

Now, select the Alt key + click on the dropdown. We can see all the items of both columns’ values within the dropdown control.

This is how to work with powerapps dropdown items from the two SharePoint columns.

Read: Power Apps Data Table [Complete Guide]

Power Apps dropdown list number

Here, we will see how to display a Sharepoint list number column within a Power Apps dropdown control. We are going to use the previous SharePoint list i.e. Product. Suppose, there is a number type column in the SharePoint list named ‘Product Number’.

Let’s build a dropdown control using the above number column. to do this, the following steps are:

• On the Power Apps screen, add a dropdown control.
• Insert the below expression on the dropdown’s items property.

Items = Products.'Product Number'

• Products: The name of the SharePoint data source
• ‘Product Number‘: The name of the number column

Once the formula is applied, we can see the numbers are listed in the dropdown control like below:

Also, we can arrange this number column in ascending or descending order. To sort in ascending order, the formula will be:

Items = Sort(Products,'Product Number',Ascending)

Similarly, to sort in descending order, the expression will be:

Items = Sort(Products,'Product Number',Descending) 

Let’s click on the Alt key + dropdown control to check the number, we can see the numbers are coming as per the respective order:

This is how to work with the powerapps dropdown using the SharePoint number column.

Check: Power Apps Radio Button

Power Apps dropdown year

Here, we will see how to display various years within a Power Apps dropdown control. That means we will build a dropdown control that will display only the years that retrieves from the SharePoint list date column.

Suppose, there is a date column named OrderDate in the previous SharePoint list (i.e. Product) having some random dates like the below:

Using the above SharePoint date and time column, we will now create a dropdown control that displays only the year of the above dates.

To work with this, the following steps are:

• On the Power Apps screen, add a dropdown control.
• Insert the below code into the dropdown’s items property.

Items = Distinct(AddColumns(Products,"Years",Year(OrderDate)),Years)

Where,

• Products: The name of the SharePoint data source.
• Years: The name of the new column name.
• OrderDate: The name of teh SharePoint date & time column.

Once the formula is applied to the dropdown’s items property, it will show the list of years like below:

This is how to display the SharePoint year within the powerapps dropdown control.

Read: How to Remove Duplicates in Power Apps Dropdown

Power Apps dropdown concatenate values

Here, we will see how to work with the Power Apps dropdown concatenate values. That means we will concatenate values from the multiple dropdown’s selected items and display that value separately.

To work with this, we are going to use the above SharePoint list named Bike Sales. Also, we have created two dropdown lists using the title, and payment mode like below:

Items = Distinct(BikeSales,Title)      // To display the list of title column without repeated items within the dropdown control

Items = Choices(BikeSales.'Payment Mode')   //To display the choices of the SharePoint choice column (i.e., Payment Mode)

To concatenate both the dropdown values, we will add a label control to the Power Apps screen and insert the below expression on the label’s text property.

Text = Concatenate(Title_Dropdown.SelectedText.Result, "-",Payment_Dropdown.Selected.Value)

Where Title_Dropdown and Payment_Dropdown are the names of the dropdown controls. To join the dropdown’s values we have used the power Apps concatenate function.

Now, play the app and select items from both the dropdown controls. We can see the selected items will display in the label control like below:

This is how to concatenate values from multiple dropdowns on Power Apps.

Also, you may like the below Power Apps Tutorials:

• How to Work With Power Apps Dropdown Blank Values
• How to Set Default Value in Power Apps Dropdown
• How to use Power Apps Gallery Dropdown
• PowerApps stuck on getting your data
• Power Apps SharePoint Button
• Power Apps Navigate Function + 16 Examples
• Power Apps Combo box with SharePoint list
• Power Apps combo box default value

Conclusion

This Power Apps tutorial explained how to work with Power Apps Dropdown Control with SharePoint list with the help of various scenarios. Also, we covered the topics below:

• How to work with choices within the Power Apps dropdown control?
• How to use SharePoint yes/No on the Power Apps dropdown?
• Working with PowerApps dropdown person field
• PowerApps dropdown with image
• What is PowerApps dropdown two columns
• Working with PowerApps dropdown list number
• PowerApps dropdown year
• Power Apps dropdown concatenate values