Position Controls on Forms
You have many options for positioning controls in your web form.
Rows and Columns
By default, you can drop and position controls onto a web form from any palette in rows and columns. Rows and columns are defined based on where you want to drop your control.
-
Each row has a drop target on the top and bottom.
-
Each column has a drop target on the left and right.
Each time you drop a control onto the canvas, the control is placed in a new row. If you drop a control beside another control, then that control is added to the same row but in a new column. The column size is based on the number of controls in a row.
The row is based on a 12-column grid system. For example, if the row has four controls, then each uses three columns. When more than 12 controls are added to a row, the remaining controls are displayed below the table.
Panels, Sections, and Tabs
You can group different controls inside a single control by using panels, sections, and tabs.
A Panel control allows you to group multiple controls inside it. Drag and drop controls inside a panel and position them as you would in the canvas.
A Section control is similar to a panel, but is collapsible. You can use the section control to create groups of controls that users can expand and collapse. To show the section expanded when the form loads, select Expand in the General tab. To show the section collapsed when the form loads, deselect Expand. You can drag and drop any other controls inside a section control, including panels and other section controls.
A Tab control allows you to group controls in different tabs, to create a tabbed view in your web form. By default, when you drag a tab control onto your web form, one tab is created. To add another tab, click Add tab. The new tab is added to the right of the existing one. To rearrange the tab order, drag a tab to the right or left of another tab. In small devices, such as mobile phones, tabs are shown as accordions to accommodate the content in the space. You can drag and drop other controls, such as panels, sections, and tables, into an individual tab. When you select a tab, only the controls in the currently selected tab can be seen.
Note:
If you delete a panel, a section, or a tab, all the controls grouped inside the panel, section, or tab also get deleted.Tables and Repeatable Sections
Use Table controls to conserve space within a web form. The table control allows you to arrange the form controls in a grid pattern. You can add columns into the table and add one control per column. When you delete a column in the table, all the controls in the column get deleted.
If auto binding is selected when you drop a table onto the canvas, then a new entry in the data definition is generated. That attribute is an array of type object. Every time a control is dropped into a column, an attribute inside that list is added.
If auto binding isn't selected, you can select an attribute from the data definition. The controls inside a table can be bound to any attribute in the form data definition. When rendering the form, the data is fetched and shown for that control. However, modifying the value in one row doesn't update every row. Also, when submitting the form, the last control bound to that attribute is the one updating the payload.
You can also select an external source to get the information from the table. In this case, the information from the binding is skipped, and the data is fetched through a connector call. When submitting the form, the payload is modified with the latest data in the table, that is, connector fetched data and user changes.
Use Repeatable Section controls to display multiple copies of a set of controls in a web form. Repeatable sections are useful when you want to allow users to enter the same type of input information multiple times in the form; for example, a phone number.
Like tables, you can configure the repeatable section controls such that the information from binding is skipped and data is fetched through a connector call.
Unlike a table, which is structured, a repeatable section is a free-form container. You can add new controls above, below, or between existing controls. You can surround an individual control with a repeatable section control, or it can include an entire section control. The section control included in the repeatable section must contain all of the web form controls that must be repeated.
Tables and repeatable sections provide a way to add information and content dynamically to web forms. With these controls, you can run action and if triggers in the form to display dynamically changing information.
Responsive Layout for Different Devices
The same web form with the same set of controls is rendered in different ways for different devices. For example, if you place controls in your form a certain way for a large device, then the same controls might be rendered in a different way for a small device.
Select the device in which you want the form rendered from the options available in the Displaying For field. To see how your form is displayed for the selected device, click Preview.
You can also specify absolute column sizes for different devices. To do so, deselect Automatic column sizes in the Styling tab, and then enter a number from 1 to 12 in the available fields.