Skip to main content
Version: 10.3

Create configuration form in Form Builder

Form Builder is used to design AI Agent configuration windows. To access it, go to <Control Tower URL>/task-designer/general-app/builder.

The available options in Form Builder's top menu are as follows:

  • Download CSV: export a JSON form schema as a CSV file that you can use later.
  • Upload CSV: import an existing JSON form schema as a CSV file. When the file is imported, you can edit the form in the Builder mode.
  • Clear All: remove all form components and clear the JSON schema.

Form Builder generates two types of layouts: Form and Wizard. The layout selection box is available in the upper left corner.

Form components determine how form objects will look like. There are three groups of components available on the left pane:

Once you finish configuring a form, you can test the changes. To do that, select Renderer in the top right corner. The entire configuration is displayed with all modifications.

  • To save the form, click Submit.
  • To continue editing, return to the Builder mode by clicking Builder.

Add component​

To add a component to a form, follow the steps below:

  1. Select a form component in the left panel and drag it to the desired location on the main canvas.

  2. Specify the component properties.

    info

    The setup described below is general for all form components. For specific settings, refer to the configuration of related components accordingly:

    The typical Display settings are as follows:

    • Label: specify a title for the component.
    • Placeholder: specify placeholder text that appears when the field is empty.
    • Description: enter the text to appear below the input field.
    • Tooltip: add a tooltip to be shown to the side of the field.
    • Prefix: enter the text to be displayed before the field, for example, $ for money.
    • Suffix: enter the text to appear after the field, for example, lbs for weight.
    • Custom CSS class: specify a custom CSS class to add to the component. You can add multiple class names separated by a space.
    • Tab index: set the tabindex attribute to override the form's tab order.
    • Inline layout: layout radio buttons horizontally instead of vertically.
    • Hidden: set to hide the field when rendering the form view.
    • Hide label: hide the component label or title. The setting displays the label in Form Builder but hides it when the form is rendered.
    • Hide input: hide input in the browser. Do not use the setting for passwords.
    • Initial focus: make the field the initially focused element of the form when rendered. If more than one component in the form has the Initial focus setting checked, only the last component in the JSON structure with the setting enabled is focused in the form.
    • Allow spellcheck: enable spellcheck in the field.
    • Disabled: disable the form input.
    • Table view: select to display the value in the table view of the submission list.
    • Autocomplete: indicate if input elements can have their values automatically completed by the browser.
    • Modal edit: select to open up a modal to edit the component value.

  3. Click Apply. The result of the operations above is also generated as a JSON schema representation you can find at the bottom of the screen.

Select template​

Templates are used to contain other form components to build complex configuration windows, for example, for processing Manual Tasks. Choose a template according to your needs.

Empty canvas​

Expand to learn more

Select the Empty canvas template if you don't need to work with any documents in your configuration window.

In the Label field, specify the Empty canvas component's name. Type in any random value as the setting is required, though the name is not used anywhere in the form layout later.

To build a layout, drag needed components from the Basic or Layout menus to the Empty canvas drop area and set as appropriate.

Multi doc​

Expand to learn more

Apply the Multi doc template when you build a configuration window for processing multiple documents in a single Manual Task.

On the Display tab, configure the following settings:

  • Creation method: choose the creation method for selecting dynamic or manual tabs.

    • Dynamically from input data (default): retrieve data from an uploaded document dynamically based on the key specified in the Tab display name field, for example, {{item.doc_name}}, where doc_name is the key for the document name. With a single Tab display name field, any number of documents is loaded dynamically.

    • Manually: set the quantity and names of dynamically multiplied tabs in the designed task based on your knowledge of the task input. Each tab should correspond to an input data type, for example, an article or document name. Subsequently, you can specify a separate configuration for each tab, for example, a different layout per tab and a different set of fields.

      1. In the Tab display name section, add any number of documents together with keys using the Add Another button.

      2. In the Key path field, provide the path in the document to search for the key.

  • Add summary tab: select to add the Summary tab that appears first in the list of tabs. In the Summary tab, cumulative details from other tabs can be provided.

    1. In the Summary tab display name, enter a name for the tab.

    2. Select the Hide navigation panel checkbox to hide navigation for the summary tab. The feature is useful, for example, when adding a Drill down or Panel list on the Summary tab inside Multi doc.

  • Layout: select Horizontal or Vertical to set how the tabs are arranged relative to each other when rendered.

    For the Vertical view type, you can also set the following:

    • Tab grouping by document types: select Group tabs and specify the doc_type grouping key.

    • Tab description: add a text description in the WYSIWYG editor box or click Source and set variables to retrieve the data from the task input.

