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.

powerapps dropdown to SharePoint list
Power Apps dropdown to SharePoint list

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.
powerapps dropdown to SharePoint
powerapps dropdown to SharePoint

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.
power apps dropdown to SharePoint list
power apps dropdown to SharePoint list
  • 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.

powerapps dropdown control to SharePoint list
powerapps dropdown control to SharePoint list

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.

powerapps drop down control to SharePoint list
powerapps drop down control to SharePoint list

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

power apps dropdown control to SharePoint list
power apps dropdown control to SharePoint list

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‘.

powerapps dropdown choices
Power Apps dropdown choices

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.

PowerApps dropdown choices function
PowerApps dropdown choices function

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).

powerapps dropdown YesNo
powerapps dropdown YesNo

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.
Power Apps dropdown yes no
Power Apps dropdown yes no
  • 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")
powerapps dropdown using SharePoint Yesno
powerapps dropdown using SharePoint Yesno
  • 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"))
Power Apps dropdown with YesNo
Power Apps dropdown with YesNo
  • 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
power apps dropdown with SharePoint YesNo
power apps dropdown with SharePoint YesNo

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:

Power Apps dropdown control with YesNo
Power Apps dropdown control with YesNo

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‘.

powerapps dropdown person field
powerapps dropdown person field
  • 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.

powerapps dropdown SharePoint person field
powerapps dropdown SharePoint person field
  • 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.

powerapps dropdown with person field
powerapps dropdown with a person field

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:

powerapps dropdown with SharePoint person field
powerapps dropdown with a SharePoint person field

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.
powerapps dropdown with image
powerapps dropdown with image
  • 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:

powerapps dropdown with image column
Powerapps dropdown with an image column
  • 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
Show a SharePoint picture based on Power Apps dropdown selection
Show a SharePoint picture based on Power Apps dropdown selection

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:

SharePoint Image with Power Apps drop down list
SharePoint Image with Power Apps drop-down list

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.

powerapps dropdown two columns
powerapps dropdown two columns

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.
powerapps dropdown using two columns
powerapps dropdown using two columns
  • 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
Create powerapps dropdown using two columns
Create a powerapps dropdown using two columns

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

Power Apps Drop down to show 2 columns from SharePoint list
Power Apps Drop down to show 2 columns from the SharePoint list

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

PowerApps dropdown items from the two SharePoint columns
PowerApps drop-down items from the two SharePoint columns

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’.

powerapps dropdown list number
powerapps dropdown list 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:

powerapps dropdown SharePoint list number
powerapps dropdown SharePoint list number

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:

powerapps dropdown SharePoint number column
powerapps dropdown SharePoint number column

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:

powerapps dropdown year
powerapps dropdown year

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:

powerapps dropdown with SharePoint year
Power Apps dropdown with SharePoint year

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)
powerapps dropdown concatenate values
powerapps dropdown concatenate values

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.

powerapps dropdown concatenate selected values
powerapps dropdown concatenate selected values

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:

Concatenate values from multiple dropdowns on Power Apps
Concatenate values from multiple dropdowns on Power Apps

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

Also, you may like the below Power Apps Tutorials:

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
>