From this guide, you'll learn how to use a Search component to look for the real data in the UI Bakery web app builder.
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!