Form Builder

54 minute read Last updated on September 18, 2024

The Form Builder provides an intuitive, drag-and-drop interface for creating custom forms you can include in Dispatcher Stratus workflows. A form can be anything from a single-field, Yes or No question (“Who wants to go to lunch today?”) to a complex, multi-page, multi-level questionnaire such as a job application. You add your content, style it using Form Builder’s extensive set of design tools, and then associate it with node in a workflow, which outputs the form to your desired location such as a cloud storage site. When combined in a workflow with a People node, you can route forms to team members or groups, where it becomes a job. The job can then be completed or assigned to another team member. Once completed, a notification is generated and the team can move on to the next step in the workflow.

Notes:

  • Information associated with a form, such as default values, is available within the workflow as metadata, which can be used in a variety of ways.

  • Since a single workflow can contain multiple forms, each metadata key must be unique. If a workflow contains two or more identical metadata keys, each will override the previous one; only the last value will be saved.

Accessing the Form Builder

To begin building forms, you must first access the Form Builder tool. Note that to access the Form Builder, you must be a tenant admin.

To access the Form Builder, do the following:

  1. Log into your Dispatcher Stratus account.

  2. From the Navigation pane, select Forms. The Form Management page appears:

    Form Management

  3. To create a new form, select Add New Form to open the Form Builder. To open an existing form, select the associated Edit icon in the Actions column.

    Note: To edit an existing form, it must be in an unpublished state.

Form Builder Templates

The Form Builder provides two templates for creating forms.

Standard Form

Use this template to quickly build linear forms for use on many common devices, where you can enter identifying information about your scanned documents, choose processing and destination options, and more.

Standard Form

Using a Standard Form

Standard forms are designed to be accessed at the MFP. At the MFP, a Standard Form will look like the following illustration:

Standard Form at MFP

Advanced Form

Use this template to create web forms you can share with team members across workflows and even on a third-party website. Web forms created from the Advanced form template have a fixed layout and configuration so that team members can provide requested information without altering the structure of the form. The template provides additional tools and aesthetic options, enabling you to create forms to your exact specifications.

Includes additional tools and aesthetic options, as well as multiple target screens, each of which has a different set of canvas sizes and resolutions.

Advanced Form

Important! Advanced Forms are intended to be accessed via computer, mobile device, tablet, etc; they are not intended to be accessed via an MFP, and that use case is not supported by Dispatcher Stratus due to limitations of the MFP.

Note: The Advanced form template is available only for Dispatcher Stratus Enterprise tenants.

Accessing Advanced Forms

Advanced Forms are designed to be accessed via computer or mobile device. As Advanced Forms come with many different stylization options, you can make your forms appear however you would like. Here are some examples of Advanced Forms:

Advanced Form

Advanced Form

Advanced Form

Creating a New Form

Before you can begin adding fields to your form, you must configure certain aspects of the form. Do the following:

  1. Enter a name for the form. The Continue button activates.

  2. Select the form type by adjusting the toggle switch:

  3. Select a target screen and a canvas size/resolution for displaying the form.

    a. For a Standard form, the Form Builder will automatically style the form to fit modern MFP screens.

    b. For an Advanced form, select a target screen and a canvas size/resolution for displaying the form.

    Create New Form

    You have the following options:

    Form type Target screen Canvas size/resolution
    Standard MFPs Standard Forms are designed to display on Konica Minolta MFPs
    Advanced Mobile/Tablet Large Mobile 430 x 932 px
    Small Mobile 375 x 812 px
    Large Tablet 1440 x 960 px
    Small Tablet 1024 x 768 px
    Advanced Computer/Paper Letter 8.5" x 11"
    Tabloid 11" x 17"
    A4 8.3" x 11.7"
    A3 11.7" x 16.5"
    Advanced Custom Pixels, Inches, Centimeters, Millimeters, or Points
    Portrait or Landscape
  4. Select the Continue button to begin adding fields to your form.

Form Builder

The following sections provide detailed information about the Form Builder:

The following buttons appear on the Footer bar:

  • Cancel - Close the Form Builder, abandoning any pending changes.

  • Save - Save the form and continue editing.

  • Save and Close - Save your changes to the form, and close the Form Builder. The form will now be accessible on the Form Management page and in the Form Selector node (if it had previously been published).

This vertical bar appears on the far left of the page. It contains icons, including the following:

Validate

Validate

Select the Validate icon to check the form for logic errors, such as missing queries or improperly configured fields. A form must be successfully validated before it can be published on the Form Management page.

If the form passes validation, you will receive a notification. If the form does not pass validation, the issues will be described in the Error List that appears below the Form Builder Canvas.

Fields Panel

This panel appears on the left side of the screen and provides links to the Standard Index Fields. The list of fields available for Standard forms differs slightly from the list for Advanced forms. The Form Name field appears on the panel’s header bar. To edit the form name, select the Pen icon. To pin/unpin the panel, select the Pin icon Pin icon on the header bar.