On the API tab, make sure to specify the following:

  • Property name: specify a value to match the transaction data column name in the CSV file. Typically, it is _sys_transaction_json.
  • Data path: provide the path to access documents from an input file.

To set up a layout for each document form, drag needed components to the drop area of the appropriate tab. For more details, see Design Manual Task forms | Design multi-page Manual Task.

Add Basic components​

A Basic form component collects and displays data in the user interface. See the instructions below for detailed settings specific to Basic menu components.

Button​

Expand to learn more

The component allows you to add buttons to perform various actions in a form.

On the Display tab, configure the following settings:

  • Action: select an action to be performed when a user clicks the button.

  • Save on enter: allows using the Enter key to submit a form.

  • Theme: set a theme (color) for the button.

  • Left icon: if you have an icon library and want to include an icon to the left of the button label, add the icon class here.

  • Right icon: if you have an icon library and want to include an icon to the right of the button label, add the icon class here.

  • Disable on form invalid: select to disable the button if any client-side validation fails. The setting prevents submitting a form with invalid data.

Checkbox​

Expand to learn more

The Checkbox component allows selecting multiple values from a list of options.

Configure the following settings:

  • On the Display tab, fill in the Label field to set a title for the list of options and select the Inline Layout to arrange checkboxes for selection horizontally instead of vertically.

  • On the Data tab, add Values to be selected in the field. The Value column data is stored in the database, and the Label values are shown to users.

Date/Time​

Expand to learn more

Use the Date/Time component to add a field for entering a date, time, or both.

On the Display tab, configure the following settings:

  • Allow manual input: select to allow users to manually enter a date.

  • Format: specify the format for displaying the selected date.

On the Date tab, specify the following:

  • Enable date input: select to allow date entry in the field.

  • Disable specific dates or dates by range: add dates to a blacklist, for example, 2025-04-21.

  • Custom disabled dates: disable dates using a function. For more details, see the documentation.

  • Disable weekends: select to disable weekends.

  • Disable weekdays: select to disable weekdays.

On the Data tab, the Default value and Default date settings are crucial. You can choose a date from the drop-down menu or use Moment.js functions to define a default value.

For instance, in the Default date field, enter new Date(); to display the current date or use Moment.js functions such as moment().add(50, 'days').calendar(); to set a specific date in future. You can also use the add or subtract functions to shift the date forward or backward.

For details on Multiple values and Allow n/a, see Select.

On the Validation tab, pay attention to the following settings:

  • Use input to add moment.js for minDate: allow using Moment.js functions instead of the calendar to define a minimum date.

    • Minimum date: the setting is available when Use input to add moment.js for minDate is selected. Specify the earliest acceptable date.

  • Use calendar to set minDate: allow using the calendar to set the minimum date. Mutually exclusive with the Use input to add moment.js for minDate setting.

  • Use input to add moment.js for maxDate: allow using Moment.js functions instead of the calendar to define a maximum date.

    • Maximum date: the setting is available when Use input to add moment.js for maxDate is selected. Specify the latest acceptable date.

  • Use calendar to set maxDate: allow using the calendar to set the maximum date. Mutually exclusive with the Use input to add moment.js for maxDate setting.

Icon​

Expand to learn more

The component allows you to specify a Material UI icon to display, for example, inside the Data grid component.

Configure the following settings:

  • Icon type: define an icon to display. For a full list of available icons, refer to Material UI | Material icons.

  • Icon label: specify text to display next to the icon (optional).

You can also set up conditional logic to display different icons based on defined conditions in the Conditional tab.

Keywords​

Expand to learn more

You can include a field and an upload button to add or remove individual keywords or custom keyword lists, for example, for screening AI Agents.

In the field, users enter keywords as comma-separated values based on their business needs. If there are too many keywords, they can use the Upload button to import a CSV file with a list of values in rows or columns. The component also features duplicate keyword validation.

Configure the following settings:

  • Label: enter a title for the field.

  • Description: specify instructions that will appear below the field.

  • Enable "Show more" option: select the option if you have many keywords and want to display the Show more button.

  • Number of items to display initially: define how many items to display before the Show more button appears.

  • Upload button label: enter a name for the Upload button.

Number​

Expand to learn more

Use the Number component to restrict the field input to numerical values.

