Using data components, you can present information from one or more models in the table or list formats. This section includes:
List with data
Data components can be found within the list of components in the page builder.
You can drag and drop the various data components for presenting information from one or more models.
A set of these components enables you to present information or a list and filter and combine information from your data sources.
The data container component is used to display details and items within one record. For instance, it can be applied when you need to create a detail page to display the contents of one record from the data table. As the data container gets added, you will have to configure it by choosing where the data will be coming from (another page, this page, or a logged-in user) and selecting the model.
You can drag components yourself inside a data list to form what you need. It's blank but you can fill it out yourself, can display data any way you like.
Used for basically the same use cases, the list with data shows columns that need to be defined before being dropped to the canvas.
The data table has columns and rows that contain specific values taken from a particular model. After you've selected a model, you are able to select the columns to be displayed within your table. Sometimes you'll have to add a data table column in case it's required to extend a table for some more items.
Use the detail view component to create a detail view page easily. After selecting a model and number of columns, drop a data container and select the filter path ID to assign a number to each separate detail page in your application. When you need to extend your detail view page, employ the detail view child and select the additional property you would like to be displayed.
The filter component is used with a data list or data table to enable an easy way to look through your data more specifically by finding and filtering the needed items. This feature will come in handy for those who deal with a large number of products in a list.
Displaying data from models
You can use the various data components to create lists or tables based on data from one or more models in your data model. Configure the details of the properties you want to present either during the dialog when creating the data element, or using the options tab.
Where a data component consists of one or more nested components, you can use the component tree (A) tab to display details.
As shown in this example, the DataTable (B) component includes two data tab column components. When you hover over the row, the additional (...) menu is displayed.
Select the Options (C) menu item to open the options settings menu for the nested column component.
As you add components to your page, you may want to change something without deleting and starting from scratch. There are a few options for these cases: reconfiguring and adding a child column.
Add Column options are added to the following list of UI components that belong to the Betty Blocks default no-code toolkit:
The reconfigure option shows an overview of all 'direct children' available inside an existing component on the canvas. In this example, we have a data table with five columns. These five columns are the direct children of the data table.
When you press the
'Reconfigure' button on the top of the data table's options menu, the reconfigure menu will appear. Employing it, you are able to do basic CRUD operations instead of knowing your entire way out in the page builder's sidebar, which components to click on, and what options to select, this Reconfigure option is more straightforward in terms of UX. For the data table, this means:
Create new columns for the data table
Read the available columns present already
The ordering of columns (the indexing).
Options of an existing column.
Delete columns from the data table
Currently, the scope of this overview only consists of the read and delete parts with updating on its way soon, as well as the creation of a new child from this overview. However, creating a new child (new column to the data table) is already available as a singular option in the component sidebar.
Add child column
The adding child option is meant to create a new component inside of an already existing one on the canvas. In our example, we took the data table. The direct child structure of a data table is its columns. And that is exactly what you are able to add when using this option.
Setting permissions for a model
You need to ensure that the Read permission for a model is set to 'Allowed' where you want to display data defined in the user interface of your application.
You can access the permissions settings for a model from the Permissions tab in the Data model module.
See What are model permissions? for more details.