Data is being fetched by a couple of our components which can be found in the sidebar.

The components data table, data list, and list with data are container components. Those are meant to fetch 1 or more records and show the output in components that are dragged into these containers. The containers themselves don’t show any output.

The components auto-complete and select are dropdowns that can be populated by data.

The component data container is a container component for fetching one single record. The output is shown in components that are dragged inside this data container.

When a data component is selected you will find the model option in the sidebar.

Pressing the button Select model will open up the model browser where you can find all models available in your application:

Here you can select from which model the data should be fetched. Double-click or select and press the select button will apply this model to your data component.

In case you don’t want all records to be in the output but a selection, you can use filters to determine the data to be shown.

See Filtering data for more information about filtering.

By default, records are ordered by their ID. In some cases, you’d like to order your records based on another property. This can be done both ascending and descending. For determining the order of the records you can use the order by option.

Unless you have selected a model, this option is disabled.

When you do have a model selected, this option will show the properties of that selected model:

First, you will see the model. You can navigate to the properties of that model by pressing the arrow button.

Then select a property by double click or single-click followed by the Select property button.

In order to actually see the output of the records, you will need to drag some components into the data container components. For example, when we drag a data list on our page and select a model, nothing will happen (at least not visible) right away.

We have to drag a text component inside that data list for example. Via this text component, we offer an option with which you can select a certain property of the chosen model.

Let’s say we have a list of users and we want to show the email addresses of those users.

We can then drag a data list component and select the model 'User' with our model option as shown before in the order by paragraph. Now we drag a text component inside this data list. What a data list component will do is it will repeat its content for every record that is fetched by selecting the model.

This text component now ‘knows' that it is the context of a data component. And therefore you will be able to select properties from the model that is selected in the data list. Also, to show you that this text component 'knows’ about this data context, you will see a purple color when the text component is selected. When you select a text component outside of a data context, the color will be blue. Which is the default.

To select one or more properties to show in this text component we can select them by pressing the purple (x) which shows the property/variable browser in the content component option:

Pressing that button will show the browser:

You see the 'User' model that we used above and when you click on this model its properties will be shown in this case, we will select the email address:

When we press Select, the property will be shown in the content option like this:

And our component on the canvas will also show that we have chosen a property by showing this:

Now when we press Play to see our actual result, we will see something like this:

In this case, there was only 1 user and the email address is documentation@bettyblocks.com.

An exception is data that is shown in a dropdown. It shows the data without components being dragged in. This is the case for the auto complete and select component.

For these components, you need to select a model, a property for showing the option label, and a property to show the option value. This means that you will see the label, but you are actually selecting a certain value that might be different from the label. Labels are meant to make clear what this data is about. For example, when you have a list of colors, this can be a dataset like the following:

This will lead to the following select component:

You see the name of the color, but you will actually select the ID. Or at least, that is a possibility. You can also choose the same property for both the label and dropdown when that suits your case.

Selecting the properties for label and value looks like this:

In the example above you can also see the usage of the order by option. In this case it’s ordered by ID (which is the default, so actually setting this is not necessary).

When you don’t want to see all records of a certain model, but just a certain selection, you can use filters.

A filter will return records that match your filter only. For example, you can return the colors from above whose name starts with an R. In that case, you should only see Red.

Let’s see what that would look like. When we press the Filter button, the filter modal pops up:

A filter consists of 3 parts, the left-hand side, the comparator in the middle, and the right-hand side.

For our example where we want to show the colors whose names start with an R we would do the following:

On the left, we would select the model 'Colors' and then it's property Name:

Then in the middle, we have a list of comparators that are suitable for this kind of property (which is a string in this case).

And on the right side, we select what we want this property to be compared to, so in this case, just the character R:

Don’t forget to press Apply when you are done with your filter row. You can have multiple filter rows as well as groups of rows. So that is why we have both an Apply and a Save button. When you have pressed Apply, but after that pressed Cancel, there will be no filter stored. So Apply means “change it in the current modal”. Save means “what we see in the modal is actually stored”.

After pressing Apply, the filter looks like this, a readable version of what we edited earlier:

Now we can press Save and the filter will be applied to our runtime page. We will now only see the color with the name Red. Because it is the only color of which a name starts with an R.

The filter option will now show Update filter instead of Create filter:

It means you have one or more filters applied here, which you can change or remove by pressing this button. The modal will then re-appear and you can alter the filter as much as you like.

Another important thing to mention about displaying your data in the page builder is that you can choose to either show a property's name or its value. Let's look at how it is done with a simple example.

First, we drop a data container onto a page and select the needed model ('Task' in our case). Now we will take an Updated at property and add a few text components to display the name (label) and its value.

Choosing to display the name (label) property:

Displaying the value of a property:

Eventually, this is how it looks like in the compiled front end:

This kind of application will be useful while creating and working with questionnaires. You can create a question and use the label as the actual question, so the answer can be saved in a value.