Automatic filtering of dropdown and gallery based on SharePoint data

[Adinator]

Description of the problem:

I am developing an app in PowerApps that is based on a SharePoint page (SP machine). On this page, a hall layout is displayed with buttons, each with the name of a machine (e.g. COM-ABC-01 and other machines). The column containing the machine names is called ‘MachineID’.

The desired behaviour is that when I click on one of these buttons in the hall layout, the app navigates to the ‘Screen_Overview’ screen. On this screen there is a dropdown menu (DropdownMachine) and a gallery (GalleryMachine).

After clicking on one of the buttons in the hall layout, the dropdown menu should automatically select the corresponding machine name and the gallery should only display the results for this selected machine.

Example:

If I click on the ‘COM-ABC-01’ button in the hall layout, the app should navigate to the ‘Screen_AuditFindings’ screen.
On this screen, the dropdown menu should automatically select ‘COM-ABC-01’.
The Gallery should only show the results for the machine ‘COM-ABC-01’.

I need assistance in implementing this behaviour in PowerApps.

@gcmfaizan @WarrenBelz @BCBuizer @RogierE 

[Robu1]

Hi @Adinator ,

Implementing this behavior in PowerApps involves filtering a gallery based on the selected machine name from a dropdown. Let’s break it down into steps:

1. Dropdown Setup:

   • Create a dropdown control (let’s call it DropdownMachine).
   • Set the Items property of the dropdown to the list of machine names (e.g., Choices(DataSource.MachineID)).

2. Gallery Setup:

   • Create a gallery control (let’s call it GalleryMachine).
   • Set the Items property of the gallery to filter the data source based on the selected machine name from the dropdown:

     Filter(DataSource, MachineID = DropdownMachine.Selected.Value)

3. Navigation:

   • When a button (e.g., ‘COM-ABC-01’) is clicked in the hall layout, navigate to the desired screen (e.g., ‘Screen_AuditFindings’).
   • Before navigating, set the selected machine name in the dropdown:

     Set(DropdownMachine.Selected, {Value: "COM-ABC-01"})

   • The gallery will automatically update to show results for the selected machine.

Remember to replace DataSource with your actual SharePoint data source and adjust control names accordingly. This approach ensures that the gallery displays relevant data based on the selected machine name. If you encounter any issues or need further assistance, feel free to ask!

If this post helps, then Click on the Thumbs Up below and Accept it as the solution to help others.   Thanks,   Robu1.

[Adinator]

Hi @Robu1 ,

thanks, but unfortunately I'm having problems implementing it.

When I try to do this, it shows me as an error:

That's what you told me:

Set the Items property of the gallery to filter the data source based on the selected machine name from the dropdown:

Filter(DataSource, MachineID = DropdownMachine.Selected.Value)

My Sharepointlist is called MachineDetails, and the column where the machine names are is called MachineID, I don't understand why this is an error.

2. where do I write this? It is the Items property of the gallery or Dropdown or Button?

Set(DropdownMachine.Selected, {Value: "COM-ABC-01"})

@WarrenBelz @Amik @mmbr1606 

[Robu1]

I apologize for the confusion. Let’s break this down better:

1. Filtering the Gallery:

   • The code snippet you provided is correct for filtering a gallery based on the selected machine name from the dropdown. You should set the Itemsproperty of your gallery to the following expression:

     Filter(MachineDetails, MachineID = DropdownMachine.Selected.Value)

   • Make sure to replace MachineDetailswith the actual name of your SharePoint list and MachineID with the correct column name where the machine names are stored.

2. Setting the Dropdown Value:

   • The code you mentioned (Set(DropdownMachine.Selected, {Value: "COM-ABC-01"})) should be placed in the OnSelect property of a Button control.
   • Here’s how you can do it:

     OnSelect = Set(DropdownMachine.Selected, {Value: "COM-ABC-01"})

   • Replace Button with the actual name of your button control.

Make sure to follow these steps, and it should work as expected. If you encounter any further issues or need additional assistance, feel free to ask! 😊

[Adinator]

Hi @Robu1 

please show the pics

Let me explain the problem to you:
When you start the app, ‘ScreenHalllayout2’ appears
I have created 3 buttons and simply named them COM-ABC-01;COM-ABC-02; COM-ABC-03.
In Screen2 there is only a dropdown and a gallery.

These machine names are stored in Sharepoint.
The Sharepoint list is called MachineDetail, the column with the machine names like COM-ABC-01 is called MachineID.

If you click on the COM-ABC-01 button in ScreenHalllayout2, you want to navigate to Screen2 and automatically filter for COM-ABC-01 in dropdown and accordingly the gallery should display everything for COM-ABC-01. The same if you click on COM-ABC-03 in ScreenHalllayout should be filtered by COM-ABC-03 in dropdown and accordingly the gallery should display everything for COM-ABC-03.

Translated with DeepL.com (free version)

[Robu1 · Accepted solution]

Could you perharps share the screenshots of your app?

To achieve this behaviour in your Power Apps application, you can follow these steps:

1. Create a Local Variable:

   • On each button click (e.g., COM-ABC-01, COM-ABC-02, COM-ABC-03), create a local variable using the UpdateContext function. For example:

     UpdateContext({varSelection: "COM-ABC-01"})

     Adjust the variable name and value according to the button clicked.

2. Set Default Value on Screen Load:

   • In the OnStart property of your Screen2, set the default value for the variable. For example:

     UpdateContext({varSelection: "ALL"})

     This ensures that when the screen loads, the gallery initially displays all items.

3. Filter the Gallery Items:

   • In the Items property of your gallery, use the filter function to filter the items based on the selected machine ID. For example:

     Filter(MachineDetail, MachineID = varSelection)

     Replace MachineDetail with the actual name of your SharePoint list.

4. Dropdown Default Value:

   • Set the default value of your dropdown control to the same variable (varSelection). This way, when you navigate to Screen2, the dropdown will automatically show the selected machine ID.

By following these steps, your gallery will display the relevant items based on the button clicked, and the dropdown will reflect the selected machine ID. If you need further assistance or have any other questions, feel free to ask! 😊

For additional reference, you can also check out similar solutions from the Power Apps community here Solved: How to filter gallery list based on button click - Power Platform Community (microsoft.com)

[Adinator]

Hi @Robu1 

1. do I put the formula in the OnSelect property of the buttons?

2. screen2 has no OnStart property but only OnHidden and OnVisible. What should I do?

4. what do I write as a formula in the dropdown?

[BCBuizer · Accepted solution]

Hi @Adinator ,

1. Yes

2. Indeed the OnVisible property should be used

4. Set the Default property of the drop down to varSelection