Warning!
You’re now reading a legacy document. The features described below are only usable within the classic generation environment. Currently, Betty Blocks offers a new page template that can be used as your application's back office.
Displaying data from your application is done super easily in Betty Blocks. The standard Back Office interface allows you to easily generate views that show your models objects. Those views are called Grids. In this article, all settings within grids are explained.
Grid overview (Builder Mode)
To build or customize a grid you'll need to be in the builder mode, press 'E' on your keyboard or click on the wrench toggle to enter this mode.
Navigator
Gear: By clicking the gear, the Grid Settings modal will pop up.
New: By clicking on this button the Add New record form will appear on the right side of the screen.
Import: By clicking on this button the Import modal will pop up. More about this modal and its features can be found in this article: Import reference
Grid title: Displays the name of the grid. You can edit this title by clicking on it.
Layout title: Displays the name of the layout. The layout of a grid saves the order in which properties are shown. The layout title is only visible when in Builder Mode (E). You can edit this title by clicking on it. When editing the layout title it will also change on all the other grids that are using the same layout.
Sum[ ∑ ]: By clicking on the sum logo, the sum tab unfolds. In the sum tab, the grid will calculate the total value of all numbers or prices within a column.
Export: By clicking the button, the Compose export modal will appear to compose an export in two types of format Excel, CSV file. When there are saved exports in the project you can also choose from these. In this tab, you can also edit a saved export by clicking on the pen icon and deleting a saved export by clicking on the bin icon. More about the Compose export modal and its features can be found in this article: Export reference
Filter: By clicking the button, the filter menu unfolds/folds.
Searchbar: When your grid contains a lot of data, you may want to search for a specific record. By searching on the values of specific properties, you can narrow down the results shown.
Grid settings
Description: Edit the description of the current grid form.
Add form: Choose a form layout that you want to use for the new object form. Select - New -
if you want to create a new form layout.
Edit form: Choose a form layout that you want to use for the edit object form.Select - New -
if you want to create a new form layout.
Show form: Choose a form layout that you want to use for the show object form.Select - New -
if you want to create a new form layout.
Default filter: Apply a filter that affects the displayed data, at all times. When a grid filter is (de)selected, this filter remains active.
Default selected filter: Select one of the custom-made filters, that was created in the grid view.
Default order: Adding order rules that affect displayed data by ascending or descending the order. Evaluated in the order they’re added.
Hide redundant columns: By selecting this option, columns that show the same data or are empty will be automatically hidden.
Auto height rows: With this setting enabled, the height of the grid rows will automatically adjust to the correct height needed to show the data
Auto refresh: By selecting the auto refresh option, the data in the grid will automatically be updated when a value in one of its records is updated.
Width: Displays the width of the grid in pixels.
Save: By clicking this button, the grid is saved.
Delete: By clicking this button, the specific grid will be deleted.
Grid Filter
Filter selection: Select a specific filter or select all filters.
Edit filter: By clicking this button the filter tab will expand, a form will be visible where you can edit a filter. This button is only visible when currently using a filter.
New filter: By clicking this button the filter tab will expand, a form will be visible where you can add a new filter.
Property selection: Here you can select the property you want to apply the filter to.
Condition selection: Here you can select the condition you want to use on the selected property.
Criteria: Fill in the criteria that the filter has to meet, you can use a number or text depending on the property you are using.
Variable browser: By clicking this button, the Variable browser modal will pop up where you can select a variable for your criteria.
Add condition row: By clicking this button, a new condition row will appear where you can create another condition for your filter.
Preview: By clicking this button, a preview of the outcome for your filter will be created in the grid.
Delete: By clicking this button, you will remove the filter you are editing. This button is only visible when you are editing a filter.
Display options: With these radio buttons you can select for who the filter that you are creating will be visible.
Filter name: Here you can create a name for your filter.
Save: By clicking this button, you will save the filter you are creating/editing.
Save as: By clicking this button, you will save the filter you are editing as a copy. This button is only visible when you are editing a filter.
Grid content (Builder Mode)
Column header: The column header of the grid displays the name of the property in that column. You can drag and drop these headers to change the order in which the properties will be displayed, this function is only possible while in Builder Mode (E). The order will be saved to the grid layout.
Select all: By clicking on the checkbox in the header you will select all rows of the grid, this way you can perform an action on all objects of a model.
Gear: By clicking on the gear the Edit column modal will pop up, the gear is only visible when in Builder Mode (E).
Order [ ▲/▼ ]: When you click on the order button the grid will automatically sort on the property that you selected. The sorting will be ascending [ ▲ ] or descending [ ▼ ] depending on the positioning of the arrowhead.
Add property [ + ]: By clicking the plus icon after the last column, the Model browser modal will pop up. Here you will be able to select properties to display in the grid.
Row: A row shows the data of an object, by clicking on the row the Show data form will appear on the right side.
Select: By clicking on the checkbox in a row you will select that row, this way you can perform an action on one or multiple objects.
Edit column
Label: Here you can add the display name for the column you are editing.
Path: By clicking on the current path the Model browser modal will pop up. In here you can select the property you want to display in the column.
Remove path: By clicking on the eraser icon you will remove the current path.
Allow order: Unchecking the Allow order checkbox will remove the order icon on the column. This way the column you are editing cannot be sorted.
Delete: By clicking on the delete button you will remove the column you are currently editing.
Save: By clicking on the save button you will save the column you are currently editing.
Footer
Action selector: In the Action selector you can select a batch action to execute on your selected rows. The action that you can select is the actions that are in the Actions tab, not the actions that you have created for a web page.
Execute: Press the execute button to execute the selected action.
Refresh: By clicking “Refresh” or pressing “r” on your keyboard, your data will be updated, if recently altered.