PowerApps Dropdown Gallery + Examples

In this Power Apps tutorial, We will discuss that how we can work with a Power Apps Dropdown gallery. Also, We will cover these below topics:

• How to work with PowerApps dropdown filter gallery
• PowerApps gallery dropdown items
• How to add PowerApps dropdown image
• PowerApps dropdown inside gallery
• What is PowerApps cascading dropdown gallery
• Use PowerApps sort gallery dropdown
• PowerApps reset dropdown in gallery

If you want to learn more about the Dropdown control in Power Apps, then you can refer to this below-detailed guide:

• Power Apps Dropdown Control – How to use

PowerApps Dropdown Gallery

In this topic, By taking a simple scenario, We will see how to use Dropdown Gallery in PowerApps. To work around this, Check out the below steps.

Step – 1:

• At first, Insert a Button input control (Book Sales) and create a Collection on its OnSelect property:

OnSelect = ClearCollect(
    BookDetails,
    {
        Book: "Cheque Book",
        Author: "Vasdev Mohi",
        Totalsales: 861500
    },
    {
        Book: "Celestial Bodies",
        Author: "Jokha Alharthi",
        Totalsales: 356200
    },
    {
        Book: "The Testaments",
        Author: "Margaret Atwood",
        Totalsales: 316500
    },
    {
        Book: "The Overstory",
        Author: "Richard Powers",
        Totalsales: 287400
    },
    {
        Book: "Game Changer",
        Author: "Shahid Afridi",
        Totalsales: 227300
    }
)

Where,

1. BookDetails = Collection Name
2. Book, Author, TotalSales = Collection Headers

Step – 2:

• Next, Add a Dropdown control and apply this below code on its Items property as:

Items = Distinct(BookDetails,Author)

• The Distinct function helps to remove the duplicate values and display the unique values in the collection.

Step – 3:

• At last, Insert a Vertical Gallery control and change its Layout to Title. Select the gallery and set this below code on its Items property as:

Items = Filter (
    BookDetails,
    ddBooks.Selected.Result in Author
)

Where,

ddBooks = Dropdown control name that displays the Author names

• Then, Select the Label control inside the gallery control and set its Text property as:

Text = ThisItem.Book

• Now Save, Publish and Preview the app. Tap on the Book Sales button. When you will click on the button, then the collection will create. You can view it through the Collections section (View -> Collections).
• Then select any Author name from the Dropdown control, at the same time you can see the specific selected Author’s Book inside the gallery as like the below screenshot.

PowerApps dropdown filter gallery

Do you want to filter a Power Apps gallery based upon the Dropdown control? Refer to these below scenarios to achieve this.

We can filter the Power Apps Gallery with a single Dropdown and as well as multiple Dropdown controls.

Example – 1: (PowerApps dropdown filter gallery with single Dropdown)

• There is a SharePoint List named Products. In that list, there is a Choice column named Vendor having some choice values like SAMSUNG, MICROSOFT, APPLE, etc.
• In the PowerApps, I have a Dropdown control and as well as a Gallery control. The dropdown menu is having all the vendor options from the SharePoint list.
• Now I would like to filter PowerApps gallery depends on the Dropdown value. For example, Suppose I have chosen the vendor as APPLE, then the gallery will filter and display only the APPLE product details as shown below.

• To work around this, Select the gallery control and apply this below formula on its Items property as:

Items = Filter(
    Products,
    Vendor.Value = ddVendor.Selected.Value
)

Where,

1. Products = SharePoint List name
2. Vendor = SharePoint Choice column name. As this is a Choice column, So we need to set it with “.Value“
3. ddVendor = Dropdown control name

Example – 2: (PowerApps dropdown filter gallery with multiple Dropdown)

Here we will see how we can filter the gallery with multiple Dropdown controls.

