Introduction

Adaptive columns allow you to organize elements in your user interaction screen. And, if needed, you could even use them to organize the screen layout in different ways depending on the screen sizes.

The adaptiveness or responsiveness of your column is customizable for different screen sizes. You can change properties to customize:

• xs (extra small): for mobile screen sizes (screens less than 768px wide)

• sm (small): for tablet screen sizes (screens equal to or greater than 768px wide)

• md (medium): for small laptops (screens equal to or greater than 992px wide)

• lg (large): for laptops and desktops (screens equal to or greater than 1200px wide)

• 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.

Properties

Illustrations

Sample Use Case

The Employee Management System (EMS) application of a company shows the list of employees in a Datagrid in a screen. When a row is clicked in the datagrid, it is supposed to show an overlay screen with some details about the employee. Now, the way the details in the overlay window are organized should be different for different screen sizes, as below.

Let's go through the steps of how to configure the Overlay screen to achieve this result.

Adding Adaptive Columns

1. In the Template Editor, click on the 'Adaptive columns' icon, drag and drop it on the canvas. This action will insert a frame with 2 columns by default.

Along the top border of the frame, you can notice equally spaced grooves. These are markers for dividing the frame up to a maximum of 12 parts. By default, when a frame is inserted, it is will have two columns, with each column being 6 parts (6/12 and 6/12 parts) wide.

2. For our requirement, we need the profile pic to be hidden for 'xs' screen size, on the top of the data for 'sm' screen size and alongside the data for other screen sizes. Therefore we need a frame (Adaptive columns) for this with two columns - the first column containing the profile pic and the second column containing the data.

Then, the data needs to be arranged in one column for 'xs' screen size and two columns for other screen sizes. Therefore we need a frame for this with two columns. This frame should be nested in the second column of the other frame.

So, repeat step 1 to insert another frame in the second column of the frame that you already have.

3. Add the data elements from the Data Model at the appropriate places in the frames. You do this by dragging the required fields from the Data Model into the canvas.

Inserting Columns

4. To insert a blank column, hover over one of the grooves at the top border of the frame. For example, if you want to add a column after 2/12 parts, hover over the second groove. This will bring up a '+' icon. Click on it to add a column.

Changing Column Widths

5. There are two ways in which you could increase/decrease the width of a column.

One way is to hover over the left/right vertical border of the specific column. This will bring up a double-sided horizontal arrow. Click on it and move the vertical border on either direction to increase/decrease the column width.

Another way is to do the same action, that is clicking and dragging the left/right vertical border on either direction, but from under the 'Columns' or 'Selected column offset and width' properties in the Properties pane. This is the only method if you want to make a vertical column into a horizontal column, that is, stacking the column one below another instead of one beside another. Refer the section below in this page, to know more about these properties.

Making a Column Horizontal

Note: In the general sense when we refer to a table, columns are vertical and rows are horizontal. But for this discussion specifically on 'adaptive columns', we use the term 'columns' for everything.

6. In certain situations, you might want to make one or more columns horizontal. For example, in the use case that we are discussing here, we would like the profile pic to be shown above the data fields only for 'xs' column layout. For this, the first column has to be made horizontal.

As explained in the previous sub-section, you need select the appropriate column and drag the vertical border from under the 'Selected column offset and width' property. If you drag it to the extreme right, then that column becomes horizontal and is 12/12 parts wide.

To stress once again, this change applies only for the specific column layout that you are working with. If you want the change to be made for other layouts, repeat the step by selecting the appropriate column layout in the Properties pane.

Hiding Columns

7. Click on the 'eye' icon under the 'Selected column offset and width' property in the Properties pane after selecting the column that you would like to hide for the specific column layout. The column is now hidden.

Save the Template Editor and preview.

The hidden column is then greyed out and the specific column is shown in red in the Properties pane. This improves readability.

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).

Introduction

The Table element can be used to create Rows and Columns to display other elements in a grid-structure with a fixed number of columns and rows that you define.

Properties

Table Properties

Default settings

Bootstrap settings

Within the Table, you have Rows and Cells that also each have their own options to play with.

Row options:

Cell options:

Illustration

Let's continue with the EMS use case from the last topic, Alert, where we had constructed the Employees Overview page. On the page, we had shown the list of employees as cards (using Repeaters) and within a card, we had shown three fields for the employee, one below another, as read-only Form fields. Let's now try to align the three fields vertically within the card.

Note: Although Adaptive Columns would be best suited for this scenario, let's use Table for understanding the element better.

This is what we had from the last topic, Alert.

Let's remove the three fields from inside the Panel, which we are going to replace with a Table.

1. Click on the 'Table' icon, drag and drop it on the canvas at the place where you would like to insert it.

This inserts a Table that contains one cell, the default Display Mode being Bootstrap. Scroll back up to the Properties Section to learn more about this property.

2. To add a column after a specific column, hover over the top right corner of that column. This will bring up a '+' icon. Click on the icon.

To add a row before a specific row, hover over the top left corner of that row. This will bring up a '+' icon. Click on the icon.

To add a row after a specific row, hover over the bottom left corner of that row. This will bring up a '+' icon. Click on the icon.

For our use case, we want a row for the header and a row for the data. We also want 3 columns. So, follow the above steps and add 2 more columns and 1 more row.

3. Add column headers and add Labels corresponding to the required data fields from the Data Model.

1. Save the Template Editor and Preview.

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).

Introduction

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. These are useful, but not limited, to displaying warning/error messages after validations (for example, validations after submitting a form).

Properties

Illustration

Let's continue with the EMS use case from the last topic, Panel, where we had constructed the Employees Overview page. Let's now try to display a warning alert message within the Panel when the employee has no Role assigned.

This is what we had from the last topic, Panel.

1. Continuing from the above, add a conditional inside the Panel that checks whether the employee's role is empty.

2. Click on the 'Alert' icon in the Template Editor, drag and drop it on the canvas at the place where you would like to insert it.

By default, an Alert of 'warning' context is inserted.

2. Click on the flag icon under 'Icon' in the Properties pane and search for a warning icon.

3. Select an icon, click 'Ok'.

The icon is added to the Alert.

4. Add text to the Alert, either by typing in directly, or using a Label.

5. Save the Template Editor and Preview.

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:

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.

The label's appearance, in addition to the default options accessible from the properties pane, can also be changed using the style section of the toolbar. With these options, you can modify various aspects such as text style, boldness, alignment, indentation, and more. Labels can also be changed into hyperlinks and given a tooltip by enabling tooltip properties in the property pane.

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

Illustrations

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.

Introduction

Panel creates a container that consists of three parts - an optional Header, a Body and an optional Footer. You can add other elements (such as rich text or graphics) to any of these containers.

Properties

Illustration

In the earlier page for the topic of Adaptive Columns, we had the use case for the Employee Management System (EMS) application of a company, in which the list of employees was shown in a screen. And when one of the row was clicked, the employee details were shown in an overlay. Now let's try to design the employees overview screen, where we we show the list of employees as Repeaters, and use panels for each card. The final result is shown below.

1. In our example, we have the Repeater added to the Template Editor. Now, click on the 'Panel' icon, drag and drop it on the canvas at the place where you would like to insert it. In our example, we want the panel inside the Repeater.

2. Add a Label in the Header that concatenates the First and Last name fields from the Data model and set the Heading type as 'h2'. Add Forms for the fields needed in the body.

3. Set the 'Show footer' toggle 'on' in the Properties pane. That will show the Footer container in the Panel. Add the necessary Buttons in the Footer. Save the Template Editor and Preview.

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).