On the Data tab for the component, pay attention to the following settings:

  • Use thousands separator: select the option to separate thousands by a local delimiter. In the Choose separator dropdown, select Comma "," or Period ".".

  • Decimal places: set the maximum number of decimal places allowed in the field.

  • Require decimal: select the option to always display decimal values, including trailing zeros.

  • Decimal symbol: the hidden setting allows you to change the default decimal symbol for the Number component. To configure it, in the component's JSON schema, add the following line: "decimalSymbol": ",".

    After saving the changes, the Number component uses the specified symbol as the decimal separator.

For details on Multiple values and Allow n/a, see Select.

Payload Code​

Expand to learn more

Use the Payload Code component to set custom predefined submission data that is accessible to other components and becomes visible in the submitted data upon executing the submission action.

On the Data tab for the component, add a script using the form and data variables:

In the Builder mode, the component contains only one field, as shown above, for adding a JavaScript code configuration for the submission data.

In the Renderer mode, the component is not displayed. Its only effect is that the data from the defined configuration is applied to the data and submission objects accessible to other components and visible in the submitted data.

Questionnaire​

Expand to learn more

Add the component to display a toggle enabling users to select between two options.

Configure the following settings:

  • Label: specify a title for the component.
  • True option value: define the value representing the true option. The default is Yes.
  • False option value: define the value representing the false option. The default is No.

Radio​

Expand to learn more

The Radio component allows you to select only one value from a list of options.

On the Display tab, pay attention to the following setting:

  • Inline layout: select to arrange radio buttons horizontally instead of vertically.

On the Data tab, the following setting is important:

  • Values: specify options for selection. For each of them, specify Label and Value.

Select​

Expand to learn more

The Select component allows you to display a set of values in a drop-down list.

On the Display tab, configure the following settings:

  • Allow labeling: select the option to enable users to assign a value to the field by selecting text in the task input.

  • Unique options: select the option to display only unique values in the drop-down list.

On the Data tab, configure the following settings:

  • Multiple values: Select the option to allow multiple values to be entered in the field. Users will be able to select more than one value.

  • Allow n/a: select the option to display a n/a checkbox on the rendered form.

    The Allow n/a option also appears on the Data tab for Text field, Text area, Date/time, and Number components and is visible when the component is placed inside a Labelling layout. When a user selects the checkbox, the not available value is automatically assigned and the field becomes disabled.

  • Data source type: specify the source from which the drop-down list options are pulled.

  • Data source values: define the available options in the drop-down list. The Value column data is stored in the database, and the Label values are displayed to users.

  • Allow adding custom value: select the option to allow users to add custom options to the drop-down list. When selected, users can type a custom value in the search box and press Enter to add it.

    Once added, the custom option becomes permanently visible in the list.

  • ID path: specify the path to select the ID value.

  • Refresh options on: refresh data when the value of another specified field changes.

  • Refresh options on blur: refresh data when another specified field loses focus.

  • Clear value on refresh options: clear the selected value when the field defined in Refresh options on changes.

  • Enable static search: select the option to allow searching within the static list of predefined items.

  • Search threshold: set a match threshold for the search algorithm. For example, 0.0 requires a perfect match, while 1.0 permits any match.

  • Read only value: select the option to display only the selected value when in read-only mode.

Select bulk​

Expand to learn more

The Select bulk component is used to add drop-down menus (lists) comprising multiple items with selection boxes. On the menu (list), users can select or deselect more than one box at a time or switch the Select all toggle to choose them all.

On the Display tab, fill in the Label field to set a title for the drop-down menu.

On the Data tab, configure the following settings:

  • Data source values: specify values to be selected in the drop-down menu. The Value column data is stored in the database, and the Label values are shown to users.

  • Enable static search: select to enable search within the list.

Switch​

Expand to learn more

This component works similarly to Checkbox, providing a single clickable option. It can be used, for example, within the Data grid or Edit grid components.

In the Switch label field, specify text to be displayed next to the component (optional).

Tags​

Expand to learn more

Add a field to enable users to add one or more tags to categorize items.

Text area​

Expand to learn more

The Text area component is a multi-line input field that allows you to enter longer text as compared to Text field.

On the Display tab, configure the following settings:

  • Rows: specify the number of visible rows.

  • Allow labeling: select the option to enable users to assign a value to the field by selecting text within the task input.

  • Editor: convert the text area into a WYSIWYG editor using an interface of your choice, such as ACE, CKEditor, or Quill.

    If you select ACE or CKEditor, the Enable image upload option becomes available. When selected, you can configure:

    • Image upload storage: choose a file storage provider.

    • Image upload directory: specify the target directory for storing uploaded files.

    If you select ACE, the Save as option appears. The setting determines how the value should saved in the database. Available options are JSON, String, and HTML.

  • Editor settings: modify the WYSIWYG editor's JSON configuration to customize the user interface. The option appears only after an editor is selected.

  • Auto expand: select the option to automatically expand the component height based on the amount of text entered.

  • Show word counter: select the option to display a live word count.

  • Show character counter: select the option to display a live character count.

