How to search for real data in UI Bakery

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.

Food delivery app template in UI Bakery

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

The UI Bakery how-to guide for searching for real data

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.

The UI Bakery how-to guide on working with data

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).

The UI Bakery web apps builder how-to guide on how to use search component
How to work with data in the UI Bakery web app building tool

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:

How to work with the Search component in the UI Bakery low-code development platform

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.

Guide on how to use search components in the UI Bakery web app building tool

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}}.

the UI Bakery documentation on how to work with data when building a web app
How-to guide in the UI Bakery web app builder on how to create web apps

Almost done.

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

How to build your web app without code in the UI Bakery web app builder

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.

How to build a web app with data in the UI Bakery app builder visually

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

How-to guide on creating your web app visually using the UI Bakery web app building tool

How-to step-by-step guide on building a web app with a responsive design in the UI Bakery web app builder

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

How to work with web development components in the UI Bakery web app building tool

Click on the preview button, and see the result!

How to use components for web app development in the UI Bakery app builder

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.