Links

Layout

Layout elements are:
  • Adaptive Columns (to manage responsive placement of contained elements);
  • Div (a basic container with a color);
  • Panel (container with title, body and footer, collapsible);
  • Alert (container with color and optionally an icon to show information or error messages);
  • Table (to create a table with multiple rows and columns, flat style or advanced bootstrap style);
  • Image (select an image file from the Library and set some display options);
  • Icon (needs to be placed inside a Rich Text element - select an icon from the collection);
  • Label (to show the result of an expression or a datafield as text or with specific other options).

Adaptive Columns

You can organize your user interaction screens by adding adaptive columns. Drag and drop the adaptive columns element 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 container on the user interaction screen with a color (4 colors based on the definitions in the CSS of the chosen Design Template). You can add text or other elements and optionally add an OnClick action. The Div can also be provided with a tooltip.
The color as shown in the Modeler Template Editor will NOT be the same when it is rendered in the Runtime (preview/staging/live). In Runtime, the Div will be rendered using the color-definition from the chosen Design Template on the specific portal; within the Modeler the Div will use the fixed pre-defined colors as defined in the Modeler CSS.

Panel

The panel creates a container with a Body and optional Header and Footer containers. You can add other elements (such as rich text or graphics) to any of these containers.
  • 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 and the outline of the panel.
  • Show header: Toggle to show or hide the header container. This is the blue bar with the Block Panel title in the picture and is active by default.
  • Show footer: Toggle to show or hide the footer container. The footer is hidden by default.
  • Smart margin: If you place a datagrid in the body of the panel and turn on Smart margin, the panel will remove additional whitespace around the 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

An Alert Container is a basic container with one of the predefined Contexts (success, information, warning or error) to show information with that specific context. You can add an icon that is displayed in a predefined position (top-left within the container), and select one of the 4 bootstrap context colors. Within the container you can add any of the other Template Elements.
Optionally you can show a Close button which allows the user to hide the Alert container.

Table

The Table element can be used to create Rows and Columns to display other elements in grid-formation with a fixed number of columns and rows that you can add:
insert a column at the indicated location
insert a row at the indicated location
The Table container has 2 main display modes: Default (flat, basic and tight - useful to help position and align other elements) or Bootstrap (advanced, more options to set and usually needs more space).
You can set the Width of the table, which is default 100% (using all available space of the parent container in which the table is placed).
In the Default mode you can set the Style to show no border (default) or show borders around the cells (if so supported by the CSS definition in the selected Design Template - that may override this choice and still show no borders). You can also set the Cell Padding (space between the cell-borders and the contents within the cell).
In the Bootstrap mode, you can set a few more options:
  • Bordered: if supported by the CSS definition in the Design Template, the table will show borders around the cells;
  • Condensed: will use less whitespace around the table and within the cells, making the element a bit tighter (condensed). By default, a bootstrap-table uses quite some whitespace to nicely place all contents clear and separate.
  • First column as header: will show all items in the first column as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template);
  • First row as header: will show all items in the first row as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template);
  • Hoverable rows: this option will support highlighting (changing the background color) when hovering over the row;
  • Striped: will show all rows with switching background, like a zebra striping (usually clear and light grey background - depending on the chosen Design Template).
  • Responsiveness:
    • Stretch: try to fill the available space optimally, do not show scrollbars within the table;
    • Scrollbar: if columns and content need more space than is available, a horizontal scrollbar will be used at the bottom of the table;
    • Column Break: this option should be used carefully: it tries to break rows and put columns on a next line if space is limited - but this usually yields unexpected and not so pretty results...
The funny thing with this Table element is, that when you change to Bootstrap, then set the First Column as Header or First Row as Header to true, and then change back to Default - the table will still be showing the First Column or Row as Headers - you just need to know to switch to Bootstrap to set the options if you want this option for the basic Default table display... ;-)
Within the Table, you have Rows and Cells that also each have their own options to play with.

