Edit

Form Builder

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

Form Builder generates two types of layouts: Form and Wizard. Select a layout type 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:

• Templates
• Basic
• Layout

Add component

To add a form component to a form, perform the following steps:

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

   

2. Specify the component properties.

   important

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

   • Templates
   • Basic
   • Layout

   1. The typical Display settings for basic and layout components are as follows:

      

      • Label: specify a name or a title for the component.
      • Placeholder: specify placeholder text that appears when the field is empty.
      • Description: enter text to show below the input field.
      • Tooltip: add a tooltip to show to the side of the field.
      • Prefix: enter text to show before the field, for example, $ for money.
      • Suffix: enter text to show 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.
      • 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.

   2. The typical Data settings for basic and layout components are as follows:

      • Multiple Values: select to add multiple values in the field. The Add Another button allows to create additional fields for the component.
      • Default Value: set the default value for the field before user interaction. The value overrides the Placeholder text.
      • Storage Type: select a type to store the data. Available storage types are as follows: Autotype, String, Number, Boolean, Object.
      • Protected: select to assign the field for input only.
      • Database Index: set the field as an index within the database. It increases performance for submission queries.
      • Input Format: force the field output to be sanitized in a specific format: Plain, HTML, Raw (Insecure).
      • Redraw On: redraw the component if another component changes. Select the option in case of interpolating the component parts like the label.
      • Clear Value When Hidden: select to clear the value when a field is hidden.
      • Allow Manual Override of Calculated Value: select to allow to manually override the calculated value.

   3. Specify the API settings if needed:

      • Property Name: by default, generated by the Title field.
      • Field Tags: tag the field for use in custom logic.
      • Custom Properties: set any custom properties for the component. Specify Key and Value for each property.

   4. Configure viewing conditions on the Conditional tab. The conditional logic is based on the following rules:

      • You can hide or display any form component.
      • The component visibility depends on another component defined within the form.
      • The logic is activated when the configured field contains the plaintext value defined in the settings.

      There are two kinds of logic to configure:

      • Simple: set the Display value to true or false.
      • Advanced: apply actual JavaScript for any combination of conditions, for example, for components within Multi doc, Data grid, or Edit grid that can be dynamically created at runtime. Set the Show value to true to display a component or false to hide it.

   5. Apply the Layout settings (in addition to layout components) to configure the arrangement of components for rendering in PDF. Specify a margin amount in the Left, Top, Width, or Height fields. For proper rendering, specify a valid CSS measurement input, for example, 10px.

3. Click Save. A result of the operations above is also generated as a JSON schema representation of the form, which is available 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 state template if you don't need to work with any documents in your configuration window.

Specify the name of a component in the Label field. Here, you can type in any value, as it will not be used anywhere. Though, the value is required.

To continue building 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.

Configure the following settings:

• Label: specify the name of a component. Here, you can type in any value, as it will not be used anywhere. Though, the value is required.

• Tabs: specify the tabs for the multi-doc template.

  • For Label, enter the tab name.
  • Select the Dynamic tab checkbox. If you leave it unchecked, you add a static tab, the one that's not going to change whatever input data you have.

• Type of view: select Horizontal or Vertical to set how the tabs are to be arranged relative to each other when rendered. For the Vertical view type, you can also set the tabs to be grouped by document types. For that, click Apply grouping 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: add the data path value if the input document data set is nested deep.

  

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.
• Left Panel Width, %: specify the left panel size in %.
• Right Panel Width, %: specify the right panel width in %.

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. For more details, see Design Manual Tasks via Task Designer Operation | Single-document Manual Task.

Add basic components

A basic form component collects data and displays it within the user interface.

note

For general settings applicable for all basic components, see Add form component. The instructions below allow configuring settings specific to selected basic components.

Button

Expand to learn more

Buttons are added for users to perform various actions in the form.

Configure the following settings:

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

  

• Save on Enter: press Enter 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 is used to prevent submitting a form with invalid data.

Date/Time

Expand to learn more

Use the Date/Time component to input 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 for a user to manually enter a date.

• Format: specify format used to display the field's 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.

• Use Input to add moment.js for minDate: enable to use input for moment functions instead of the calendar.

• Minimum Date: specify a value of the date that the field's value must follow.

• Use calendar to set minDate: enable to use the calendar to set the minimum date.

