Layout

Adaptive Columns

You can organize your user interaction screens by adding adaptive columns. Drag and drop the adaptive columns widget into the user interaction template. By default a frame with 2 columns is created. Hoover over a column, a blue plus tag appears. Click to add a column.
The adaptiveness of responsiveness of your column is customizable for different screen sizes. You can change properties to customize:
  • xs (extra small): for mobile screen sizes.
  • sm (small): for tablet screen sizes
  • md (medium): for regular desktop screens
  • lg (large): for desktops with large screens
  • Invisible: you can make a column invisible by clicking on the eye icon
Rendering of columns is based on Bootstrap and always tries to left align columns.

Div

A Basic Div creates a simple block on the user interaction screen with a bootstrap color (4 context colors based on the Master Template). You can add text or other elements and create a On click action. The Div can also be given a toottip with a custom text, with 2 different rendering options as shown before.

Panel

The panel creates a block panel with an optional header and/or footer. You can add elements (such as rich text or graphics) to a panel.
  • Show collapse button: show a small arrow to fold or unfold the block panel’s body depending on the condition (see "Body is expanded when").
    • Body is expanded when:(shown when collapse button is enabled) when a expression is entered, the body will be expanded when the condition is true. When the condition is false the block panel remains unfold. When no condition is entered then the block panel will remain unfold (without a small arrow).
  • Style context: bootstrap context color for the header
  • Show header: Toggle to enable or disable the header. This is the blue bar in the block panel picture.
  • Show footer: here you can add a footer to your panel.
  • Smart margin: If you place a datagrid in a block panel and turn on Smart margin, the panel will remove additional whitespace around a datagrid.
  • Body height (pixels): 0 (implicit) will adjusts the body height depending on the height of the inserted elements (dynamic). A value other then 0 will force the height to the given number of pixels.

Alert

Similar to Panels but without header and footer, Alerts are mainly used combined with conditionals to show an alert message. You can add an icon (predefined position) and select 4 bootstrap context colors.

Table

The table is mainly used to maintain backwards compatibility. In the early days of HTML a table is (mis)used to manage lay-out a HTML-page. We now advise to use Adaptive columns. You can add columns but also rows to a table.

Image

You can also add images to your canvas. Like the other widget drag it to the location where you want a picture displayed. Images can be placed on most locations on a canvas and inside components. When you drop the image icon a window will pop up where you can select the images you want to display, you can choose between images that are added to this project in the files tab.

Icon

The icon widget lets you add icons to text fields or labels. Select the icon widget and drag it to your canvas to a location where a green line appears, this means you can place a icon there. When you add an icon a menu pops up with the different icons available in the modeler where you can choose the icon you want.

Label

You can add a label to the user interaction screen. You can use any expression within a label using the expression editor. This means you can show plain text by using the "quotes" but also use a expression to show a non static text. When a label is added to the template a expression editor appears, this is where you insert the body of the label. When a label is added you can change a few of its properties.
The When empty property lets you change what the labels shows when its content is empty. This is useful if you have a label of a field from the database. When the field is empty you can have a custom text to show instead.
The appearance properties changes the way a user will see the label. This setting can be used to give the label a bit of extra functionality. You can choose between text, a hyperlink, an email or as HTML formatted text. When a user clicks the link you start a mail to that email adress, and the hyperlink option will send you to the link. The different settings will look like this:
1.Text 2. Hyperlink 3. Email 4. HTML
1.Text 2. Hyperlink 3. Email 4. HTML