A gallery control is used to show multiple records from a data source, and each record can contain multiple types of data. To filter the records in gallery we can use various in-built function such as Filter with StartsWith or Search function.
Let’s see how to filter and search an items in gallery.
As you can see in below screenshot, here we have a gallery control which is displaying an orders data and the gallery control name is Gallery_Orders.
Filtering and Searching an items in Gallery
Let’s implement a search box experience for end user. For this, we will create a search box which will allow user to search records for Category and Segment in gallery.
Let’s add a Text input control and make it look like a search box.
Now, named it txt_search and set it’s Default text value to blank just remove the default text.
Next, provide a Hint text “Search by Category and Segment”.
Now, go to an Item property of gallery control and write below code.
Filter( Orders, (StartsWith( Category, txt_search.Text ) || StartsWith( Segment, txt_search.Text )) )
Let’s understand the above code, here StartsWith with the Filter function is used to search the records in gallery.
Startswith function check if any values for items Category and Segment is start with string provided in txt_search control or not. It is case-insensitive.
So, the below piece of code checks either Category or Segment value is starting with the string provided in txt_search control, if so then it returns true.
StartsWith( Category, txt_search.Text ) || StartsWith( Segment, txt_search.Text )
Then Filter function returns those set of records in a table format that satisfy a Startswith check condition.
Now, run the app. You can see, it searches an items in gallery for Category value Technology. Also, it searches for Segment value Home Office.
Now, we will filter the gallery records for country using drop down control.
Add a drop down control, and named it drp_country.
Now, bind the drop down with Country. For that, set an items property of drp_country control’s to below code.
Distinct( Orders, Country )
You can see the countries in drop down, by default one country is auto selected in drop down.
Next, add a Text label control and set it’s Text property to Country.
Now, go to Items property of gallery control and modify an existing code. We will add one more condition there to filter record for Country selected in drop down.
Filter( Orders, (StartsWith( Category, txt_search.Text ) || StartsWith( Segment, txt_search.Text )) && (Country = ddl_Country.Selected.Value) )
Let’s run the app, and you can see it filters the gallery’s items for selected Country Australia and Segment Consumer.
In case, if you are allowing an empty selection for Country drop down.
To make the drop down to allow empty selection, go to Advance property of drop down control and set AllowEmptySelection property to true as shown below.
Allowing an empty selection means drop down control shows an empty selection if no item has been selected.
Once you allow empty selection for drop down. It displays an empty selection in drop down by default, if value is not selected in country drop down.
You will see, as soon you allow an an empty selection for drop down. Gallery does not show any records.
As it checks for records where country value is empty or you can say blank. To handle this situation, we need to modify the code written in Items property of gallery control.
Filter( Orders, (StartsWith( Category, txt_search.Text ) || StartsWith( Segment, txt_search.Text )) && (Country = ddl_Country.Selected.Value || ddl_Country.Selected.Value =Blank()) )
Now, you can see. No item is selected in country drop down. In this case, all records in gallery control are filtered for Segment Consumer only.
Now, when you select any country then all records in gallery control are filtered for selected Country and provided string in text input control for Segment or Category.
Let’s select Country Germany and this time instead of Segment, we search an item for Category that is Technology.
You can see, gallery items are filtered for Category Technology and Country Germany.
Using Filter with Search function
In place of StartWith function you can also use Search function which search for a string provided in text input control in the gallery’s items Category and Segment with partial match within the data of any of these items.
Let’s modify the above code as shown below.
Search( Filter( Orders, (Country = ddl_Country.Selected.Value || ddl_Country.Selected.Value = Blank()) ), txt_search.Text, "Category", "Segment" )
Now, run the app, and you can see it searches partially for value provided in Text Input control and selected Country.