Displaying data on your pages

In this article, you’ll learn how to display data using data components (Data table, Data list, List with data, and Data container) and page variables. Using a simple use case — showing the details of a selected task — you’ll see how each approach works, how different data components behave, how to filter data, and how variables help you manage and reuse data within a page.

Variables in Pages

Navigating to Pages > Page resources inside the page builder will result in the following view:

• Input variables are typically used to receive data from outside the page, such as query parameters or values passed into the page (for example, a project's ID). 

• Page variables store data within the scope of the page. These variables can be used anywhere on that page, so you only need a single query to hold data such as the title of a task.

Understanding how these variables work is best explained via a small use case. In this use case, we want to show the details of one of our tasks. This means that a 'Task' model is already present, and we filled that model with some data.

Input variables

With the prerequisites explained above in place, we can create a new page. Notice the last part of the page path is the following: :id. Placing a colon in front of 'id' means that 'id' is now an input variable.

We will not navigate to the page in that literal way, instead of ':id' we will use an actual ID of a task like '3'. This means the URL will look like this: yourappname.betty.app/task/3. 

After the page is created, navigate to Page resources tab. To add a new variable, click the + button.  

The input variable will be named the same as we specified in the URL, in our case this will be 'id', and the variable kind is number:

 

Page variables

Following the same flow, you can now create a page variable from the Page resources menu. We want to display details of a single task, so the Object is selected as the kind.

Name the variable itself something like 'taskObject', and select the model 'Task'. We can now use the input variable that we created previously in the filter; this will ensure that the task object inside the variable is the task with the id that we specify in the URL.

We can now use this variable throughout the page. Meaning that we don't need to add any data components to our page and then select the data we want and need. We can just drag, for example, a Title component and a Text component on our page and use the data of the 'taskObject' to show its data. Let's check out how this works.

Displaying the data of a page variable

Drag a Title component on the page. Inside the content option, you can see a small blue + button. Click on it and select the variable icon. We can select the data inside the 'taskObject' now by clicking on the arrow. For the Title component, we'll select the title of the task:

Now let's do the same for the other properties inside our task model, but let's add a divider and use the Text component instead. This is how the content of my page looks after adding the other properties:

When I compile the page by clicking on the Play button in the top-left corner, it will likely show the following URL:

Make sure to change it to the number of an existing id, in my case, '3':

This will then result in the date being displayed on the page:

You’ve now had a first look at page variables and how to use them to display data on your pages. Next, we’ll keep working with displaying data, but this time by using data components instead.

Data components

Data components such as Data table, Data list, Data container, and List with data connect directly to a selected data model and automatically retrieve and display its records, making the model itself the primary data source for rendering and iterating over data on the page.

Data table and List with data guide you through a setup wizard when dropped onto the canvas, where you select the model and choose which properties to display. Based on that selection, the component generates the visible structure automatically.

Data container and Data list, on the other hand, function more literally as containers. They fetch one or multiple records from a selected model but do not render output on their own. Instead, you place components such as Text or Checkbox inside them and bind those components to model properties to control exactly how the data is presented.

Selecting a model for a data component

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 choose which model the data should be fetched from. Double-click a model, or select it and click the Select button, to apply that model to your data component.

 

Filter a model

If you only want to display a subset of records instead of all of them, you can apply filters to define which data is shown.

Order by

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. To determine 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.

Selecting the output in a child component

Data showed via child components

To actually display records inside data components, you need to add child components to the data container. For example, if you drag a Data list onto the page and select a model, nothing will be rendered yet.

Next, drag a Text component inside that Data list. Through this Text component, you can choose which property from the selected model you want to show.

Data population inside autocomplete and select

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 components

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:

const data = [   
  {     
    id: 1,     
    name: 'Red',   
  },   
  {     
    id: 2,     
    name: 'White',   
  },   
  {     
    id: 3,     
    name: 'Blue',   
  }, 
];

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:

Filtering data

When you don’t want to see all records of a certain model, but just a certain selection, you can use filters. Filter returns only the records that match the conditions you define. For example, if you want to show only the colors whose name starts with an “R,” you should see just “Red.”

When you click the Filter button, a filter modal opens. A filter is made up of three parts: the left value, the comparator in the middle, and the right value.

In our example, where we want to show only colors whose names start with “R,” you would set it up as follows:

• On the left, select the model Color and its property Name

• In the middle, choose one of the available comparators for this property type (a string in this case).

• On the right, enter what you want to compare the property to, in this case, the character 'R'.

When you’re done configuring your filter row, click Apply. You can add multiple filter rows and even groups of rows. That’s why the modal provides both an Apply and a Save button.

If you click Apply and then Cancel, the filter will not be stored. Apply updates the filter only within the current modal, while Save ensures that the filter configuration in the modal is actually stored.

After you click Apply, the filter is shown in a readable format that reflects what you’ve just configured:

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.

Displaying property names (labels) and values

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:

• Select the first text component and go to Options > Content

• Click the Insert data (x) icon and choose Updated at property

• Instead of clicking Select, go for an arrow beside it

• The arrow will open the dropdown where you choose Select property name to display the property name (label 🏷 )

Displaying the value of a property:

• Select another text component and go to Options > Content

• Click the Insert data (x) icon and choose the Updated at property

• Either click on Select, or choose an arrow beside it > Format value options (it is available for this particular property type - Date time) > press Select to display the property's value

Eventually, this is how it looks 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.