Entering and displaying data is easier than ever in Betty Blocks' Back office. Same as with grids, generating a form based on an existing Model does the most of the work for you. Adjusting those forms to tailor to your needs might throw you some oddballs if this is your first time. That's why we set up this article, where the form's settings are explained from a Builder's perspective.

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 on the gear the Edit form modal will pop up. The gear is only visible when in Builder Mode.
​< Close: Closes the current form.
​Form title: By clicking the form title you can pick any property of the object to be displayed as a title.
​Save: Saves the object you are creating. When in Builder Mode the save button also saves the object, not the form layout.

Edit form

Description: Edit the title of the current form layout.
​Width: Displays the width of the form in pixels.
​Disable controls: When you enable this setting the save and delete button will be removed.

A form is built up out of multiple fieldsets. In these fieldsets, you can add components, actions or grids. By default, the form already has 2 pre-made fieldsets. One fieldset for your object, containing input fields for inserting values to the object. And one fieldset containing your record info (when it was created and last updated). There are always 2 empty fieldsets at the top and bottom of the screen that you can use for whatever you like. Removing all components from a fieldset will automatically remove the fieldset.

Fieldset title: Displays the title of the fieldset.
​Gear: When hovering over the fieldset title the gear icon will be shown. By clicking on the gear, the Edit fieldset modal will pop up. When there is a grid inside of the fieldset, the Edit grid modal will pop up, instead. The gear is only visible when in Builder Mode.
​Component: You can drag and drop the component to reorder the form. How the components value is presented depends on the property type.
​Gear: By clicking on the gear icon next to a component the Edit component modal will pop up.
​+ Add component: By clicking on the Add component button the Model browser modal will pop up. Here you can select the property that you want to have a component for.
​+ Add action: By clicking on the add action button the Add button modal will appear.
​+ Add grid: In a new fieldset you can also add a grid, by clicking on the add grid button the Model browser modal will pop up. Here you can select a model to display in the grid. Keep in mind that when creating a grid inside a fieldset there needs to be an Has Many relationship between the models, with the relation configured as a subview on the form. Altering the grid in the subview will also affect the grid in the form.

Edit fieldset

Name: Here you can change the fieldset title of the fieldset you are editing.
​Visibility: With this option, you can set up a filter or an expression to set the visibility of the fieldset. If the object or user meets the conditions the fieldset will be visible.
​Use filter: By clicking this option you will use a filter to set up the visibility, see the Filter reference for more information about filters.
​Use expression: By clicking this option you will use an expression to set up the visibility, in the text field you can write your expression.
​Insert variable (expression): By clicking this button the Variables browser modal will pop up, in this modal you can select properties and variables to insert in your expression.
​Initial folding state: Displays if the fieldset is folded or open when opening the form.
​Save: By clicking this button, the fieldset is saved.

Edit grid

Label: Here you can change the fieldset title of the fieldset you are editing.
​View: Here you can select what property you want to display in the grid.
​Rows viewport: Displays the number of rows that will be visible before a scrollbar will appear.
​Hide when empty: With this setting enabled, the grid will be hidden when there is no content.
​Visibility: With this option, you can set up a filter or an expression to set the visibility of the grid. If the object or user meets the conditions the grid will be visible.
​Use filter: By clicking this option you will use a filter to set up the visibility. See the Filter Reference for more information about filters.
​Use expression: By clicking this option you will use an expression to set up the visibility, in the text field you can write your expression.
​Insert variable (Use expression): By clicking this button the Variables browser modal will pop up, in this modal you can select properties and variables to insert in your expression.
​Delete: By clicking this button, the grid will be deleted.
​Save: By clicking this button, the grid is saved.

Edit component

