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