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 property 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 rows and equal-width columns, according to your selection.

You can then drag each control to a new location within the element. As you drag, the cells in which you can drop the control are highlighted. When you release the control, it automatically snaps to its place in the cell. If you add columns (using the Columns property), all of the controls remain as is; you then manually rearrange them in the columns as needed. If you remove columns, any controls in those columns are also deleted.

The following table describes the manipulations you can make on the Layout board when arranging the controls in a Form View element.

Layout Options in a Form View
Layout Option	Procedure
Change the column width when there is a single column in the form	When the Scale mode property is set to Fixed scale, drag the column edge to the required width, or specify the exact width (in pixels) in the Col. widths property.
Change column widths when there are multiple columns in the form	Select the form edge and click the ellipsis (...) in the Col. widths field. In the Customize Column Widths dialog box, enter the percentage width of each column (except for the last column which is calculated automatically). You can also click the Default button to automatically assign equal widths to all columns.
Change the width of a control so that it spans multiple columns (available for most controls)	Drag control handles.
	Drag the handles of the control to the required width, or select the control and use the Col. span property to specify the number of columns that you want the control to span. (Note that certain controls – such as Button and Checkbox – occupy the spanned rows at runtime even though they are not visibly widened at design time.)
Change the height of certain controls, such as Radio Group and Calendar, so that they span multiple rows	Drag the control handles to increase the height of the control. The height of the entire row is increased accordingly.
Remove empty spaces (cells) in a form	Right-click the column of the form in which you want to remove the empty cells and choose Remove Empty Cells Selected Column or Remove Empty Cells All Columns to remove the empty cells of the specified column(s) and move all relevant controls up in the form.
Group controls in a single container	Drag the Melting Group control from the Compose task panel, and then drag other controls into it. After you have added the controls into the Melting Group control, you can drag their handles to define their widths. More information: Adding Controls in a Melting Group

Note Note

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.

End of the note.

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. You can also change the width of a column by dragging the relevant column handle until it reaches the correct width. You can change the number of rows displayed per table page at runtime by dragging the table border to increase or decrease the number of rows; the number of rows is displayed in a tooltip in the center of the table and also in the Table rows property of the Configure task panel.

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.