• In this example, you can see there are three Dropdown controls named Project Name, Employee Name, and Project Status. Also, there is a Gallery control that will help to filter the items and display the result based upon the multiple dropdown values.
• For example, I have selected the Project name as PowerApps Project with the Employee Name Preeti and that project should be Approved. So the gallery will display only the items that should matches with all these three dropdown values. Refer to the below screenshot.

• Below represents the SharePoint List called Project Details (the PowerApps dropdown values are retrieved from this list). This list contains these many below columns with different data types:

1. Title = By default, this is a single line of text column
2. Employee = Person or people picker column
3. Employee Last Name = Single line of text column
4. Employee Job = Choice column
5. Client = Choice column
6. Project Created Date = Date Time column
7. Project Status = Choice column

• Now in PowerApps, I have inserted a gallery control and three dropdown controls. The gallery is having all the items from the Project details list.
• I have entered the values manually to the first and third Dropdowns where for the second one, I have used a Combo box control (because the Employee Name is a Person type field) .

• Follow the below codes that I have used for three Dropdown controls.

1. Project Name: Select the Dropdown control and set its Items property as:

Items = [
    Blank(),
    "PowerApps Project",
    "Sample Project",
    "Power BI Project",
    "SharePoint OnPremise and Online",
    "SharePoint"
]

Where,

“PowerApps Project“, “Sample Project“, “Power BI Project” and so on = Specify the choice values that should match with the SharePoint column values (Title column)

2. Employee Name: Select the Combobox control and apply this below code on its Items property:

Items = Office365Users.SearchUser(
    {
        searchTerm: Self.SearchText,
        top: 10
    }
)

• Before applying this code, do not forget to connect the Office365Users connection to the app. Otherwise, an error will appear on the screen.

• Also, write this below code in the following properties of Employee Combo box control:
  • DisplayFields: [“Display Name”]
  • SearchFields: [“Display Name”]
  • IsSearchable: true
  • SelectMultiple: false

• And the most important thing you should know is, you need to set the Primary text and SearchField of the Combobox control.
• To do this, Select the Combobox control -> Go to Properties pane -> Click on Edit from the Fields section -> Select the DisplayName in Primary text and SearchField properties.

3. Project Status: Select the Dropdown control and set its Items property as:

Items = [
    Blank(),
    "Submitted",
    "Approved",
    "Rejected",
    "Pending"
]

Where,

“Submitted“, “Approved” and so on = Provide the choice values that should match with the SharePoint column values (Project Status)

• At last, set this below property to the Items property of the gallery control:

Items = Filter(
    'Project Details',
    ddProjName.Selected.Value = Blank() Or Title = ddProjName.Selected.Value,
    cbEmpName.Selected.DisplayName = Blank() Or Employee.DisplayName = cbEmpName.Selected.DisplayName,
    ddProjStatus.Selected.Value = Blank() Or 'Project Status'.Value = ddProjStatus.Selected.Value
)

Where,

1. ddProjName = Project name dropdown control name
2. cbEmpName = Employee name dropdown control name
3. ddProjStatus = Project Status dropdown control name

This is how we can use the PowerApps dropdown filter gallery.

PowerApps gallery dropdown items

In this scenario, We will discuss how to work with PowerApps gallery dropdown items.

• Here what I would like to do is, there are some dropdown controls inside a gallery control. When I will change the dropdown values inside gallery, then it will change or update in the SharePoint List as well. Refer the below screenshot.
• For this scenario also, I have taken the same SharePoint List as Project Details. And the field I have used for Dropdown control is a Choice field named Client. This choice field is having some company’s Client name like HCL, Conros, Intel etc.

• To get the SharePoint Choice values, you can set this below code in the Dropdown’s Items property:

Items = Choices('Project Details'.Client)

• Once you wil apply the above code, then all the choice values will appear in the dropdown control once you will click on it.

• Next, set this below code to Dropdown’s Default property as:

Default = ThisItem.Client.Value

Like the values, we retrieved from the SharePoint choice field, that’s why we need to put with the column name including a “.Value“

