Skip to main content
Version: 10.2.8

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 Save. The result of the operations above is also generated as a JSON schema representation you can find at the bottom part 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 on the left 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.

      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 as the first tab 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 tabs to be grouped by document types. Click Group tabs and specify the doc_type grouping key.

  • Property Name: specify the 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 dynamic tab. For more details, see Design Manual Tasks via Task Designer Operation | Multi-document Manual Task.

Single doc​

Expand to learn more

Single doc is used for building Manual Tasks configuration forms if you have only one document to process in your Manual Task.

Configure the following settings:

  • Property Name: enter the name of a column with the task data from an input CSV file. Typically, it is meta_info_json.
  • Type of view: select the markup style. You can choose between Vertical and Horizontal. The Horizontal view is recommended for Excel or large tables.
  • Left Panel Width, %: specify the left panel size in %.
  • Right Panel Width, %: specify the right panel width in %.
  • 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 tagging values, select components from the Basic or Layout menus on the left, drag them to the drop area on the right, and set as appropriate.

When you add a Basic component into a Single doc template, it has the Allow labelling attribute checked by default so that the component can be used for tagging.

Colored labels are displayed next to components with the enabled Allow labelling option.

If you uncheck Allow labelling:

  • Text selected in a document cannot be set as a value to a field. Once you place a cursor inside the field, the text selection is discarded.

  • The Hotkey field for selecting tagging hotkeys is hidden.

  • A colored label is not displayed next to the component in Builder and Renderer.

tip

For more details, see Design Manual Tasks via Task Designer Operation | Single-document Manual Task.

Add Basic components​

A Basic form component collects and displays data in the UI. 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.

Configure the following settings:

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

  • Save on enter: allow 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 of the 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.

Configure the following settings:

  • Default value: specify the default value. You can put new Date(); for the current date or use Moment.js functions to set the date to a specific date, for example, moment().add(50, 'days').calendar();. You can use the add or subtract function to go forward or backward in dates.

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

  • Format: specify the format ufor displaying the specified date.

  • Shortcut buttons: specify the buttons to show above the calendar:

    • Label: enter the button name.
    • onClick: define the date and time to be set when a user clicks the button, for example, date = new Date().

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

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

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

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

Radio​

Expand to learn more

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

Configure the following settings:

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

  • Values: specify options for selection. For each value, specify Label, Value, and Shortcut.

Select​

Expand to learn more

The Select component allows displaying a set of values in a drop-down list.

Configure the following settings:

  • Unique options: select if you want only unique options to be displayed in a drop-down box.

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

  • 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 static list of items provided.

  • Search threshold: specify a threshold when the match algorithm gives up, for example, 0.0 requires a perfect match, while 1.0 matches anything.

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.

Configure the following settings:

  • Label: set a title for the drop-down menu.

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

  • Inline Layout: select to arrange the checkboxes for selection horizontally instead of vertically.

  • Values: specify values to be selected in the field. The Value column data is stored in the database, and 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.

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 specific to your needs.

  • 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 cunter: select to show a live count of characters.

  • Text case: select to set the type of case allowed for entered data. The options are as follows: Mixed (Allow upper and lower case), Uppercase, Lowercase.

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, offset, push and pull settings 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 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 the 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.

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.

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.

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

  • Add Another Text: enter text for the Add Another button.

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

Configure the following settings:

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

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

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

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.

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

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.

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

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 if you want to add many 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 Save. 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 removing 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.