How to load data in Select components in UI Bakery

From this guide, you'll see how to work with the data you need to load in Select components in the UI Bakery app builder.

Let's figure out how to load your data in the Select components.

Open the Data tool in UI Bakery, create an action named "loaddata" consisting of 2 steps: HTTP GET method request and Save Data to App State. Use it as an example: https://example-data.draftbit.com/todo_lists?_sort=id&_order=desc

Use custom code in the "Save Data to App State" step to map the incoming data into the data format. Use this code snippet: 

{{result.data}}.map(item => ({ label: item.name, value: item.name }))

Don't forget to create a variable of a "string" type, and name it "select".

Open the UI Bakery Builder, add a Select component by clicking on a grey plus to call for a Component picker.

Click on the added Select component, find the "Options" field in the general settings on the sidebar, and click on {{ }}.

Delete the hardcoded data from the "Options" field, and add the "select" variable created earlier.

Set the "loaddata" action. We recommend to set this action as "On Init" in the root space.

That's it! Click on the preview button to see the result.

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.