The following illustration shows the Fields panel for an Advanced form called Holiday Questionnaire:

Fields Panel

Standard Index Fields

You can add the following fields to your form:

Icon Field Description
Text Line Text Line Standard: Allows the user to input a single line of text about the scanned document(s), such as a document name or vendor name.
Advanced: Allows for the input of a single line of text on the form, for example, a document name or vendor name.
Text Area Text Area Standard: Allows the user to input multiple lines of text about the scanned document(s), such as document names or vendor names.
Advanced: Allows for the input of multiple lines of text on the form, for example, multiple document or vendor names.
Number Number Standard: Allows the user to input a number, such as an invoice number or user ID.
Advanced: Allows for the input of a number on the form, for example, an invoice number or user ID.
Checkmark Checkmark Standard: Provides the user with a True/False option. For example, a user can choose whether or not to convert the document to Searchable PDF format.
Advanced: Allows for a response to a True/False option on the form, for example, whether or not to convert the document to Searchable PDF format.
Radio Button Standard: Allows the user to choose an item from a group.
Advanced: Allows the user to choose an item from a group.
Button List Standard: Allows the user to choose an item from a group of buttons.
Advanced: Allows the user to choose one or more items from a group of buttons.
Drop-down Drop-down Standard: Allows the user to choose an item from a list.
Advanced: Allows for a response to a drop-down list on the form.
Date and Time Date and Time Standard: Allows the user to associate the date and/or time with the scanned documents.
Advanced: Allows for the input of the date and time on the form.
Hidden Hidden Standard: Can be used to store the results of other fields or default values that need to be associated with the document but do not need to be displayed to the user.
Advanced: Can be used to store the results of other fields or default values that need to be associated with the document but do not need to be displayed to the user.
Label Label Standard: A label is static text to be displayed on the form.
Advanced: Allows for the input of a label to appear on the form. Label fields are static, unlike the Text Line and Text Area fields, which are dynamic.
Page Break Page Break Standard: A page break divides the form into different screens.
Advanced: Not available.
Signature Standard: Not available
Advanced: A signature field allows you to add a new or saved signature to a form.
Attach File Attach a file Standard: Not available.
Advanced: Allows for the attachment of a file to the form.

Working With Form Fields

For fields added to a Standard form, you have the following options:

  • Identify a field - Hover over the icon in the upper-left corner to display the field type.

  • View variable name - Select a field to display the variable name associated with the field in the lower-right corner.

  • Rearrange forms - Select the six-dot icon on the left side of the field and drag to the desired location.

  • Duplicate a field - Select the Create a duplicate field icon in the upper-right corner of the field.

  • Delete a field - Select the Delete field icon in the upper-right corner of the field.

Standard form field options

After a field has been added to the canvas, you can select it to view the field configuration options in the Properties panel on the right.

Form field options

Note: If you right-click on a field in an Advanced form, a menu appears with options such as Clone and Delete.

Adding a Text Line Field

Text Line Field

To add a text line field to your form, drag and drop the Text Line icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the text field. The Friendly Name will always be visible to users who access the form.

  • In the Default Value field, specify default text that will appear in the field when the form first loads.

  • In the Min Length and Max Length fields, specify a minimum and maximum number of characters that can be entered.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory input field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Mask input - Mask any text entered by the user.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Text Area Field

Text Line Field

To add a text area field to your form, drag and drop the Text Area icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the text field. The Friendly Name will always be visible to users who access the form.

  • In the Default Value field, specify default text that will appear in the field when the form first loads.

  • In the Min Length and Max Length fields, specify a minimum and maximum number of characters that can be entered.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory input field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Number Field

Number Field

To add a number field to your form, drag and drop the Number icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the number field. The Friendly Name will always be visible to users who access the form.

  • In the Default Value field, specify the value that will appear in the field when the form first loads. The field will be left blank if a default value is not given.

  • In the Min Value and Max Value fields, specify a minimum and maximum number of numbers that can be entered.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory input field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Mask input - Mask any text entered by the user.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Checkmark

Standard Form:

Checkmark Field

Advanced Form:

Checkmark Field

To add a checkmark box to your form, drag and drop the Checkmark icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the checkmark options. If one is provided, the Friendly Name will be visible to the users on the form.

  • In the Checkbox list options area, enter the text and values that will appear in the drop-down list. For more information, see the Manually Adding List Items section below. (Advanced only)

  • In the Actions area, you can specify the following, based on which options you select:

    • Check by Default - Set this option as automatically selected. (Standard only) If this option is selected along with Button List (below), then the “Yes” option will be selected by default.

    • Required - Set as a mandatory field. Required fields are marked with an asterisk (*). (Advanced only)

    • Read only - Set as a read only field that cannot be changed.

    • Multi-Select - Allow for multiple checkmark fields to be selected. This also affects whether you are able to select one or more list items by default when configuring the field in the Form Builder. For more information, see the Manually Adding List Items section below. (Advanced Only)

    • Buttons List - Provides the field with buttons instead of checkboxes. (Standard only)

    • Align vertical - Keep all checkmark options in a vertical line. (Advanced only)

    • Exclude from metadata - Do not include the variable as metadata associated with the document. Metadata from this field cannot be accessed, even by typing in the metadata key manually.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear below, in which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Radio Button