Kind: Here you can change the type of input field you are using for the component, which kind of input field you can choose is limited to the type of property the input field is for.
​Label: Here you can change the label of the component.
​Visibility: With this option, you can set up a filter or an expression to set the visibility of the component. If the object or user meets the conditions the component will be visible.
​Use filter: By clicking this option you will use a filter to set up the visibility, see the Filter reference for more information about filters.
​Use expression: By clicking this option you will use an expression to set up the visibility, in the text field you can write your expression.
​Insert variable (expression): By clicking this button the Variable browser modal will pop up, in this modal you can select properties and variables to insert in your expression.
​Hide when readonly and blank: This option automatically hides the component when the component is read-only and empty.
​Save record after inplace edit: When a component is set to inplace edit in show state, altering its value will automatically save the whole record.
​Show state: Choose a state in which you want to display your component for the show object form.
​Edit state: Choose a state in which you want to display your component for the edit object form.
​New state: Choose a state in which you want to display your component for the new object form.
​Tooltip text: Here you can add extra information about the component. When the text field is filled in an information icon will appear next to the label. Hovering over this icon will make the tooltip text appear.
​Path: By clicking on the current path the Model browser modal will pop up. Here you can select the property you want to display in the component.
​Remove path: By clicking on the eraser icon you will remove the current path.

Add button

Kind: Here you can choose what kind of button you want to create, you can either choose an action button or a javascript button. The form will be a bit different depending on what option you choose.
​Model action (action): Here you can choose which action you want to execute when clicking on the button. The actions that you can select are the actions that are in the Actions tab, not the actions that you have created for a web page.
​Label: Here you can add the label of the component.
​Caption: Here you can add the text that will be displayed on the button.
​Save record (action): By selecting this option the record that the action will be executed on will be saved before the action executes.
​Confirmation message (action): This message will be displayed when the action has been executed.
​Javascript (javascript): In this text field you can add your own javascript that the button will execute when it has been clicked. Using javascript you can easily get properties from the object’s form by using

This is only available for properties that are present in the form and when the button is located in the form itself (not at the side).
​Visibility: With this option, you can set up a filter or an expression to set the visibility of the component. If the object or user meets the conditions the component will be visible.
​Use filter: By clicking this option you will use a filter to set up the visibility, see the Filter reference for more information about filters.
​Use expression: By clicking this option you will use an expression to set up the visibility, in the text field you can write your expression.
​Insert variable (expression): By clicking this button the Variables browser modal will pop up, in this modal you can select properties and variables to insert in your expression.

Next to fieldsets you can also add subviews to your form, subviews are views that are connected to your object. This way you can easily view, for instance, all products of a company.

Subview: By clicking on the subview you will be redirected to that subview, the number on the right of the subview indicates the amount of objects in that view.
​New object [ + ]: By clicking on the + (plus) icon you can immediately create a new object in that subview. Data from the parent object will automatically be filled in.
​Gear: By clicking on the gear icon next to the subview the Edit subview modal will pop up. The gear is only visible when in Builder Mode.
​+ Add subview: By clicking on the Add subview button the Add subview modal will pop up, this will create a subview for the object. See the Grid reference to learn more about grids.
​+ Add page: By clicking on the Add page button the Add page modal will pop up, this will create a subpage for the object. See the Page reference to learn more about pages.
​Action: By clicking on the action that action will be executed.
​Gear: By clicking on the gear next to the action the Edit button modal will pop up.

Add subview

Association property: Here you can select the relation you want to create a subview for.
​Name: Here you can enter the name for the subview.
​Role: Select which user roles are able to view the subview.
​Use: Select which grid layout you want to use, select - New - if you want a new grid 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 when blank: By selecting this option the subview won’t be shown when there is no data.
​Icon: Select an icon for your subview.
​Visibility: With this option, you can set up a filter or an expression to set the visibility of the component. If the object or user meets the conditions the component will be visible.
​Use filter: By clicking this option you will use a filter to set up the visibility, see the Filter reference for more information about filters.
​Use expression: By clicking this option you will use an expression to set up the visibility, in the text field you can write your expression.
​Insert variable (expression): By clicking this button the Variables browser modal will pop up, in this modal you can select properties and variables to insert in your expression.

Add page

Name: Here you can enter the name for the subpage.
​Role: Select which user roles are able to view the subpage.
​Icon: Select an icon for your subpage.