.svg)
Chapter 11 - Course – Displaying Data with DataGrid and First Formula
In this lesson, we will learn how to display our database content inside a DataGrid component, adjust the layout so it looks clean, and create our very first Formula to add business logic to the page.
Step 1 - isplaying data in a DataGrid
Drag and drop a DataGrid component into your page.
Click on it to open the settings, then select Configure. Here, choose the database table you want to display and confirm.
When you switch to Preview, you will now see the data from your table directly displayed inside the DataGrid. If your table includes images, you may notice that they look very large and distort the layout.
Step 2 -Fixing image size inside the table
To solve this, go back to Edit mode, open the DataGrid settings, and click on the A button on the right to switch to Advanced Settings.
Scroll to the bottom and locate the toggle called:
“Autosize Columns Width to the content of the cells, potentially enabling horizontal scrolling.”
Disable this option. Once validated, your images will now be resized automatically to fit neatly into the DataGrid without overflowing.
Step 3 - Creating your first Formula
Now let’s add some business logic.
Go to the Actions category in the sidebar, and drag and drop a Formula component into the Formulas tab of your project.
Inside the formula editor, we are going to reference the Mood Score column from our DataGrid (Grid1). Because this column has a space in its name, we need to write it exactly as:
fields["grid1"]["Mood Score"]["value"]
This will return the mood score of the row currently selected in the table.
Step 4 - Displaying the formula result
To show the result to the user, drag a Description component into the page.
Open its settings, and in the value field drag and drop the Formula you just created.
Go back to Preview mode. Now, when you select a row in the DataGrid, the description below will dynamically display the mood score value thanks to your formula.
With these steps, you have learned:
- How to connect a DataGrid to your database,
- How to fix image sizes with advanced settings,
- How to create and use your first Formula to display dynamic data.
In the next course, we’ll expand this logic to build more advanced formulas that can react to conditions, combine multiple fields, and display calculated results.
.svg)