Skip to main content
Version: 10.2.9

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 Tasks via Task Designer Operation | 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.

Date/Time​

Expand to learn more

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

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 specified date.

On the Date tab, specify the following:

  • Enable date input: select to enter dates for the field.
  • Disable specific dates or dates by range: add dates to a blacklist, for example, 2025-02-21.
  • Custom disabled dates: disable dates using a function. For more details, see Disabling dates.
  • 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. Choose a date from the drop-down box or use Moment.js functions to set a default value.

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

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

  • Use input to add moment.js for minDate: allows using input for Moment.js functions instead of the calendar.

    • Minimum date: the setting is available after you select Use input to add moment.js for minDate. In the field, specify a value after which the date count starts.

  • Use calendar to set minDate: allows using the calendar to set the minimum date. Mutually exclusive with the Minimum date setting.

  • Use input to add moment.js for maxDate: allows using input for Moment.js functions instead of the calendar.

    • Maximum date: the setting is available after you select Use input to add moment.js for maxDate. In the field, specify a value that the date count must always precede.

  • Use calendar to set maxDate: allows using the calendar to set the maximum date. Mutually exclusive with the Maximum date setting.

Number​

Expand to learn more

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

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

  • Use thousands separator: select if you want the thousands in a component value to be separated by a local delimiter.
  • Decimal places: set the maximum number of decimal places for the values in the field.
  • Require decimal: select to always show decimals for the field, even if trailing zeros.

One more setting is essential—Decimal symbol. The hidden setting lets you change the default Decimal symbol for the Number component. To configure it, in the Number component's JSON schema, add the following line:

"decimalSymbol": ","

After you save the changes, the Number component changes the default decimal to the designated symbol.

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.

Radio​

Expand to learn more

The Radio component allows users 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 displaying a set of values in a drop-down list.

On the Display tab, select Unique options if you want only unique options to be displayed in a drop-down box.

On the Data tab, configure the following settings:

  • Data source type: select where the drop-down list options are pulled from.

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

  • Allow adding custom value: select the checkbox to allow users to add custom options to the drop-down list. When the component is rendered with the checkbox selected, users will be able to add one or more custom options by typing them in the search line and pressing Enter:

    After that, the specified custom option becomes permanently available in the drop-down list:

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

  • Refresh options on: refresh data when another field changes.

  • Refresh options on blur: refresh data when another field is blurred.

  • Clear value on refresh options: clear the component value when the Refresh on field is changed.

  • Enable static search: select to allow for searching within the provided static list of items.

  • Search threshold: specify a threshold when the matching algorithm gives up. For example, 0.0 requires a perfect match, while 1.0 permits any match.

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.

Select boxes​

Expand to learn more

The Select boxes 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 the 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.

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.

  • Placeholder: specify placeholder text that appears when the field is empty.

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

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 for adding a longer text as compared to Text field.

On the Display tab, configure the following settings:

  • Rows: specify the number of rows visible in the Text area component.
  • Editor: turn the text area into the WYSIWYG editor user interface of your choice, for example, ACE, CKEditor, or Quill.
    • Editor settings: modify the WYSIWYG editor JSON configuration to customize the user interface to your needs. The setting is displayed only after you choose an editor.
  • Auto expand: select to auto-expand the component height, depending on the number of characters.
  • Show word counter: select to show a live count of words.
  • Show character counter: select to show a live count of characters.

On the Data tab, select an option in the Text case list to set the type of case allowed for entered data.

Text field​

Expand to learn more

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

The settings are the same as for the Text area component, plus the following:

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

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:

  • 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.

  • 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.

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

  • Equal column width: select to make the column sizes equal in width.

  • 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 Tasks via Task Designer Operation | 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.

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>.

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 Tasks via Task Designer Operation | Set column width in Line item table.

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.

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: specify the theme. Select one of the options to have the class added to the wrapper div.
  • Collapsible: make the component collapsible. Thus, you can improve the usability of a multi-component form, allowing users to hide the fields they don't want to see while filling in another section of the form.
  • Initially collapsed: select to make the panel collapse 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 applied to child panels. You can set up a statiс title or a dynamic one from input JSON. The dynamic title is a path to an object that is generated based on the grouping key, for example, {{data.status_title[status]}}.

  • Disable adding panels: uncheck to show the Add panel and Remove panel options.

  • 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.

  • 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.

  • Apply grouping: check to group the child panels by key. In the Group by key field, provide the attribute to filter data and group the panels accordingly.

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.

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.