Radio Button Panel

To add a radio button to your form, drag and drop the radio button icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the check box. The Friendly Name will always be visible to users who access the form.

  • Customize the labels for the buttons that will appear in the True Button Label and False Button Label fields. (Standard only)

  • In the Checkbox list options area, enter the text and values that will appear in the drop-down list. For more information, see the Manually Adding List Items section below. (Advanced only)

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory field. Required fields are marked with an asterisk (*).

    • Read only - Set as read only buttons that cannot be changed.

    • Multi select - Allow the user to choose more than one item from the list at a time.

    • Align vertical - Keep all buttons in a vertical line.

    • Buttons list - Selecting this option provides the user with two buttons, labeled using the text from the True Button Label and False Button Label fields, rather than a single checkbox.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Button List

Button List Panel

To add a series of buttons to your form, drag and drop the Button List icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the drop-down list. The Friendly Name will always be visible to users who access the form.

  • In the Button list options area, enter the text and values that will appear in the button list. For more information, see the Manually Adding List Items section below.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Align vertical - Keep all buttons in a vertical line.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Drop-down List

Standard Form:

Drop-down Field

Advanced Form:

Drop-down Field

To add a drop-down list to your form, drag and drop the Drop-down List icon to the Form Builder Canvas area. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the text that will appear above the drop-down list. The Friendly Name will always be visible to users who access the form.

  • In the Drop-down list options area, enter the text and values that will appear in the drop-down list. For more information, see the Manually Adding List Items section below.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Multi select - Allow the user to choose more than one item from the list at a time.

    • Buttons list - Provides the field with buttons instead of checkboxes.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Date and Time Field

Date and Time Panel

To add a field for the user to enter the date and/or time, drag and drop the Date and Time icon to the Form Builder Canvas area. This information will be associated with the file as metadata. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the label you want to appear above the Date and Time field. The friendly name will always be visible to users who access the form.

  • From the Return Format drop-down list, choose the format to use.

  • In the Default Value field, choose or enter a default value for the field. You can click on the calendar icon to access a pop-up calendar or time clock as in the following illustration.

    List Values

  • If you check the Default to now box, the current date/time will be displayed.

  • If you would like to specify a specific date and time, enter it in the Add Date and Time field.

  • In the Default Range Min Value and Max Value fields, you can specify minimum and maximum values for the date or time, using the calendar icons to access calendar or time clock pop-ups. You will not be allowed to scan outside of the specified value range.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

When used in the Advanced Form Builder, you will also have access to many additional stylization options.

Adding a Hidden Field

Hidden Field Panel

To add a hidden field to your form, drag and drop the Hidden icon to the Form Builder Canvas area. Hidden fields are used as temporary variables to store values that can be reused in the form. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Default Value field, specify the value that will appear in the field when the form first loads.

  • In the Actions area, you can specify the following, based on which options you select:

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

You will also have access to many additional stylization options.

Adding a Label

Label Field Panel

To add static text to the form, drag a Label icon onto your work area. Default text of “Label goes here” will appear. Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Friendly Name field, enter the label you want to appear in the Label field. The friendly name will always be visible to users who access the form.

You will also have access to many additional stylization options.

Adding a Signature

To enable recipients of a form to add an electronic signature to the form, drag a Signature icon onto your work area. Default text of “Click here to sign” appears in the field. If you select the field, the Field Properties panel displays your customization options for the Signature field.

Field Properties panel - Signature field

You have the following options:

  • Variable Name - A default variable name appears. You can edit this name to be more descriptive of the field’s function and more identifiable if you need to reference it later. All variable names in a form must be unique; spaces are not permitted. Variable names are internal to the form and not visible to users of the rendered form.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    Note: If multiple forms are available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

    Note: When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

  • Friendly Name - Enter the label you want to appear above the Signature field. The friendly name will always be visible to users at the MFP.

  • Actions - Specify any of the following:

    • Required - Set as a mandatory input field. Required fields are marked with an asterisk (*).

    • Read only - Set as a read only field that cannot be changed.

    • Exclude from metadata - Do not include the variable as metadata associated with the document.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

  • Select Signature Input - Specify the input method(s) you want to make available to the form’s respondents. You have the following options:

    • Draw - Use a finger or cursor to draw a signature.
    • Type - Use a keyboard to type a signature. If you select this option, the Field Properties panel expands to display the Text Styling options.
    • Upload - Browse for an existing electronic signature stored on a connected device. The Signature field supports .png and .jpg images up to 2 MB.

