Add a control to display a container of two or more columns from which other controls display.
The Multicolumn / Table control adds a layout element with two or more columns. Drag and place other controls into any of the columns to display them to the width of the Multicolumn / Table control column.
Specify the width of each column in colspan
HTML attribute settings. The total of all colspan
attribute settings must be divisible by 12. The control contains two columns of six (6) colspan
HTML attribute setting each by default. See a design example.
This control is only available for the following Screen types:
Display type
Form type
See Screen Types.
Watch the following product tour to learn how to use a Multicolumn / Table control.
For a documented example of using the Multicolumn / Table control, see Show or Hide Controls Based on Button Selection.
Follow these steps to add this control to the Screen:
Configure the Multicolumn / Table control. See Settings.
Drag and place others controls into a column. Configure and validate each control's settings.
Below is a Multicolumn / Table control that contains information details in the left column and an upload File Control in the right column.
The Multicolumn / Table control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Content Fields category, and then locate the Multicolumn / Table icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Remove: Click the Removeicon to remove the column.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.