On the Data tab, configure the following settings:

  • Text case: select the desired text case option to control the allowed letter casing for input data. Available options are Mixed (allow upper and lower case), Uppercase, and Lowercase.

For details on Multiple values and Allow n/a, see Select.

Text field​

Expand to learn more

Use the Text field component for short and general text input.

The settings are the same as those for the Text area component with the following additional option:

  • Input mask: specify a predefined format for the input field. For example, the default input mask for a phone number is (999) 999-9999.

For details on Multiple values and Allow n/a, see Select.

Add Layout components​

Use Layout form components to change the general layout of forms. See the instructions below for detailed settings specific to the Layout menu components.

Columns​

Expand to learn more

Use the Columns component to group other components, like Text field or Text area, into configurable columns. With the help of Columns, you can also display more than one component in one line.

Configure the following settings:

  • Column properties: configure the number of columns to be displayed in a form and specify the size, width, and offset for each column. When configured, you can easily re-arrange the columns using the drag-and-drop feature.
  • Auto adjust columns: select to adjust all other column positions if all the nested components inside one of the columns are hidden.

Content​

Expand to learn more

You can add the Content component to provide non-field information, for example, if you need instructions for display only. A WYSIWYG editor is provided to help with formatting the content. If you use the HTML view of the editor, note that all unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, <style> and attributes like onmouseover or onload.

Select the Refresh on change option to re-render the component whenever any value in the form changes, for example, if you want the Content component to display dynamic data of other components after they are filled in with values.

Data grid​

Expand to learn more

Data grid allows adding multiple components as a line item grid. You can add any number of grids in a form, for example, to include or duplicate multiple field sets.

Below is a list of the Data grid main settings:

  • Equal column width: select to set all columns to equal width. Deselect if you want to customize the width for each column separately.

  • Disable adding / removing rows: select to disable adding or deleting rows in a Data grid component in a rendered task. As you select the checkbox, the Add Another and the Remove row buttons are hidden for the rendered component.

  • Conditional add button: specify a condition when the Add Another button is displayed.

  • Allow reorder: select to enable reordering Data grid rows by dragging them. Available only when Disable adding / removing rows is unchecked.

  • Add another text: set the text of the Add Another button. Available only when Disable adding / removing rows is unchecked.

  • Add another position: specify the position for the Add Another button relative to the Data grid location. You can place the button at the top or at the bottom of Data grid, or in both places simultaneously. Available only when Disable adding / removing rows is unchecked.

  • Enable row groups: select to divide Data grid rows into groups. You can add groups, specify their labels, select a number of rows in certain groups, and delete groups.

  • Initialize empty: select to hide visible rows during initialization.

Drill down​

Expand to learn more

Use the Drill down component to make a Basic component or an element inside Data grid drill down to a specific page or tab. You can use the element only inside the Multi doc template.

For details on implementing various drill-down use cases, see Design Manual Task forms | Drill down.

Edit grid​

Expand to learn more

The Edit grid component is used to replicate a table-like structure when capturing and displaying form data. You can add multiple components inside Edit grid and any number of grids to a form, for example, to include or duplicate multiple field sets.

On the Display tab, configure the following main settings:

  • Open first row when empty: select to open the first row when Edit grid is empty. This way, Edit grid will never be empty.
  • Disable adding / removing rows: select to hide the Add Another and the Remove row buttons in a rendered task form.
  • Add another text: enter text for the Add Another button.

On the Templates tab, the following settings are important:

  • Header, row and footer templates: customize the grid using basic JavaScript. On the Templates tab, you can modify the display of components in the grid row along with the header or footer.
  • Display as modal: select to display the form layout to add or edit a data entry in a modal view.
  • Save row text: enter text for the Save row button.
  • Remove row text: enter text for the Remove row button.

Field set​

Expand to learn more

Use the Field set component to create a form area with a specific title. You can put it inside Layout components or in between other related ones.

On the Display tab, specify a value for the Legend setting to add a legend for the component in a form.

File upload​

Expand to learn more

The component allows users to upload documents as part of a Manual Task.

