Filters UI Template 1

This page is explaining how to use the Filters UI Template 1 into your Bubble app. You can preview this component here : https://app.nocodable-components.com/preview?c=1720689682226x898739862162636800

Adding this components to your Bubble app

To add this component to your Bubble app, open Nocodable Component's chrome extension and click "Copy Component" to copy it.

Once done, you can right click in your Bubble editor and use the "Paste" action.

This action will create a new Reusable Element.

This component is a Template that should be declined according to your apps various needs. This is why we recommend renaming this Reusable Element when adding it to your app.

This will allow you to paste another template later on.

Once this element is pasted to your app, go back to the page when you want to add this Filters UI and drag this reusable element to your page (you will find it in your app's Reusable Element).

Once it is added, don't forget to check the "Fit width to content" checkbox.

And there you go, your filters has been added to your app !

How to use this component ?

By default, this components comes with several built in fields that can be customized, duplicated or deleted following your needs.

With those default fields, you'll be able to quickly build pretty much any filtering option you need in no time, whether they are based on a text field, a number, a date or a list of options.

Adding a new filtering option

For the need of your app, you might need to add one or several others filtering options.

To do this, here's what you need to do :

1. Duplicate one of the premade field

2. Rename the Group and the input

3. Create a new custom state to store it's value

4. Update the "Apply" and "Reset" workflows

1 - Adding a new field

If you want to duplicate a field, simply simply the group containing the filters and it's labels and use the "Copy with Workflows" action, and "Paste with Workflows" action.

2 - Don't forget to appropriately rename the group and the input. You'll thank yourself later on when updating the workflows

3 - Now you'll need to create the corresponding custom state. To do this, simply select your Reusable Element, and click the ℹ️ icon to open the custom state's panel.

Make sure to choose the right type of data for your custom state. If you're filtering based on a number, choose the type "number", if it's a date choose "date" and so on...

4 - Finally, you'll need to update the "Apply" and "Reset" workflows to make sure that your filters are saved correctly.

Updating the "Apply" workflow

To do this, go to the workflow tab, and find this workflows : (you can also select the button, and click "Edit Workflow")

As you can see, it's a simple workflow that update our Reusable Element's Custom State and Toggle our Focus Group. Nothing too fancy.

All you need to do know is select the first step of this workflows, and add your newly created Custom State and set it's value based on the corresponding input.

In my case, I chose to add a dropdown with a few text options that specify whether is invoice has been Paid, Unpaid or if the payment Failed.

So here's how it looks :

Updating the "Reset" workflow

Finally, all we need to do know is to update the "Reset" workflow.

Nothing too difficult, simply find this workflow (or click on the reset all button and click "Edit Workflow") :

Once you're there, select the first step of the workflow and simply add your Custom State to the list and leave it's value empty. This will basically reset it.

And there you go !

Using filters values

Obviously, once the filters have been applied by the user, you will want to use them within your app to filter a search (within a Table or a Repeating Group for example).

To do this, head back to the page where you want to use this filters.

From there, you'll be able to reference the Reusable Element's Custom States, where the filtering values are stored.

Each time the button "Apply" or "Reset" or "Reset All" are clicked, the Custom States are updated with their value.

Let's take a live example to see how can filter a simple table :

In this example this table is displaying a simple list of Invoices, with a few parameters such as Amount, Status and Invoice Number.

Let's say I want to add the option to filter these invoices based on their amount, here's how it goes :

1. Add a constraint to your Table's Data Source (or your RG)

Doing this is pretty straightforward. All you need to do is to add those two constraints :

As you can see on these blue expressions, I'm referencing the Reusable Element's Custom States. Once again, this is where the values of my filters are stored.

⚠️ IMPORTANT : Do not forget to check the "Ignore empty constraints" checkbox. This will make sure that empty filters are not taken into account.

Also, make that the Data Type of your item's fileds and your filter correspond. If you want to filter a Number value, both should be of type Number (or integer).

Here's how it looks :

And now, you can basically repeat this step for the other fields.

For example, if I wanted to create a basic search based on the Invoice Number, I would add this constraint to my search :

Note that in my case, the Invoice Number is of type "Text", so this is basically how you would do a search for keywords.

And here's how it looks :