How to search for real data in UI Bakery

In this how-to, let's use a ready-made food delivery web app template available in UI Bakery for free.

Go to UI bakery, create a project, and select the needed template from the list.

Now, go to the Personal page to see your products.

Now, you need to enable a Search component to work with the real data.

But firstly, open the Data tool, and find the "loadproduces" action there. Add one more step – "Save Data to App State" – inside this action, right after the existing "Save Data to App State" step.

Now, you have a variable "dataToDisplay1" with the type – "array".

Do the same with the 2 other actions: "loadsnacks", "loadMeatFish". Don't forget to create 2 new variables in each step – "dataToDisplay" and "dataToDisplay2" (these variables should also have the "array" type).

Now, you need to create a new action called "search". It will include 4 steps.

The first is a Code step. Use this code snippet:

‍

The 3 remaining steps should be "Save Data to App State" steps.

Create a "Save Data to App State" step, add ".produces" to {{data}} in the "Value" field so that you'll get a result: {{data.produces}}.

Select the "dataToDisplay1" variable.

Repeat the previous action 2 more times. Don't forget to use the other 2 variables: "dataToDisplay" and "dataToDisplay2". Change the data inside the "Value" field for {{data.snacks}} and {{data.meat}}.

Almost done.

Now, open the Builder, select "Personal page", and find the spaces with the products.

Click on the space that contains a tomato image, and go to its data settings. Find the "Sequence variable" field there, and use the {{dataToDisplay1}} variable.

Add the {{dataToDisplay}} and {{dataToDisplay2}} variables to the other 2 spaces containing the images of snacks and meat.

‍

Set the "search" action in the "On Enter" field for the input component.

Click on the preview button, and see the result!