How to populate the Select Component with dynamic data in UI Builder

In this topic, I will share how to populate the Select component with dynamic data. This approach will work for any kind of dynamic data, whether it comes from the database, an external data source, or a collection of data you manage within your application logic. The example I review below works with the database as the data source. Let’s review the page setup.

My page consists of a select component and three input fields marked as read-only. The select component will have a list of countries (coming from the database). When a country is selected in the component, the page will fetch additional information about the country and render it in the input components. Play with the live demo of the app.

Here’s my page layout:

Notice the following detail in the Select component setup:

This is rather important. What it means is that every single item in the select component is represented by two properties: value and label. You can assign your own “names” to these properties if needed, but value and label work for most cases. The label property (or the key to be precise) is used to
display a specific option in the select component. This is what the user will see in the component once the data is rendered. The value key is what will carry the actual value of the selected option. If this is too confusing now, hang on, it will become much clearer once we look into the component initialization below.

Before we go into the logic on the page, here’s the database table we will work with. As you can see it has a collection of countries. The following columns are used in the example:

Back in the UI Builder… my On Page Enter event for the page (the event that is triggered when the page is loaded) has the following logic:

Let’s review it step-by-step:

  1. The first step is to load a collection of Country objects. I use the condition Continent = 'North America' just for the demo purposes, it also helps to keep the number of options fairly low, but it is not critical for the demo:
    UI Builder - ConsoleDemo - Backendless 2022-02-02 17-07-57

  2. Once we have a collection of countries returned by the block shown above, we need to do some filtering of these objects. The filtering block (Map Items in List) is used to transform the collection. If you’re not familiar with list/collection transformation in Codeless, I recommend you watch the List Transformations with Codeless Programming YouTube video.

    What happens here is for every item in the countries collection, we’re given a chance to transform it into something else. The Map Items block works as an iterator. The item variable represents the current item from the input collection. The return connector is responsible to return a “transformed” object. The final result of the Map Items in list block is a complete, transformed collection.

  3. The “transformation” logic is below:

    What we do here is for every item (which is a Country object) we create a new object that has the label and value properties (see the properties in the Create Object block?). The reason these properties are value and label is not a coincidence. In here we’re using the “keys” that the Select block was configured with (we talked about it at the beginning of this article). The label property gets the Name of a Country - this is what the Select block will display. The value property gets the Country’s objectId value.

  4. Finally, once the transformation is completed, and we have a collection of objects in a format that is “friendly” for the Select component, we assign that collection as options for the select component:

As a result of this logic, the Select component can now render the data.

Let’s take a look at the logic of selecting an option in the Select component. Click the Select component and switch to its logic screen:

You will see the Select component has the On Change Event. This is the logic I put in there:

The Changed Value context block (the one in the horizontal bar above the logic) contains the value assigned to the selected option. That is the value we assigned here in the page loading logic:

So we know it will be objectId of the selected country. Knowing the objectId value, we can retrieve the country, which is what we’re doing in the Select’s On Change Event. The selected country object is then placed into Page Data with the property of selectedCountry:
UI Builder - ConsoleDemo - Backendless 2022-02-02 17-35-49

The rest (displaying the values in the input fields) is the magic of data binding in UI Builder. Here’s how I set up the input fields:
UI Builder - ConsoleDemo - Backendless 2022-02-02 17-36-48
And then configure the property the Value Logic data binding property:
UI Builder - ConsoleDemo - Backendless 2022-02-02 17-37-21
where selectedCountry is the name of the property we put into Page Data above and Population is the property in the Country object (the property name maps to the column name).

Hope it all makes sense. if not, post a comment.

Happy Codeless Coding.



In case anyone else gets stymied by finding the more obscure blocks, they are found here:

“Set Options to Select” I believe needs to be searched for, as it doesn’t seem to be in the menu area. It’s designator in the search field is: ”ui_system_component__select__set_options”

“Load Table Objects” and “Get Object by ID” are found under “Data API”.
The others are more obvious:
“Create Object” and “Get Property” are in “Objects”
“Map Items to List” is in “Lists”

I’m following this example and the error is

“Cannot set properties of undefined (setting ‘options’)”

Step by step to check the object a looks OK…

Screen Shot 2022-06-15 at 22.16.23

This is the error:

Screen Shot 2022-06-15 at 22.16.41

Thanks, Mario

1 Like

The error indicates that the logic was setting the options property. The logic you shared doesn’t reference that property name anywhere. It means the error is coming from somewhere else.

1 Like

Hi Mario,
Did you find the solution to the "Cannot set properties of undefined (setting ‘options’)?
I’m getting the same error.
Paul - Backendless user

Yes, my problem was using “Visibility” in a block where I used the “Select”.

Now it’s not my ideal look of the page but it’s working without using the “Toggle Component Visibility”.

Thanks, Mario

What is the proposed approach if I have 100.000 entries? I am thinking more about a smart select field that already filters the content while typing the first letters and does only show a limited number of selectable solutions. Any idea how to realize this with backendless?

Imagine the pain of scrolling through 10,000 entries. In this case I would use a text field with auto-suggest.


1 Like

sounds right to me. I will try to work on such a component.


I was able to make this work using the instructions above. Additionally, I want to add a feature that fills the most previous entry that the user made when the page is reloaded even after logout. This way the entry is always the same until the user changes it.

Right now the current selection value gets saved into a column in the user data table as noted in the screenshots below.

I was able to add logic that updates the value in the user data, similar to updating a password or other profile demographic:

Therefore, the intention is, upon page enter it would check the value from user data and populate the select component depending on the value. This is the logic I used to make that happen:

The issue I’m finding in preview: When I change the “company” (my select dropdown options), then go to a different page and return, the wrong (previous) value is presented. The odd thing is that when I refresh the browser, it uses the correct value as written in the user data. Is there something I’m missing as to why it’s not using the value from the user data until browser refresh? Do I need to add something to the logic? I Intend to use this as a template for every page in the app so I don’t want the user to have to select from the drop down (or refresh the page) everytime they navigate between pages, it should just load the value from the user data.

When I change the “company” the backend user value is correctly updated in real time as intended by the logic at the top of this post.

Would this be a local storage or cache issue? I wouldn’t think so because I’ve never used either anywhere in the app but I could be wrong.



Enable “reload” option on Get current user block. If it does not help - create a new support topic with minimal reproducible example.

Regards, Dima.

1 Like

Works perfect with that change.

Thank you Dima

Hey Mark, could you or another team member comment briefly (perhaps with a screenshot) on how to populate the drop down with the distinct values from a field in a related table? I know I’ll set distinct = true and then I suspect I’ll need to either set relations depth or call out the specific field I want in the ‘relations’ property. Then I’ll set the label equal to that specific field as well?

When I attempt the solution by either setting a relations depth or specifying a relation I get a Minified React error when I click on the select to render the drop down:

Hi, @James_Hereford

The item variable in your screenshot includes columns from facility table. So to get columns from related table you need first get the column that references this table.

Try the following block in the return section, replacing “city” with a column name that references the related table (unless it is “city”).