With Ycode’s filter and search feature, you can create tables and give web visitors the option to filter results and easily search for what they’re looking for. This will be super helpful when showing lots of data!
Filtering and searching in Ycode
For these guidelines, we’ll create a list of cars to apply our filters and search to.
First, let’s create a database with a list of cars.
Navigate to the database tab, then click on + Create local database (or simply the plus sign next to local databases). Then add a name (we named our “Cars”) and click on Create database.
To add the fields that contain the information about each car, click on + Add field and choose the field type you want to use.
For our example, we want the fields:
Brand name
Model name
VIN (Vehicle Identification Number)
Then add all car information entries by clicking on + New entry.
You can also upload this data at once using a CSV file. Click here to learn more about uploading data in bulk.
Now we need to create two more databases:
Car colors (named “Color”)
Year in which the car was manufactured (named “Year”)
Finally, open the “Cars” database and add two reference fields, with the name “Color”, and “Year”.
These reference fields are needed for building elements we’re adding to our canvas later on. You can then fill all the fields with as much information as you want.
With your databases set up, let’s start building!
Head over to your canvas and click on the Form icon in the Top panel. In the dropdown menu, select Form.
With the form element selected, open the Settings on the right-hand side and go to Form. For the type, select Filter and for the source, select the main database named “Cars”.
To design the actual form, click on the Form icon in the top panel and then in the dropdown, select two Input elements, two Select elements, one Input element and a Submit button—in this exact order.
In the Designtab on the right-hand side, you can style each element to your liking (color, spacing, borders, etc.). For this tutorial, we will leave the form exactly as is.
Then in the Settings tab, you can also add a Placeholder name for Input elements—for example, “Car brand”, “Car model”, etc. This makes it clear for the user what they can search for.
You can also let people select choices when filtering.
For this, you need to add the database reference column (e.g. RefYear or RefColor).
Select the first Select element on the canvas (or in the Layer sidebar) and then open the Settings tab on the right-hand side. Now choose the database next to Column.
Repeat this action for the other select element as well.Head over to the Top panel and click on the Square icon at the far left. Then add a Section element, followed by a Grid element.
You now see 2x2 grids on your canvas, but we’d like to have 5 grid items in one row.
In the Layer sidebar, click on the + plus sign next to Grid. This adds one more grid item.
Then in the Design tab on the right, unfold Layout. Set the column number to five and add a gap of three.
In the Layer sidebar, select one of your grid items. From the Top panel, click on the second T icon and select Heading 3. Repeat this process for the remaining four grid itemsThe structure of your grid is now done, but the headings are all static. Time to make these elements dynamic!
Select the main Gridlayer and open the Settings tab on the right. For the Source, select local, followed by Cars. This connects the grid item to the Cars database.
Depending on how many entries there are in your database, you’ll see that the heading items will now repeat itself on the canvas. A maximum of six are shown. In the preview, you’ll see the full number of entries.
For our next step, we’ll assign the right database field to each heading.
Click on the first Grid item in the Layers sidebar. Then open the Settings tab and for the Key, select Name in the dropdown menu. Repeat this process for the other four grid items.
We used this order:
Name
Model
RefYear: Name
RefColor: Name
VIN
For these guidelines, we’ll focus on how to set up filters and search. However, feel free to adjust the design settings and make your grid look great by adding any colors, borders, shadows… you name it!
Finally, let’s add filters so website visitors can filter and search the table (aka grid) we just created.
Select the main Grid layer, and open the Settings tab on the right. You’ll see that there’s a section called Filters.
To add a new filter, click on the +plus sign and select Name.
Then enter the ID name value, or press the round icon and drag it to the element you’d like to use for the filter. To save, click on the blue Add button.
If someone on your website now searches for a brand in this search field, the grid will only show car brand names for that search.
Using the same steps as described above, you can now add filters for the remaining four database fields—so the car model, dropdown options (year and color) and VIN.
Now, select the Submit button, go to the Right-hand side on Settings and give it an ID name, we named ours “Filter”.
We now need to create a workflow, the workflow will make it so when the user clicks on the button it filters through our grid content.
To do so, navigate to the Workflows tab and click on + Create workflow, select Click here to add an event, then choose Elements followed by Clicked, finally select the element ID we named previously.
Click on Click here to add an event once more and select Data followed by Submit form, this will now filter through your collection. Finally, name your Workflow and click on Create workflow.
Ta-daa! Here’s the final result of the filter and search table we created together. You can view your table in action by clicking on Save and then Preview, both in the upper right corner of the canvas.
