PowerApps multi-select dropdown

This Power Apps Tutorial will teach you how to create and use a multi-select dropdown within Power Apps. Let us try to understand how PowerApps multi-select dropdown works with an example.

Apart from this, we will see how to save data from a Power Apps multi-select dropdown to a data source (i.e., SharePoint or Excel) using various Power Apps functions such as SubmitForm() and Patch().

We recently received a request to use the Power Apps dropdown control to save data while working with Power Apps canvas apps.

There is a SharePoint list having a choice field that allows multiple choices. Using this SharePoint choice field will build a dropdown control within the Power Apps that allows multiple-choice values.

To implement this requirement, the following steps are:

Build a multi-select dropdown control in Power Apps

Let us understand how to add a dropdown control within the Power Apps that will allow multi-choice values.

Requirement:

We have a SharePoint list named Workers having a multi-selected choice field ‘Working Days’. Apart from this, the list has one people column, one date column, and two more choice fields.

Build Power Apps multi select dropdown control
Build Power Apps multi-select dropdown control

As per the requirement, within the Power Apps, we need to create a multi-select dropdown control based on the above SharePoint choice field, i.e., ‘Working Days.’

Add a multi select dropdown control to Power Apps
Add a multi-select dropdown control to Power Apps

To build a multi-select Power Apps dropdown control, the following steps are:

  • Once you sign in to the Power Apps, go to Create > Blank app > Blank canvas app > Create.
  • It will create an empty canvas app with a blank screen. At this point, connect the SharePoint list (Workers) to the canvas app. Go to Add Data > SharePoint > Select a list > Connect for this.
  • On the Power Apps blank screen, add an edit form. Under the Insert tab, you can find the edit form.
  • Connect that edit form with the SharePoint data source i.e., Workers. We can see, it will retrieve all the fields from the SharePoint list to Power Apps.
Build a Power Apps multi select dropdown control in an edit form
Build a Power Apps multi-select dropdown control in an edit form
  • That’s it! The multi-select dropdown control has now been added to the Power Apps edit form.
  • Let’s preview the app and we can see that the ‘Working Days’ dropdown supports multiple values at the same time.
Power Apps multiselect dropdown control
Power Apps multi-select dropdown control

This is how to build a multi-select dropdown control within the Power Apps.

Save multi-select dropdown data to SharePoint

In this section, we will see how to save multi-select dropdown data to a SharePoint list.

Once our Power Apps form is ready, we need to save the data from the Power Apps to the SharePoint list. For this, the following steps are:

  • On the above Power Apps screen, add a button and place it under the form.
  • Give a name to the button control i.e., Save.
  • Insert the below expression on the button’s OnSelect property.
OnSelect = SubmitForm(Workers_Details_Form)

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

A form with a multi-select dropdown in Power Apps
A form with a multi-select dropdown in Power Apps

Let’s publish and preview the app. Fill out the forms and click on the Save button. We can see the data got saved on the SharePoint list.

Working with Power Apps multiselect dropdown control
Working with Power Apps multi-select dropdown control

This is how to work with Power Apps multi-select dropdown control to save data.

Read Send formatted email using Power Apps HTML Text control

Save multi-select dropdown data to SharePoint using patch

There is another Power Apps function named Patch() that is used to save the data from the Power Apps to any data source(i.e., SharePoint).

For this, we are going to use the above example of the Power Apps form and the following steps are:

  • On the above Power Apps screen, add another button control and place it under the edit form.
  • Give a name to the button i.e., Submit.
  • Insert the below expression on the button’s OnSelect property to save the data from Power Apps to SharePoint.
OnSelect = Patch(
    Workers,
    Defaults(Workers),
    {
        Name: DataCardValue3.Selected,
        'Join Date': DataCardValue5.SelectedDate,
        'Work Mode': DataCardValue2.Selected,
        Position: DataCardValue8.Selected,
        'Working Days': DataCardValue9.SelectedItems
    }
)

Where,

  1. Name, ‘Join Date’, ‘Work Mode’, Position, and ‘Working Days’ is the names of the columns of the SharePoint list.
  2. DataCardValue3, DataCardValue5, DataCardValue2, DataCardValue8, and DataCardValue9 is the name of the Power Apps edit form’s dropdown control.
Working with PowerApps multiselect dropdown control
Working with PowerApps multi-select dropdown control

Let’s publish the app and insert the details on the Power Apps form. While clicking on the Submit button, it will save the data to the SharePoint list as shown below:

select more than one item from Power Apps drop down list
select more than one item from Power Apps drop-down list

This is how to work with Power Apps multi-select dropdown control.

Conclusion

From this Power App Tutorial, we learned how to work with PowerApps multi-select dropdown control. Along with this, we discussed the below things based on different scenarios such as:

  • How to save data from the Power Apps multi-select dropdown control to a SharePoint list?
  • How do patch data from the Power Apps multi-select dropdown control to a SharePoint list?

You may like the following Power Apps tutorials:

>