• At last, Select the OnChange property of the Dropdown control and apply the below formula:

OnChange = Patch(
    'Project Details',
    ThisItem,
    {Client: {Value: Dropdown2.Selected.Value}}
)

Where,

1. Patch = To modify single or multiple records of a data source, we can use the PowerApps Patch Function
2. Dropdown2 = Dropdown control name that is present inside the gallery

• Now save and preview the app. Change the dropdown value(s) within the gallery. Open the existing SharePoint list, then you can see the values has updated.

PowerApps dropdown image

Do you ever want to display images or pictures in the Power Apps Dropdown control?

• So coming to the answer is, unfortunately, a Dropdown control can not display any PowerApps images or pictures. Because there is no such property where we can view the images in the dropdown menu.
• But alternatively, what we can do is, we can add an image control and use a dropdown control for the reference purpose. Follow the below instructions that we can do.
• As you can see in the below screenshot, there is a Dropdown control and an Image control. The dropdown control is having some values that are retrieved from the SharePoint Library.
• So when the user will select any option from the dropdown menu, then in the right side, that specific image will appear.

• To achieve the above requirement, first of all, you need to create a SharePoint Document Library. I have created one named Image Library.
• In the library, I have created two columns as:
  • Image Title = Single line of text data type
  • Thumbnail = you can take either Hyperlink or Picture data type

• Once you have created the columns, upload some pictures to the library with image title as like the below screenshot.

• Next, go to app. Insert a Dropdown control and an image control at the right side of the dropdown menu.
• Select the dropdown control and set its Items property as:

Items = 'Image Library'.'Image Title'

• Then apply the below code on Image control’s Image property as:

Image = LookUp(
    'Image Library',
    'Image Title' = ddTitle.Selected.'Image Title',
    'Thumbnail ({Thumbnail})'.Large
)

Where,

ddTitle = Dropdown control name

• Now Save and Preview the app. When you will select any title from the dropdown control, you can see that particular related image will appear in the image control.

To know more details about how we can use the Power Apps Dropdown control for images, follow the below-detailed guide (including various examples):

PowerApps Image Control

PowerApps dropdown inside gallery

The next topic comes to how we can work around with the PowerApps dropdown inside the gallery.

• Some times in some cases (mostly for beginners) what happens is, there is some error occuring while they are working with a SharePoint Choice field. See the below things to know what the actually error is.
• Suppose in the app, there is a Gallery control and the items are retrieved from a SharePoint list. Let’s assume, in the field, there is a Choice field named Color.
• Now I would like to display this choice values inside the gallery control. So as a beginner, I donot know how to use the choice field value in the PowerApps gallery.
• So I have put this below code on Label’s Text property as:

Text = ThisItem.Color

• Once I have applied the above formula, an error came as “Expected Text value“. The error occured because it is expecting the choice value instead of a text. Also, the field is a choice field.

• So the solution is as much as simple. To achieve our need, we will just add a “.Value” including the choice column name.
• The reason we will add “.Value” is because ‘Client’ is a Choice datatype. Choice datatypes are actually records that have one or more properties. To select the specific property to display we must add a ( . ) then pick the desired property.

Text = ThisItem.Color.Value

• Once you will save and preview the app, you can see all the choices in the gallery control as shown above.

PowerApps cascading dropdown gallery

• Do you know what is Cascading Dropdown gallery in Power Apps and how you can create it?
• If not so, then please go through the below detailed guide where you can find all the requirements that you can use it easily.

PowerApps Cascading Dropdown

PowerApps sort gallery dropdown

Do you want to sort the gallery control based on the value selected in the Dropdown in Power Apps? Check out the below scenario.

• There is a SharePoint list named Customer Care Report Details. This list has some various columns with different data types.
• Now I would like to sort the dropdown control and gallery based upon these below two columns as:

1. Customer Care Report For = Single line of text data type
2. Customer Name = Single line of text data type

Follow these below processes to do so.

• At first, Insert a Dropdown control and set the column names on its Items property as:

