Div

A Div creates a simple container on the user interaction screen with a color. You can add text or other elements and optionally add an OnClick action. The Div can also be provided with a tooltip.

Properties

*

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.

A practical application of Div is in building a Kanban board, where you can have 4 different colored Div elements as sticky notes on the Kanban board, the colors representing different status. You can add text from various data fields into the Div.

Illustrations

This illustration makes use of Label. Refer the linked page if you would like to learn more about these widgets.

In the overlay window that we had created in the EMS use case from the last topic, Adaptive Columns, let's now try to use Div to put the profile pic within a container.

1. In the Template Editor, click on the 'Div' icon, drag and drop it on the canvas at the place where you would like to insert it. In our example, we want the profile pic within a Div. So, insert the Div above or below the Label that contains the profile pic.

2. This inserts a Div of default Style = 1 (Read the 'Properties' section above for more information on this). Move the Label corresponding to the profile pic inside the Div. You can change the Style as needed. Save the Template Editor and Preview.

Note that the Div's color is different at Runtime than what is used on the modeler. Refer the 'Properties' section above to understand the reason behind this.

Last updated