› User interface › Forms › Toolbox › Layout

Layout

Columns, rows and cells help in arranging your form content. A form is created with a single column and single cell by default. You can add more columns, rows and cells to a form.

Add a column to a form

Use columns to divide a form vertically into equal parts. For example, if you add one column, the form is divided into two equal parts; if you add two columns, the form is divided into three equal parts.

  1. Click the Design tab.
  2. On the Toolbox panel, expand Layout and click Column.

    A column is added to the form.

  3. In the properties panel, change the default width as needed.

    The width mode (fixed or percentage) of column depends on the form level setting (see General properties of form). The maximum fixed width of the column cannot be more than 3000px.

    To delete a column, select the column and click that appears on top of the column.

Add a row to a form

Add rows to horizontally divide the form into panels.

  1. Click the Design tab.
  2. On the Toolbox panel, expand Layout and click Row.

    A row is added to the form.

  3. In the properties panel, change the default values as needed.

    To delete a row, select the row and click that appears on the top of the row.

Add a cell to a form

Add cells to create sections in a form.

You can add cells to a form or to a column within a form. To add a cell to a form, click the form outside of the column or to add a cell to a column within a form, click within a column.

  1. On the Design tab, click Form elements.
  2. On the Toolbox panel, expand Layout and click Cell.

    A cell is added to the form.

  3. Configure the following properties for the cell:

    • General

      Name Name for the cell to make the cell easier to identify during mapping.

      By default, the cell ID appears as the name of the cell.

      Title

      A title for the cell that appears at runtime if the cell is set to collapsible.

      Security token

      Restricts access to the cell contents at runtime by applying a security token to a cell. See Security tokens.

      You can use the same security token for multiple cells. Importing or exporting a form includes security tokens associated with a cell.

      Orientation

      Vertical: Displays the cell controls vertically.

      Horizontal: Displays the cell controls horizontally.

      Visible

      Makes the cell visible at runtime.

      If the cell is set as hidden, all the controls within the cell are hidden. If you want to hide only some controls in a cell, place those controls in a different cell.

      Collapsible

      If selected, make the cell collapsible (collapse or expand) at runtime.

      You must set the Header style (Theme, Inline or Class) for a collapsible cell.

      Collapsed

      If selected, the cell is collapsed by default at runtime.

      This property does not apply to Phone and Tablet forms.

    • Design

      Width mode

      The width of a cell can be Fixed (in pixels) or in Percentage (relative to the browser window).

      • The default width mode for a cell is Percentage. However, you can switch the width mode from percentage to fixed width and vice versa.

      • The percentage option for the cell is only available if the form width is set to Percentage mode.

      Width

      The width of a cell.

      Min height

      The minimum height of the cell.

      Padding

      The space between the text inside a cell and the cell border. Enter the values for the Left, Top, Right and Bottom padding. (Default: 0,0,0,0)

      Alignment

      The alignment for the controls ( Left, Center or Right) within a cell.

      If a cell has many controls with horizontal orientation, and the alignment is left, center or right, some of the controls may get cut off at runtime.

      Margins

      The margins of the cell. (Default: 0,0,0,0)

      Style

      The style of a cell can be a predefined theme, an inline style or a class.

      • Theme: A predefined theme.

        Themes are defined globally (outside of forms and sites) and are then associated with a site. Forms are rendered as part of a site. The theme associated with the site determines the style for the controls.

      • Inline: Set the Border, Border color and Background for the cell. To use a background image for the cell, do the following:

        1. Select Use background image.

        2. To use a custom image, enter the name of the image in the Image path field. Or to use a predefined image, select Load image from store and select the image.

        3. To allow resizing of image to fit the cell, select Resize to fit.

        The inline styles override the default theme.

      • Class: A CSS class. This class must be available in the style sheet that is associated with the theme. Otherwise, the cell uses the default style.

    • Associations

      See Associations.

    • To delete a cell, select the cell and click that appears on top of the cell. You cannot delete a cell if the cell or any of the controls within the cell are in use.

    • When you copy and paste a cell, the cell and its contents are copied and pasted.