Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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).
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).
When Appearance is set to responsive the width and heigth are a maximum size. The image will scale to fit the page untill the maximum height or widht value is reached.
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).
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 | Description |
---|---|
This illustration makes use of elements like Panel and Conditional. Refer the linked pages if you would like to learn more about these widgets.
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.
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.
Property | Description |
---|
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.
This illustration makes use of . 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.
Style Context
When toggled on, the Panel shows a small arrow to fold or unfold the block panel’s body depending on the condition (see'"Body is expanded when' property).
Show close button
Optionally, you could show a 'x' button at the top-right corner of the Alert container, which can be used to close the Alert at Runtime.
Icon
You can add an icon that is displayed in a predefined position (top-left within the container) as explained in the Illustration.
Behavior: On click | This property can be used to indicate what should happen when you click on the Div. There are five options possible:
|
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 |
Appearance: Style
Tooltips have already been covered in detail . Refer that page for further details on this property.
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.
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.
A peculiar thing with the Table element is, when you have set Display mode = Bootstrap, then set the First Column as Header or First Row as Header to true, and then change to Display mode = 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.
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.
Save the Template Editor and Preview.
Item | Description |
---|
Item | Description |
---|
Item | Description |
---|
Item | Description |
---|
Item | Description |
---|
This illustration makes use of . Refer the linked page if you would like to learn more about these widgets.
Style | you can set the Style to show No border or Table, where it shows 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). |
Cell padding | This adds space between the cell borders and the contents within the cell |
Bordered | If supported by the CSS definition in the Design Template, the table will show borders around the cells. |
Condensed | This 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 | This 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 | This 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 | This will show all rows with switching background, like a zebra striping (usually clear and light grey background - depending on the chosen Design Template). |
Responsiveness |
|
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 |
Width | You can set a specific height in numeric pixel values |
Horizontal align | choose Left, Center, Justify or Right |
Vertical align | choose Top, Middle or Bottom to align content in the cell. |
Style context | If Table is set to Bootstrap, you can set a Style Context on a cell, Allowing you to change to color of a cell |
Enable Tooltip | allows you to set a tooltip on the whole cell area |
Visible When | You can use an expression to decide whether to show or hide the specific row |
Width | You can set the width of the table using pixels or percentages or the implicit setting. The default is 100%, which uses all available space of the parent container in which the table is placed. |
Display Mode | 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). |
First column as header | This 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 | This 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). |
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.
Property | Description |
---|---|
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.
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.
Property | Description |
---|---|
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.
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.
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.
When you insert a column in one column layout (Column layout = md, in the above example), it reflects in all the other layouts as well. However, the column widths and alignments will differ for each layout. You would therefore need to follow the next step in rearranging the columns for each layout separately.
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.
Once again, the changes to column widths that you do this way will apply only for the specific column layout that is selected in the properties pane. Columns will be aligned differently for other layouts. So, be sure to repeat the step for all 4 layouts separately.
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.
Once you make a column horizontal, it can be split up to 12 parts and behaves like an independent adaptive column frame.
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.
It is recommended to keep this toggle always on when you have hidden columns.
Show collapse button
When toggled on, the Panel shows a small arrow to fold or unfold the block panel’s body depending on the condition (see'"Body is expanded when' property).
Body is expanded when
This property becomes visible only when 'Shown collapse button' property is toggled on. By default, the expression contains the value 'true', which means that the body of the Panel is shown expanded by default. You can change the expression as you wish. In the end, the body will be expanded when the condition is true; when false, the body is collapsed by default.
Appearance: Style context
Bootstrap context color for the header and the outline of the panel.
Appearance: Show header
Toggle to show or hide the header container. This toggle is on by default. That is, the header is shown by default.
Appearance: Show footer
Toggle to show or hide the footer container. The footer is hidden by default.
Appearance: 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.
Appearance: Body height
implicit, percentage, pixels: 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 or the ratio in percentages. You can change this when a value is added.
Show hidden columns
If you like to keep the column hidden at run-time, but make it visible in the Template Editor on the modeler, you can toggle 'Show hidden columns' on in the Properties pane.
Column layout
With this property you can configure the layout of adaptive columns for four different screen sizes - Extra small (xs), Small (sm), Medium (md) and Large (lg). As discussed later in this page, the settings for each layout (changing column widths, making a column horizontal, and so on) will have to be done separately for each column layout.
Columns
This shows a tiny preview of how the columns of a frame are laid out for the selected column layout. It shows whether each column is laid out horizontally or vertically and also shows the width of each column (x/12 parts). You can select a column right from here, which will show you its offset and width in the next property.
Selected column offset and width
This property shows (and can be used to adjust) the width of the selected column (1 to 12) and also shows how much it is offset relative to the other columns.