Configure the following settings:

  • Label: define a title that appears above the component.
  • Placeholder: provide additional information, such as supported file formats, displayed next to the upload button.
  • Description: enter a description that appears above the component, for example, instructions.
  • Tooltip: specify the text of a tooltip.
  • Upload button label: specify the text displayed on the upload button.
  • Data source type: choose the data source to use. Depending on your selection, configure the required settings.

Mind that all uploaded files are stored in the doc-upload bucket under the upload directory.

Expand to learn more

The component is used to create a footer section. In Column properties, you can define the width, offset, push, and pull settings for each column.

The Submit button element is automatically added when you insert the component into your form. You can edit the button settings if required.

HTML element​

Expand to learn more

You can add the HTML element component to display a single HTML element, for example, if you need to quickly insert and configure some HTML in your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, <style> and attributes like onmouseover or onload.

Configure the following settings:

  • HTML tag: enter the name of the HTML tag to display.

  • CSS class: specify the CSS class to add to HTML element. You can specify multiple classes by separating them with single spaces.

  • Attributes: define attributes and their values to add to HTML element. Only safe attributes are allowed, for example, src, href, and title.

  • Refresh on change: select to re-render the component whenever any value in the form changes, for example, when you want the HTML element component to display dynamic data of other components after they are filled in with values.

  • Content: enter the text content in case of adding more child HTML tags to easily write and preview more complex HTML. You can use the Rich Text Editor editor to add formatting to your content.

    To see all available formatting options, click the menu button:

    To automatically convert HTML markup (from earlier versions) into rich text, click Source.

    warning

    String interpolation breaks if styles are applied solely to a variable when using a templating language. The correct way is to apply styling to handlebars as well: <b>{{row.doc_type}}<b>.

Labelling​

Expand to learn more

Add the component to set up a single-page layout for a labelling task. You can drag the Labelling component straight to the drop area or use it inside the Empty canvas template.

You can choose one of the following methods to create a form configuration from the Labelling component:

  • Create manually: build a layout manually using the Basic or Layout components.

  • Generate from model: the layout is generated automatically based on the training set of a selected model. When the model does not include a training set, the labels for the form layout are taken from the model's output, in which case the layout is less precise.

    You can add or remove the model-generated fields, move them within the form, and edit their settings.

  • Generate from template: the layout is generated automatically based on the output of a selected template model. In this case, you need to select a template and its version.

    You cannot modify or view the template-based layout from Form Builder. To view the resulting form or make changes, follow the View template link on the right panel.

Other important settings to configure are as follows:

  • Property name: enter the name of a column with the task data from an input CSV file. Typically, it is meta_info_json.
  • In the Left panel width field, set the width (in percent) of the input data preview area relative to the labelling area. The value in the Right panel width field changes automatically.
  • Hidden: select the checkbox to hide the component. Hidden components are not displayed but are still part of the form's JSON and data submission. To configure conditional show and hide, go to the Logic tab.

To add fields for labelling, drag the components from the Basic or Layout menus to the drop area on the right and configure settings as appropriate.

Line item​

Expand to learn more

You can add the Line item component to other form components, for example, Data grid or Edit grid, for users to input data. The settings are similar to those of the grid components.

note

By default, columns in a Line item table are set to have identical minimum widths: the Equal column width checkbox is selected, and all Column Minimum Width values are 120 px. The preset minimum width guarantees that columns resize dynamically as per current UI behavior but never below the set minimum value.

To set the column width in the Line item component, see Design Manual Task forms | Set column width in Line item table.

Panel​

Expand to learn more

Use the Panel component to wrap groups of fields with a title and styling.

Configure the following settings:

  • Title: enter the title to be displayed at the top of the panel.
  • Theme: select a theme from the dropdown. Available options are Default and Primary. The selected theme's class is added to the wrapper div.
  • Collapsible: select the option to make the component collapsible. Thus, you can improve the usability of a multi-component form by allowing users to hide fields they do not need while filling in another section of the form.
  • Initially collapsed: select the option to make the panel collapsed on the form load. The setting is visible only if Collapsible is checked.

Panel list​

Expand to learn more

Use the component to set up a Data Grid on a static (summary) tab for working with data from the dynamic tabs of your template.

The Panel list component contains one Panel component by default. You cannot remove this panel, but you can add more panels based on input objects.