Items = ["CustomerCareReportFor", "CustomerName"]

Where,

“CustomerCareReportFor”, “CustomerName” = SharePoint column name. Here, the column name should be the SharePoint internal column name

Next, add a Gallery control and apply this below formula on its Items property as:

Items = SortByColumns(
    'Customer Care Report Details',
    Dropdown4.Selected.Value,
    Ascending
)

Where,

1. Dropdown4 = Dropdown control name
2. Ascending = Specify the order that you want

• Save and Preview the app. Select any column name from the dropdown control, then the result will display in the gallery control with the ascending order as shown above.

PowerApps reset dropdown in gallery

Do you want to reset the Dropdown control in PowerApps? Yes, Of course, you can do it easily in many ways. Here below represents some of the tricks that you can go for it.

Example – 1:

• The first approach is very simple to reset any Dropdown control. To achieve this, we will use the PowerApps Reset function.

• You just need to select the OnVisible property of the screen (where the dropdown control is present) and then set the below code:

OnVisible = Reset(ddBussiness)

Where,

ddBussiness = Specify the dropdown control name that you want to reset. You must ensure that the provided dropdown control name should be correct.

• Now change any value from the dropdown control and then Save and publish the app. Once you will reopen the app again, you can see the dropdown control has reset to its default value.

Example – 2:

• There is another way where we can reset the Dropdown control in the app. To do this, We will set a Context variable in the Dropdown’s Reset property and then we will apply the code where we want to trigger the reset (like Button’s OnSelect property, Screen’s OnVisible or OnHidden property etc.)
• At first, Select the Dropdown control and set a variable on its Reset property as:

Reset = ResetVar

Where,

ResetVar = Context Variable name

• In this example, I have applied the below formula on Screen’s OnVisible property that I want to trigger.

OnVisible = UpdateContext({ResetVar: true});
UpdateContext({ResetVar: false})

• Save, Publish and Close the app. When you will reopen the app again, you can see the dropdown value has reset to its default value.

Example – 3:

In this scenario, I will take a Power Apps Button to reset the Dropdown control within the gallery. Refer to the below instructions to do so.

• In the below screenshot, you can see there are some dropdown controls in the PowerApps gallery. Also, there is a Button input (RESET) that can help to reset the dropdown values once the user click on it.
• Select the Reset button and apply this below code on its OnSelect property as:

OnSelect = Set(
    varResetAll,
    true
);
Set(
    varResetAll,
    false
);

Where,

varResetAll = Variable name

• Next, select the Dropdown control inside the gallery and then set its Reset property to this below code:

Reset = varResetAll

• At last, save and preview the app. Change the values from the dropdown control that you want to set and then tap on the RESET button.
• Once you will tap on it, you can see the gallery dropdown values will reset to its default value.

Also, you may like these below PowerApps tutorials:

• PowerApps Filter SharePoint List (21 Examples)
• Power Apps List Box Control – Complete tutorial
• PowerApps Container Control – Complete tutorial
• Power Apps GroupBy Function example
• Power Apps Audio and Video Control [Detailed tutorial]
• Power Apps Len Function
• How to Create Tabbed Forms in PowerApps for SharePoint List
• PowerApps CountIf Function with Examples
• PowerApps repeating table
• PowerApps CountRows function with Examples
• PowerApps Count Function with Examples
• PowerApps CheckBox – How to use
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps LastSubmit() with Examples
• PowerApps AddColumns Function with Examples
• PowerApps ForAll Function with examples

In this Power Apps tutorial, we discussed that how to work with a Power Apps Dropdown gallery. Also, We covered these below topics:

• Work with PowerApps dropdown filter gallery
• How to add PowerApps gallery dropdown items
• How to add PowerApps dropdown image
• PowerApps dropdown inside gallery
• What is PowerApps cascading dropdown gallery
• Use PowerApps sort gallery dropdown
• PowerApps reset dropdown in gallery