Notes:

  • The Advanced Form Builder provides many additional stylization options.
  • The Form Builder supports up to ten Signature fields within a single form.
  • The Signature field scales the size of any added signature to the space provided. This can impact readability if the field is configured to be extremely large or small.
  • After a Signature field has been completed, it cannot be edited within one of the People Nodes except by the person who added the signature (provided they have permissions for the People Node).

Profile Signature

The Profile page provides tenant members with the ability to create a personal electronic signature for use in Dispatcher Stratus forms that contain a signature field. For tenant members who enable their profile signature in their tenant profile, the Profile option becomes available for selection on a rendered form. This option is available only if the signature is enabled on the user’s Profile page. Since the option is activated via the Profile page, it is not a selection option at the Select Signature Input field described above.

The following illustration of the Signature window shows all available options as they appear on a rendered form, with the Profile option selected and displaying the user’s profile signature:

Signature window

Notes:

  • The profile signature link accesses the Profile page, where the user can modify their profile signature.

  • Your profile signature is not affected by any signatures you create and submit in a rendered form. You can only create or edit your profile signature on the Profile page.

Attaching a File

Advanced Forms Only

Attach Files Panel

To add a file attachment point to your form, drag and drop the File Attachment icon to the Form Builder Canvas area.

Note: This form field works only with the following collection nodes:

  • External Form
  • Internal Form

Select the newly created field to customize its properties in the Field Properties panel on the right. You can do the following:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

    The variable name will be listed in the Field Properties panel on the right side of the page.

  • In the Friendly Name field, enter the label you want to appear above the Attach File field.

  • In the File Types field, specify which document types you would like to accept. By default, the field is limited to pdf, tif, png, and jpg files. If you set the field to empty, it will accept any file type.

  • In the Max File Size field, specify the maximum size document, in MB or KB, you would like to accept.

  • In the Upload Multiple Files box, you can elect to allow one or more than one file upload.

  • In the Actions area, you can specify the following, based on which options you select:

    • Required - Set as a mandatory input field. Required fields are marked with an asterisk (*).

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

You will also have access to many additional stylization options.

Adding a Page Break

Standard Forms Only

Page Break Properties Panel

To add a new page to the form, drag a Page Break icon onto your work area.

You can do the following to modify a Page Break:

  • In the Variable Name field, enter an internal, identifying name for the field that can be referenced by other nodes in the workflow or other fields on the form. The variable name will not be visible to users. Spaces are not allowed. All variable names in a form must be unique.

    This variable name can be referenced later by other nodes in the workflow or other fields using the following syntax: {form:[name of variable]} (e.g., if the variable name is ‘name,’ the variable name could be referenced in other nodes using this syntax {form:name}).

    When building a Standard form, the variable name will be listed to the bottom right of the field in the Form Builder’s work area.

    Note: If there are multiple forms available within a single workflow, the metadata syntax must be manually modified to differentiate between forms. For more information, see the Form Metadata section.

  • In the Page title field, enter the text that will appear at the top of the screen.

  • In the Actions area, you can specify the following, based on which options you select:

    • Hide back button - Do not display the icon to return to the previous page.

    • Hide next button - Do not display the icon to advance to the next page.

    • Hide scan button - Do not display the icon to scan files.

    • Hide home button - Do not display the home icon on this screen.

    • Hide return button - Do not display the icon that would return the user to the main menu.

    • Hide page numbers - Do not display the page number on this screen.

    • Add help text - Supply help information about the field. This help information will be accessed when the user taps a question mark icon next to the field. When this option is enabled, an “Edit help text” box will appear on which you can enter text.

Arranging Fields and Free Form Creation

When creating a Standard form, you may arrange form fields by dragging and dropping them into the canvas area, using the six dots icon on the left side of the field. Fields may only be positioned above or below previously-added fields.

When creating an Advanced form, you may arrange form fields by dragging and dropping them into the canvas area. Fields may be positioned anywhere within the bounds of the preselected canvas size, including next to or on top of previously-added fields.

Note: If you attempt to position any portion of a field outside of the canvas, it will automatically reposition to the closest available position on the canvas.

Manually Adding List Items

When creating an Advanced form, list items can be added by clicking the edit list button Edit List Button in the Checkmark, Drop-Down, Button List, or Radio Button fields Properties Panels. This will open a window where you can add list options with user-facing names and associated metadata values.

List Items

