Columns component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

The Columns component is a UI element that enables you to group other components. You can use columns to display more than one component in a single row or to save vertical space on a form.

Use the Columns component from the Latest components section.

2. Main functions

The Columns component supports many options when interacting with the process forms. The options are divided into tabs.

  • Display

  • API

  • Conditions

  • Label: The name of the component that appears next to it.

  • Column Properties: Set the number of columns to be displayed in the form and specify the width and offset options for each column. You can easily rearrange the columns using the drag-and-drop feature without the need to create everything from scratch.

  • Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.

  • Property Name: Field name for the API endpoint. Not functional for this component.

  • Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

    This function uses JS plugins. For details, see Variables in JavaScript insertions.

  • Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

3. Data format

Submission
// This component has no data
This component may contain internal components, but this does not affect the data of those components. Note that the internal components must have unique names in the API tab > Property Name field.

4. Use cases

  1. The area where the Columns element is placed is divided into 12 parts.

  2. The width of each column is specified using these parts.

  3. The offset defines the indentation at the beginning of the column.

For example:

  1. If the width of the first column is set to 5 and the second is set to 7, then the first column will occupy 5/12 of the container’s width, and the second will occupy 7/12.

  2. If you set offset=1 and width=6 for the second column, there will be an indent of 1/12 of the container between the first and second columns.

We recommended setting the width and offset so that their sum equals 12. If the sum is greater, the columns that do not fit will be moved to the following line.