On the Display tab, configure the following settings:

  • Panel title: specify the title to apply to child panels. You can set up a static title or a dynamic one from input JSON. The dynamic title is a path to an object that is generated based on a grouping key, for example, {{data.status_title[status]}}.

  • Description: select the option to add an automatically generated description, for example, X of total records. In the Type dropdown, select Count or Custom. If you select Custom, in the Panel description field, specify a description for the child panels. The description can be static or dynamic. A dynamic description is a path to an object that is generated based on a grouping key, for example, {{data.status_description}}.

  • Treat input values as defaults: select the option to treat input data as modifiable default values. This allows users to add or remove panels even when input data is provided.

  • Disable adding panels: select the option to hide the Add panel and Remove panel buttons.

  • Add panel button text: enter the name for the Add panel button. The option is available only when Disable adding panels is unchecked.

    When rendered, you can add new panels using the Add panel button and remove them by clicking the Remove button.

  • Enable sorting: select the option to define data points used for sorting (Sort by field) and the method (Sort order). Available sort order options are Ascending, Descending, and Custom.

    Custom allows you sort by custom tags or values, for example, "Needs review", then "Blocked", then "Completed". If you select Custom, specify your custom sort order in the related field.

    To add more sorting options, click Add another.

  • Collapsible: select to make the child panels collapsible.

  • Initially collapsed: select to show the child panels originally collapsed.

On the API tab, pay attention to the following settings:

  • Data path: specify a path to your list for nested input data. You can set a path to a property in a single record for sorting records into different panels. For example, a single record is a document or an article, and the property refers to a status.

  • Split dynamic input by array: select the option to display each element in an input data array as its own separate panel. If selected, the Apply grouping option is disabled.

  • Apply grouping: select the option to group child panels by key. If selected, the Split dynamic input by array option is disabled.

    • Group by key: provide an attribute to filter data and group the panels accordingly.

    • Sort by: select the sorting order. Available options are Ascending, Descending, and Custom. If Custom is selected, in the Custom sort field, enter custom sort attributes and press Enter to add them to the field.

tip

You can include one Panel list into another Panel list.

PDF viewer​

Expand to learn more

Use the component to enable the display of original PDF documents without OCRing.

Expand to learn more

Use the component when you need to display a popup dialog. The popup is only visible in the Builder mode and will not appear in Renderer.

To show a popup during runtime, trigger it using the Button component. In the button's settings, select the Open Dialog action. This action will prompt you to specify Dialog API that refers to the API key of the Popup component you want to open. Clicking the button displays the popup matching the specified API key.

Configure the following settings:

  • Dialog name: enter a name for the dialog. This name appears as the modal title.
  • Dialog width, % and Dialog height, %: specify the popup's width and height as percentages.
  • API > Property name: define the property name of the API endpoint.

Table​

Expand to learn more

The Table component allows creating a table with columns and rows where you can embed additional components.

Configure the following settings:

  • Number of rows: define the number of rows in the table.
  • Number of columns: define the number of columns in the table.
  • Clone row components: clone the components that are in a cell of one of the columns to other cells of that column. It can be useful to add multiple rows with the same content.
  • Cell alignment: set up alignment for the table cells. The options are as follows: Left, Center, and Right.
  • Striped: add striped shading to table rows.
  • Bordered: add visible borders for the table.
  • Hover: highlight a row on a mouse hover.
  • Condensed: condense the size of the table, making it take up less space.

Tabs​

Expand to learn more

The Tabs component allows creating tabs used to group various sets of components. To switch between tabs, use a navigation bar with tab buttons, each opening an appropriate tab with a set group of components. Only one tab at a time is displayed in a rendered form.

The Tabs configuration allows adding, configuring, reordering, and removing tabs. Click Add Another to add a tab and specify a label for each added tab.

Edit component​

To edit any component settings, select the component, hover over it and, in the top-right menu, click the cogwheel button to open the Settings page. The component settings open in a new window.

Make required changes and click Save.

You can also edit a JSON schema of any form component. To do that, hover over a component and click the Edit JSON icon.

Edit a JSON schema and click Apply. Select the Full Schema checkbox to view the full schema.

Copy component​

To copy a form component, select the component, hover over it and, in the top-right menu, click the Copy button.

A Paste button appears. Click it to paste the form component.

The copied form component appears below.

Move component​

To move a form component, select the component, hover over it and, in the top-right menu, click the Move button.

Then, move the component to the needed place on the main canvas. The form component is moved.

Delete component​

To delete a form component, select the component, hover over it and, in the top-right menu, click the Remove button. The form component is deleted.

Be careful with deleting a component that contains several form components. Removing this component will also remove all of its children. To finish the deletion, click OK on the confirmation message window.