Add as many options as you want by selecting the + button. Each list item has the following options:

  • Drag to reorder - Use the six dots icon to click and drag a list item to place it in a different position.
  • Show/Hide - Use the eye icon to show or hide the item from the list.
  • Select to set as default value - Select to have the option appear as selected by default in the form.
  • Label - The user-facing name associated with the list item.
  • Value - The metadata value associated with the list item.
  • Delete - Remove the list item.

Note: Options in this window may display differently depending on options selected in the Properties Panel. For example, when the Multi-Select option is selected, options in this window appear with checkboxes, which allow for multiple selections. When the Multi-Select option is not selected, options appear with radio buttons, which only allow for a single selection. This does not affect how the options are displayed when the form is accessed.

Advanced Forms Style Options

When using Advanced Forms, many fields have additional stylization options not found in the Standard Form Builder. These can be found in the Properties Panel on the right of the canvas.

Properties

Each subsection includes an icon Default that, when clicked, will open a context menu with the following options:

Default Menu

  • Set as System Default - This will save the associated values as the default for all forms built within the tenant.
  • Restore Factory Defaults - This will return the values to the default Dispatcher Stratus values.
  • Save a Form Default - This will save the values for any subsequent fields, tools, etc. created within this form.

Text Styling

Properties

These options modify the text associated with this field or tool, and can modify either the Field text, which affects anything entered by a user in the field, or the Label text, which modifies the text associated with the field, such as the field title.

Control Name Control Type Description
Font Drop-down menu The style of text. Current options include: San-Serif, Serif, Monospace, and Yellowtail. These fonts are built in and should be available in any browser.
Font Size Editable field The size of the text, measured in pixels.
Increase Font Size Button Increase the size of the font by one pixel.
Decrease Font Size Button Decrease the size of the font by one pixel.
Bold Button A thicker and darker style of text.
Italic Button A cursive style of text designed to mimic calligraphic writing.
Underline Button Add a line under the text.
Left Align Button Each line begins the same distance from the left edge of the field.
Center Align Button Each line is aligned with the center of the boundary area, with even space on either side of the line of text.
Right Align Button Each line begins the same distance from the right edge of the field.
Justify Button For multiple lines, each line of text will take up the entire available width, adjusting letter spacing to fill the space. For single lines, text will display as left aligned.

Note: If the content of a field is too large to display within the field’s configured area, the field will only display the text that is visible within its boundary. It is recommended to adjust the field size, content, or font size to display the entire content within the field’s area. For the Text Area field, a scroll bar will appear on the right-hand side that allows you to scroll and see any text that is not visible within the field’s boundary.

Field Label Position

Properties

These options modify the position of the field label, relative to the field itself.

  • Label on top of field - The label is outside and above the field.
  • Label to left of field - The label is outside the field, on the left.
  • Label to right of field - The label is outside the field, on the right.
  • Label below the field - The label is outside and below the field.
  • Label inside top of field - The label is within the field border, along the top.
  • Label within top border of field - The label is in line with the field border, on the top. This option is selected by default.

Layout

Properties

These options modify various aesthetic aspects of a field or tool.

Size and Position

These options modify the positioning of the field or tool.

  • Width - The size of the field or tool measured horizontally. This value can be locked with Height to maintain field or tool size ratios.
  • Height - The size of the field or tool measured vertically. This value can be locked with Width to maintain field or tool size ratios.
  • Left - The position of the left-most edge of the field or tool.
  • Top - The position of the top-most edge of the field or tool.
  • Rotation Angle - The angle of the field or tool measured from 0-360 degrees.

Border Stroke and Corner Radius

These options modify the visual design of the field or tool.

  • Line style - Select from one of several line style options.
  • Stroke thickness - The width in pixels of the line.
  • Corner radius - The size in pixels of the rounded corners. Note that a value of 0 results in right angle corners.

Grouping and Order

These options modify the grouping and order of the selected fields or tools.

  • Grouping - To simultaneously perform a function (for example, move or resize) on multiple fields or tools on the canvas, use the Grouping feature.

    • Group - This button groups together all of the selected objects. It is active only if multiple fields or tools are currently selected on the canvas. To select multiple fields or tools, hold down the CTRL button (or Command button for iOS users), then select the objects you would like to group.Then, click on the Group button. You can select a single field or tool within a group by double-clicking it. After deselecting the group, selecting any field or tool in the group will select the entire group. For more information about modifying grouped fields or tools, see the section on multi-selection.

      Important: If you include one or more locked fields or tools in a group, they will be movable as part of the group.

    • Ungroup - This button ungroups the selected groups, allowing the fields and tools to be modified individually again. The button is active only if one or more field or tool groups are selected on the canvas.

  • Ordering - “Ordering” is the layered placement of a field or tool in relation to other fields or tools on the canvas. a field or tool that is placed on a higher layer will block the view of any portion of a field or tool beneath it. Use the Ordering buttons to arrange the layering placement of overlapping fields or tools on the canvas.

Color

Properties