Row options:

  • Height: you can set a specific height in numeric pixel values;
  • Visible When: you can use an expression to decide whether to show or hide the specific row.

Cell options:

  • Width: you can set a specific width in numeric pixel values;
  • Horizontal align: choose Left, Center, Justify or Right;
  • Vertical align: choose Top, Middle or Bottom;
  • If Table is set to Bootstrap, you can set a Style Context on a cell;
  • Enable Tooltip: allows you to set a tooltip on the whole cell area;
  • Column - Visible When: you can use an expression to decide whether to show or hide the specific row.

Image

Use the Image element to show an Image from your Files Library on the page. When you drop the Image element onto the canvas, a window will pop up to select the image from the library that you want to display. If the Image is not yet available, you can do right-click on a folder in the Library to create and upload a new Image, which you can then select.
An Image element has following properties to set:
  • Alt Text: the text to show when hovering over the image and which will be displayed if a user has turned off all images in the browser.
  • Appearance - Rendering:
    • Default will show the image in its original form;
    • Circle will show the image within a circle-formed frame;
    • Rounded will show the image with slightly rounded corners;
    • Thumbnail will show the image within a bordered frame-outline that has rounded corners.
  • Appearance - Responsive:
    • off: use original image dimensions or the indicated height and width values;
    • on: use the available space from the container in which the image element is placed and automatically resize to fit (responsively).
  • Appearance - Alignment:
    • Default: no specific alignment set, use the default (browser or custom definition from Design Template);
    • Left: align image element left of the container and enable other elements to float to the right of the image;
    • Center: put image in the center of the container;
    • Right: align image element to the right of the container and enable other elements to float to the left of the image;
  • Appearance - Width: only available when Responsive is off, provide a numeric value to use as specific width in pixels; leave empty for implicit (will use original width or the relative width corresponding to the set Height value).
  • Appearance - Height: only available when Responsive is off, provide a numeric value to use as specific height in pixels; leave empty for implicit (will use original height or the relative height corresponding to the set Width value).

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. It can not be dropped directly onto the canvas but needs to be within at least an "active" element (like a Rich Text element).
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. Then you can set a color along the available Context options, and optionally set a Size (in numeric value for Pixels).

Label

When you add a label to the canvas, you can add an expression or a field from the datamodel. You can use any expression within a label using the expression editor and the result will be displayed as Text (by default). 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 expression that will yield the result to display as label. When a label is added you can change its properties - based on the resulting type of the expression, the available properties will vary!
The When empty property lets you set a value to show when the Expression returns an empty value.
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.
For an expression that yields a (plain) text-value, you can choose between text, a hyperlink, an email or as HTML formatted text. When hyperlink or email is chosen, the label will be displayed as clickable link and will perform the approproate action (try to open the link in the browser or start the email program to create a new message with the value from the label as To: recipient).
The different settings for a Text-label could look like this:
1.Text 2. Hyperlink 3. Email 4. HTML
1.Text 2. Hyperlink 3. Email 4. HTML
Based on the resulting type of the expression, the display options may vary:
  • Text as described above;
  • Boolean/YesNo: no other display options;
  • Single/Multi Select (concepts): no other display options;
  • Date/Time/Duration: you can set a display format, how to show the value according to specified format;
  • Entity/Reference: no other display options;
  • File: display as hyperlink (shows a link to click and download the file - additionally set the display text or leave empty to show the filename) or as image (only useful when file is indeed an image - additionally select rendering options as described at the image element);
  • Number: set a numeric format, set the number of decimals to show (default none).
  • Rich Text: display as Text or as HTML. When the rich text value contains formatting, set the display to HTML to allow that formatting to be displayed. Default display is set to Text which will show the Rich Text as Plain Text...
Finally, the Prefix and Postfix options allow you to add text (plain text - either with a fixed value or more dynamic by using an expression) that will be added directly before or after the label itself. Not available for File labels.