Defining Layout Options 

You define the layout for views and elements in a model in different ways. Each type of layout is described in the following sections.

Defining Layout of View Elements in Components

By default, the view elements (forms, tables, and charts) in a model are arranged one above the other (Vertical flow). Alternatively, you can arrange the elements side-by-side. To do so, on the Layout board, click outside the layout (no element is selected) and from the Layout dropdown list in the Configure task panel, choose Horizontal flow.

To change the order of the different views in a model, drag-and-drop them to a new location as needed on the Layout board.

Defining Layout of Controls in Form View Elements

By default, controls in Form View elements are arranged in a single column. You can use the Columns dropdown list in the Configure task panel to change the layout of the controls by specifying the number of columns into which to organize the controls. The element is automatically divided into a layout grid of equal-width columns, according to your selection.

You can modify the layout of controls on the Layout board by dragging the controls to new locations within an element on the Layout board. As you drag, an arrow appears showing you the possible locations in which you can drop the control. The control automatically snaps to the new location, depending on the value selected in the Columns dropdown list. For example, if you specify the number of columns as 3 in the Columns dropdown list, the controls are automatically arranged in a grid containing three columns of equal width.

When you have more than one column in a form view, you can define the width of each column as a percentage of the total form width. To do this, right-click the form on the Layout board and choose Customize Columns. The Customize Column Widths dialog box enables you to enter a percentage width for each column (except for the last column, which is calculated automatically based on the width remainder). A column width must be greater than 0%, and the sum of all the column widths cannot exceed 100%. You can also click the Default button to automatically assign equal widths to each column.

For most control types, the control width is automatically set according to the column width and cannot be modified to fill a partial column. However, you can change the width of all control types to span multiple columns by dragging the control handles. For some control types, such as Button, you can also drag the control handles to modify the control width to fill a partial column. For some control types, such as Radio Group and Calendar, you can also drag the control handles to increase the height of a control. When you modify the control height, this increases the height of the control and its entire row.

You can use the Melting Group control as a container for multiple controls. You can add a Melting Group control to a form view, and then drag multiple controls into it. After the controls are inside the Melting Group control, you can drag their handles to define their widths. More information: Adding Controls in a Melting Group.

Controls are automatically placed in every cell of the layout grid. If you want a specific cell to remain empty, you can add a Plain Text control without a Text value to act as a placeholder to make the cell appear empty.

If you define controls that are visible or hidden dynamically at runtime according to certain conditions, the visible controls are automatically moved at runtime to fill up the gaps left by the hidden controls. This means that your control layout may not appear at runtime as you had intended. For this reason, we recommend that you do not define Hidden controls, but rather define the controls to be Enabled or disabled dynamically as required. In this way, the controls are always displayed at runtime, and the layout remains as you intended. Alternatively, you can make sure that controls that need to be dynamically visible or hidden appear at the end of the view element, so that if they are hidden, the remainder of the layout is not affected.

Defining Layout of Controls in Table View Elements

You can drag controls from the Compose task panel to a Table View element. Each control fills an entire table column. You can also drag controls to the table toolbar. You can change the order of columns in a Table View element by dragging them to a new location in the table on the Layout board. As you drag, an arrow appears showing you the possible locations in which you can drop the control or column. You can also change the width of a column by dragging the relevant column handle until it reaches the correct width.

Defining Layout of Chart View Elements

You define the layout of chart view elements using the options in the Configure task panel. The Layout board does not display a representation of the chart settings you define. For more information about the options in the Configure task panel, see Configure Chart View Task Panel in the Visual Composer Reference Guide.