These options modify the hue and saturation associated with a particular field or tool, and can modify either the Field text, which affects anything entered by a user in the field, or the Label text, which modifies the text associated with the field, such as the field title.

  • Line Color - The color of any lines within the field or tool.
  • Fill color - The background color of the field or tool.
  • Text color - The color of any text within the field or tool.
  • Color picker - A tool that allows you to pick from over 16,000,000 possible colors. Several preset options are available.
  • Opacity - The amount of transparency of the field or tool. A transparency value of 0 means the field or tool is invisible.
  • Color values - The hex and RGB values for the selected color.

Custom CSS Class

Properties

This field allows you to modify an attribute used to define a group of HTML objects in order to apply unique styling and formatting. This will only affect the selected object or objects, not the form as a whole. Modifying certain classes can affect part or all of a field or tool:

Class/Div Modifies
Text Field
.kmbs-form-control Full container div
.kmbs-text-field Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-label-outlined Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-outlined-input-border Field outline border
Text Area
.kmbs-form-control Full container div
.kmbs-text-field Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-label-outlined Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-outlined-input-border Field outline border
Number Field
.kmbs-form-control Full container div
.kmbs-text-field Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-label-outlined Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-outlined-input-border Field outline border
Attach File Field
.kmbs-form-control Full container div
.label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-label-outlined Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-input-adornment Icon within field
Date Field
.kmbs-form-control Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-label-outlined Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-input-adornment Icon within field
Checkmark
.kmbs-form-control Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-form-group The group of checkboxes
.kmbs-checkbox Checkbox control
svg Combine with .kmbs-checkbox to change the properties of the checkbox
.kmbs-control-label Label for each checkbox
Radio Button
.kmbs-form-control Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-form-group The group of radio buttons
.kmbs-checkbox Radio button control
.kmbs-control-label Label for each radio button
Dropdown List
.kmbs-form-control Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-input-label Label
.kmbs-input-base Text input field
.kmbs-outlined-input Text input field
.kmbs-outlined-input-border Field outline border
svg Dropdown arrow icon
Button List
.kmbs-form-control Full container div
label Main identifier for label
.kmbs-form-label Label
.kmbs-form-group The group of buttons
.kmbs-list-button Button element
Shapes (Circle, Square, Star, etc.)
/[Custom Class/] Style
svg Width, overflow, height, viewBox, fill, preserveAspectRatio
path Vector-effect, transform, stroke, stroke width
Canvas
& Form page
Text Tool
class Style

Notes:

  • When referencing the field by .kmbs-input-base or .kmbs-outlined-input, in order to change the text in the field or the actual field color, you will still need to reference “input”, as well.
  • When referencing the icon with .kmbs-input-adornment, the icon with the field is an image. Modifying the CSS will not change the image, but it can apply a filter.

Custom CSS Class Examples

How do I change the color of one text field border and label?
  1. Select the field that you would like to customize. Add a class name to the CSS Class field in the Properties panel. This example will call that class “mytext”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

    To make the label text blue:

	.mytext label {
	    color: blue;
	}
To make the field border a light blue:
	.mytext .kmbs-outlined-input-border {
	    border-color: cyan;
	}
How do I make all field labels have bold text?
  1. Since we want all fields changed, there is no need to enter a custom CSS class.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

    To make all label text bold:

	label {
	    font-weight: bold;
	}

Note: There is no “.” before “label”. This is because we are setting the style for the actual element and not a class.

How do I apply a background color to a text field?
  1. Place the Text field on the form and give the item a “CSS Class”. This example will call that class “color-field”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

	.color-field .kmbs-outlined-input-border  {
	    background-color: cyan;
	}
How do I style the text next to checkboxes?
  1. Place the Checkbox field on the form and enter values for each box. Give the item a “CSS Class”. This example will call that class “mychecks”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

	.mychecks label .kmbs-checkbox-label  {
	    color: cyan;
	    font-style: italic;
	}
How do I change the color and spacing of radio buttons?
  1. Place the Radio Button field on the form and enter values for each option. Give the item a “CSS Class”. This example will call that class “myradio”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

	.myradio .kmbs-checkboxes  {
	    color: green !important; /* radio buttons (selected/not selected) will be green */
	                         }

	.myradio label  {
	       padding-top: 12px !important; /* adds spacing between vertically stacked radio buttons */
	}

Note: Each radio button style must end with !important in order for it to take effect.

How do I style text in the Text tool?
  1. Use the Text tool to place some text on the form. Enter your desired text and then give the item a “CSS Class”. This example will call that class “big-red”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

  3. Since this is called “big-red”, we will increase the font size and make the text red

	.big-red {
	    font-size: 48px !important;    
	    font-weight: bold !important;
    	color: red !important;
	}

Note: Each style must end with “!important” in order for it to take effect.

