Div

Introduction

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

Property	Description
Behavior: On click	This property can be used to indicate what should happen when you click on the Div. There are five options possible: Refresh screen Execute flowchart Button exit - can be used to define an exit, just like how you would do for a Button, to be used in the parent flowchart. Do nothing (default)
Appearance: Style*	Using this property, the Div can be configured to have one of 4 colors, based on the definitions in the CSS of the chosen Design Template for the specific project. The 4 colors are 'fixed', in the sense that they are based on the Design template and therefore cannot be changed in the Template Editor.
Tooltip	Tooltips have already been covered in detail here. Refer that page for further details on this property.

*

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.