Displaying data within your pages

Working with page variables, data components, and filtering withing the page builder.

There are two ways to display data on your page using Betty Blocks. You can use data components like Data table, Data list, and List with data. These are super useful in their own way, or you can navigate to the Variables tab in the page builder and use page variables. We'll check out page variables first.

The video below doesn't include page variables yet, keep this in mind:

Page variables

Navigating to the variable tab inside of the page builder will result in the following view:

As you notice there are two tabs within this view.

• Page, which holds page variables that we can create ourselves;

• Input, which holds the input variables of the page.

Understanding how page 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 like this:

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. Hit Create page to create the page, and instantly navigate to the variable tab. Select the input tab and click on New variable in there:

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:

Click on Save to create the variable. You'll now see the input variable in the list of variables. We can use this input variable to create a page variable now.

Page variables

Click on the page tab left of the input tab and click on New variable. We want to display details of our tasks, so make sure that object is selected as 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 of the variable is the task with the id that we specify in the URL.

Click on Save to create the variable, it should appear in the list like this:

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 of 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:

This is just a sneak peek of page variables but you should now have an understanding about what they are and how you can work with them to display data in your pages. Below we'll continue with displaying data but instead use data components.

Data components

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.

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

Filter a model

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.

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

Selecting the output in a child component

Data showed via child components

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:

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.

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 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:

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:

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

Filtering data

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.

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