How do I change the colors of shapes?
  1. Give each shape a custom class. If you would like every shape to use the same colors, give each one the same class name. In this example, we will give all shapes a class called “default-shape”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS.

  3. To give the shapes a different fill color, we reference the SVG which draws the shape on the form:

	.default-shape svg {
		fill: #048562; /* dark teal */
	}
  1. To give the shapes a different border, we reference the path within the SVG shape
	.default-shape svg path {
		stroke: #8c05b8; /* bright purple */
		stroke-width: 8px; /* made the border thicker */
	}
How do I make the asterisk on required fields to display in red?

This example is more complex. Since we want to change a single character in a line of text, it goes beyond a simple selection and property change. Even so, the way to accomplish this is straightforward.

  1. Select the field that you would like to customize. Add a class name to the CSS Class field in the Properties panel. This example will call that class “required-field”.

  2. In the Custom CSS editor at the bottom left of the form builder, enter your CSS. To make the asterisk display red:

	.required-field label::after {
		bottom: 0;
		color: red;     /* Any desired color value can be given here */
		content: '';     /* This is the character we want to change the color of */
		position: absolute;
		transform: translate(-100%, 0);
}

Note: There is no “.” before “label”. This is because we are setting the style for the actual element and not a class.

Context Menu

You can right-click on a field or tool to open a context menu with additional options. Options include:

  • Clone - Create an exact duplicate of the field or tool.

    Note: Cloning a field or tool with a variable will automatically update the Variable Name field to avoid issues with metadata overlap.

  • Lock/Unlock - Lock the position and size parameters of a field or tool. When selected, a locked field will display a small lock icon in the upper left corner of the field or tool. This is positional only, for use with nodes and drawing fields or tools; it has no effect on the attributes of the node.

    Caution! Even if a field or tool is locked, it can still be deleted. The “locking” is only positional with regard to the work area.

  • Delete - Remove the field or tool from the canvas.

Multiple Selections and Grouping

When creating an Advanced form, you can select more than one field or tool at a time, allowing you to modify these fields or tools simultaneously. To select multiple fields or tools, do the following:

  1. Select a field or tool.

  2. Hold down the Ctrl key for Windows users or the command key for iOS users.

  3. Select any additional fields or tools.

Selecting multiple fields or tools enables the Group button in the menu, which essentially saves the selection of multiple fields or tools.

Multiple Selection Properties

The Field Properties Panel displays all of the style options available that the selected fields or tools have in common. For example, selecting two Text Line fields will give you the option to modify Text Styling; Field Label Position; Layout; Border Stroke and Corner Radius; Grouping and Order; Line, Fill, and Text Color; and Custom CSS. Selecting a Text Line and an Asterisk will give you the option to modify Layout; Border Stroke and Corner Radius; Grouping and Order; Line and Fill Color; and Custom CSS.

Tools

Advanced Forms Only

The Tools area appears in the Fields panel below the Standard Index Field icons. This area contains shapes and other elements you can add to your form to enhance its appearance and organize its content. Tools differ from Standard Index Fields in that they do not accept user input (outside of initial configuration) and or produce metadata. They are purely stylistic.

Tools area

All tools have the same stylization options described above.

Tools include:

  • Add Page - Add an additional page to the end of the form.
  • Text - Add text to your form that is not associated with a field. For more information, see the Text section below.
  • Image - Add an image to your form. For more information, see the Image section below.
  • Square - Add a square to your form.
  • Circle - Add a circle to your form.
  • Triangle - Add a triangle to your form.
  • Star - Add a star to your form.
  • Diamond - Add a diamond to your form.
  • Asterisk - Add an asterisk to your form.
  • Line - Add a line to your form.
  • Plus - Add a plus to your form.
  • Minus - Add a minus to your form.

Text

To add text to your form, you can drag and drop the Text tool icon to the Form Builder Canvas area. To customize its properties, select the newly created field. You can add text to the Text Tool in the field provided in the Field Properties Panel.

Note: The Text tool is different from the Text Field in that it is not editable within the form; the Text tool simply displays text.

Image

To add an image to your form, you can drag and drop the Image tool icon to the Form Builder Canvas area. To customize its properties, select the newly created field. You can browse for an image by selecting the Select an Image button in the Field Properties Panel. This will open a Windows-style folder browser for you to upload an image.

You can adjust the Opacity of the image using the slider, which represents how much can be seen behind the image. For example, 100% opacity is a solid image; 0% opacity is invisible.

Rotation

You can select and rotate any of the Tools on the form builder canvas. To rotate a field or tool, do the following:

  1. Select the field or tool you would like to rotate. The bounds of the field or tool will be highlighted in green.

  2. Select and hold the circle above the field or tool.

    Rotate

  3. Drag the circle to rotate the field or tool.

  4. When you have rotated the field or tool to the orientation you want, release the circle.

    Rotate

You can also rotate a field or tool using the Rotation Angle setting in the Field Properties panel.

Custom CSS