• Use Input to add moment.js for maxDate: enable to use input for moment functions instead of the calendar.

  • Maximum Date: specify a value of the date that the field's value must proceed.

• Use calendar to set maxDate: enable to use the calendar to set the maximum date.

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

• Custom Disabled Dates: disable dates by a function. For more details, see Disabling dates.

• Disable weekends: select to disable weekends.

• Disable weekdays: select to disable weekdays.

Number

Expand to learn more

Use the Number component whenever a field should be limited to a type of the number value.

Configure the following settings:

• Use Thousands Separator: select for the component value to separate thousands 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: change the default Decimal Symbol for the Number component. This is a hidden setting. To configure it, in the Number component 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 a user to select only one value from the list of options.

Configure the following settings:

• Inline layout: layout radio buttons horizontally instead of vertically.

  

• Values: specify values to be selected in the field. For each value, specify Label, Value, and Shortcut.

  

Select

Expand to learn more

The Select component displays a list of values in the dropdown list to users.

Configure the following settings:

• Unique Options: display only unique dropdown options.

  

• Data Source Type: select the type of data the options are pulled from.

  

• Data Source Values: set values to be selected in the field. The Value column is stored in the database, with its Label 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 boxes

Expand to learn more

The Select boxes component allows to select multiple values from the list of options.

Configure the following settings:

• Inline Layout: layout checkboxes horizontally instead of vertically.

  

• Values: specify values to be selected in the field. The Value column is stored in the database, with its Label shown to users.

  

Tags

Expand to learn more

You can use multiple or single tags to categorize items.

Text area

Expand to learn more

The Text area component is a multi-line input field that allows for longer text in comparison 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 Counter: select to show a live count of characters.

  

• Text Case: change the value case of 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 options are the same as for the Text area component, including:

• 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.
• Answer Type: define an input field type and format. The options are as follows:
  • ADDRESS_LINE
  • CITY
  • COMPANY_NAME
  • COUNTRY
  • CURRENCY
  • IDENTIFIER
  • CUSIP
  • DATE
  • EMAIL
  • FULL_ADDRESS
  • IBAN
  • LINE_ITEM
  • NUMBER
  • PERSON_NAME
  • STATE_PROVINCE
  • SWIFT
  • TEXT
  • UPC_CODE
  • ZIP_POSTAL_CODE
  • OTHER

Add layout components

Use layout components to change the general layout of forms.

note

For common settings applicable for all layout components, see Add form component. The instructions below allow configuring settings specific to selected layout 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 a 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 rearrange the columns using the drag-and-drop feature without a need to make everything from scratch.
• Auto adjust columns: select to adjust all the other column position 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 that are 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>, and <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 to add multiple components to a line item grid. Additionally, you can add any number of grids in a form, for example, when you add or duplicate multiple field sets.

Below is a list of the Data grid main settings:

• Disable Adding / Removing Rows: select to hide the Add Another and the Remove Row buttons.

• Conditional Add Button: specify a condition when the Add Button is displayed.

• Add Another Text: set the text of the Add Another button.

• Add Another Position: specify a position for the Add Another button regarding the Data Grid location. You can place the button at the top or at the bottom of Data Grid, or in both places at once.

• Allow Reorder: select to reorder rows by drag and drop.

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

• Enable Row Groups: select to separate 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 when initialized.

Edit grid

Expand to learn more

The Edit grid component is used to replicate a table-like structure when it comes to the capture and display of form data. You can add multiple components inside Edit Grid. Additionally, you can add any number of grids in a form, for example, when you add or duplicate multiple field sets.

Below is a list of the Edit Grid 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.

• Header, Row and Footer Templates: customize the grid using basic JavaScript. On the Templates tab, you can modify the display of components shown 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 title of an area of the form. You can put it inside layout components or in between other related components.

Configure the following settings:

• Legend: specify a legend that appears for the component in the 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>, and <style>, and attributes like onmouseover or onload. To insert more complicated HTML in your form, use the Content component.

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

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 the form that has many components, 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 collapsed on the form load. The setting is visible only if Collapsible is enabled.

Table

Expand to learn more

The Table component allows creating a table with columns and rows where you can add 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 of which opens an appropriate tab with a set group of components. Only one tab at a time displays 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 a 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 Delete button. The form component is deleted.

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