Skip to main content
Back office grids

This Article will explain the User interface and buttons you see in the Grid view.

Odin van Eijk avatar
Written by Odin van Eijk
Updated over 11 months ago

Ever wondered what all the buttons do in the back office? This article will explain the buttons and where you can use them for. 

First of all, a term you will hear a lot while working with Betty Blocks; the Builder Mode. The builder mode is used for making structural changes in the back office. You can turn it on by clicking the UI Builder button or pressing the "E" key on your keyboard. For more keyboard shortcuts, check this article out.

Below you see a screenshot where some buttons are highlighted and numbered. Those will be explained first.

1. Add new grid

Button 1 is the button to press if you wish to make a new grid. When you press this button, the following pop-up will show:

Model - The model you select here, defines which model the grid is based on. Want to know more about models? take look over here

Name -  The name is by default the same as the model name but is in plural. Customer becomes customers, user become users, etc. The name of the grid is totally up to you. 

Section -  is the name of the group the grid will be placed in. When you type a name that doesn't exist yet, it's created automatically. 

Role -  you can set which roles are able to see the grid. For example you don't want employees to see the payroll information of they colleagues, you can exclude the role employee but include the role manager. More information about roles can be found here

Use - is a setting that defines the structure of the grid. For example; you want to create a different grid of the same model for a different role, you can create different structures here and select which one you're using. 

Default Filter -  Allows you to filter your data by default. For example; only show data where the last name is not empty. The filter you create over here is only used for this grid.

Default selected filter -  allows you to select one of the filters you can created on a grid. How to filter data in a grid is explained here.

Default order - This options allows you to select a property you wish to order by (ascending/descending).

2. Edit main tab

Button 2 is used to edit the main tab of the grid. Here you select the settings you've created at button 1 and apply settings for just this grid. 

The options of this popup are explained at chapter 1. Please see that description for detailed explanation.

3. Edit grid

Button 3 is to edit the settings of the grid. When you press the button, the following screen will pop up and allow you to change any settings for this grid and the forms within. 

Description - is the name of the current settings and will be an option in use in the main settings of the grid which is explained in chapter 1. 

Add form, Edit form and Show form - Are the settings you wish to use for the forms. You can create certain structures of forms like the order and which properties are shown and which not. More information about back office forms can be found here.

Default Filter - Default filter can be used to filter your data by default. In the picture above you can see an example of a default filter. This filter will only show data records which are created after or at Today. This filter will be applied to all grids which use the same settings of use. Use is explained in chapter 1.

Default order -  Allows you to set the default order of the records. This order can be adjusted in the grid at any time but will be reset to this order when you leave the grid and go to a different page.

Hide redundant columns - This option is a bit more advanced. This option is used when viewing child records from a parent record. If the parent record is present within the subview's grid, this option will hide the colomn about the parent record. For example; a grid from the model Person. A person has multiple orders. When you have subview, you'll see another grid with all the orders. If you have a column with a property from the model person in here, it will be shown. But when you turn on hide redundant columns, the column of the person will be hidden.

Autoheight rows - Enables the functionality that automatically increases the height of the row to still be able to show all the data when it the data is longer than fits in the original cel. 

Auto refresh - Automatically refreshes the grid once in couple seconds. note: when you use expression properties, the order of records can adjust. More about expression properties can be found here.

Width - This settings allows you to change the size of grid in pixels.

4. Add new page

This button you allow you to add an endpoint page in your back office. For example you can show graphs and more. Got interested? see this page for more information about iframes.

5. Add new dashboard

This button is a legacy functionality and no longer supported. This still exists due to some older applications still using this functionality. We expect this button will disappear and we recommend using custom endpoints to create your own dashboards.

6. Help

Whenever you are at a screen and you're not really sure on how to progress or what to do here, you can press this button. This button will show an informational video

7. Export

This button can be used to export the data that is shown in the grid to an Excel or CSV. For more information about exporting data you can check out this article.

8. Filter the data

For each view, you can create multiple filters. The filters you create here can be selected in the edit grid and main tab. How to create these filters can be found here.

Searchbar

The search bar can be used to search through your data. When the builder mode is enabled, you can adjust in which columns you can search for your input. The pencil button allowed you to change the property you search in, the "plus all" options allows you to search in all available properties in the grid. The "plus new" prompts the selection to choose the property you wish to search through.

The interface of the back office also contains a hidden button. When you click on your name, you will get to see the options you see in the screenshot above. First of all, this is the place to be if you wish to logout of the platform. Also, if you have the correct user role, you can impersonate as someone else who has access to this application. This can be used for testing purposes to see how the application behaves for different users with different user roles. Also you see the checkbox for 'show advanced options'. This option will give you different extra options. They will be explained in a different article.

This was a the first walkthrough of the user interface and buttons of the grids in the back office. Whenever you have additional questions regarding buttons, feel free to ask us.

Did this answer your question?