Rotate

You can use this area to write customized CSS code that will affect the fields or tools in the form.

Important! The CSS code added here will only affect form fields or tools that have a defined Custom CSS Class.

Form Builder Canvas

The Form Builder Canvas serves as a creative space where users can construct their forms visually, with drag-and-drop functionality for effortless customization. Standard Index Fields can be dragged and dropped onto the Canvas, where they will stay until moved.

Meanwhile, the Error List offers instant feedback, guiding users to rectify any validation issues promptly.

Form Builder Canvas

When building a Standard form, there are three buttons in the upper-right corner that are not clickable. These indicate the Home, Refresh, and Next Page buttons that typically appear on the MFP Panel.

Canvas Properties Panel

Grid Settings

Use this section to enable or disable the alignment grid. Enabling the grid helps you align fields or tools on the canvas. You have the following options:

  • Spacing - Use this slider to specify the space between grid lines on the canvas.

  • Zoom - Use this slider to specify the size of the canvas view relative to its actual appearance.

  • Show/Hide Grid - Use this toggle button to show or hide the grid.

  • Snap to Grid - Use this toggle button to “snap” fields or tools to the nearest grid line, or to turn off Snap to Grid for the workflow. Snap to Grid applies to new fields or tools you add to the canvas, or to existing fields or tools on the canvas that you move to a new position.

  • Cross-Hair Lines - Use this toggle button to turn on or off the Cross-Hair Lines function. This function helps you align fields or tools on the canvas.

Background Image

Adding a background image to your workflow can be visually attractive and also help to indicate the purpose or function of the workflow. For example, you can use a favorite photograph, a floor plan, or a map.

Do the following:

  1. Click on the canvas where no fields or tools are selected to open the Properties panel.

  2. In the Background Image area of the Canvas Properties panel, check the Enable box.

  3. Click on the Select an Image button. A folder browsing window appears.

  4. Browse to the folder containing the image that you want to use.

    Note: The list of files is restricted to PNG, JPG, GIF, and BMP file types.

  5. Select the desired file, and then click on Open to upload it. The selected image appears on the canvas, underneath any existing fields or tools on the canvas.

Once uploaded, you have the following configuration options:

  • Opacity - Use the slider bar to change the opacity of the image.

  • Positioning - Define where to position the image. You have the following options:

    • Fit to Canvas - Stretch the selected image to fit the canvas size.

    • Center - Place the selected image in the center of the canvas. Note that if the image is not the same size as the canvas, there may be white space around the image or the image may be cropped.

    Notes:

    • If the image is larger than the canvas, Workflow Builder will shrink the image to fit the canvas, even with the Center option selected.

    • If the image is small, such as an icon-sized image (45 x 45 pixels), choosing Fit to Canvas may distort the image as Workflow Builder expands the image to fit the canvas.

Color Panel (Canvas)

The Color panel is a sub-panel of the Properties panel. Use the Color panel to modify the colors of the attributes of the canvas. When no field or tool is selected, modifying the Color will change the canvas background color.

Adding Fields or Tools to the Work Area

You can begin adding fields and tools to your form by dragging-and-dropping the icons listed on the left hand side of the window into the Form Builder’s work area.

Duplicating Fields or Tools

When creating a Standard form, each index field includes a Duplicate button Duplicate icon above it once it has been added to the canvas. To duplicate an index field from your form, select that Create a duplicate field button.

When creating an Advanced form, index fields and tools can be duplicated using the context menu, which can be accessed by right-clicking on the field or tool.

Deleting Fields or Tools

When creating a Standard form, each index field includes a Delete button Delete iconabove it once it has been added to the canvas. To delete an index field from your form, select that Delete button.

When creating an Advanced form, index fields and tools can be duplicated using the context menu, which can be accessed by right-clicking on the field or tool.

Moving Fields or Tools Around the Work Area

When creating a Standard form, you can rearrange the order of the index fields by dragging and dropping the fields on the work area. To move a field, do the following:

  1. Hover over the field you would like to move.

  2. Click the six dots in the upper-left corner.

  3. Drag the field to the desired position.

When creating an Advanced form, you can simply click and drag the field or tool to its new location.

Configuring Fields or Tools

When you select a field on the Form Builder’s work area, the properties for the selected field appear on the right-hand side of the window. This is where you can configure the field to suit your purposes.

Error List

If you have attempted to Validate a form that is not configured correctly, the Error List area will appear in the middle of the screen, below the Canvas. The Error List contains additional information about each problem that is preventing the form from validating properly.

Field Properties Panel

Field Properties Panel

On the right-hand side of the screen, the Field Properties Panel displays the editable properties of the selected Standard Index Fields. This is where you can edit the field properties described in the Standard Index Fields and Tools sections above. This area can be pinned/unpinned by clicking the pin icon Pin icon in the upper-right hand corner.