Form Builder

The Form Builder is divided into three main sections.

  1. Header — where you enter the name of the form and the navigation buttons for form preview, save and to return to the main forms menu.
  2. Build — a tab that displays the fields and components, grouped by Basic, Advanced and Object Fields. The form design area is on the right.
    Form builder.
  3. Settings — a tab that displays the form configuration settings, which include access permissions.
    Form settings.

Form Fields and Components

In addition to Object fields, you can use form fields and components to enhance the layout of your forms. Any field components that you add to a form to capture data, the data is not mapped to the object; it only saves to the form itself and the generated PDF, if applicable. You can also add layout components to enhance the look of your form.

Below is a brief overview of the most commonly used components.

Basic Components

The basic components covered in this section are not initially linked to any index fields. Configure them through the settings icon Edit form field icon.. For information on configuration see Text Field Components.

Text Field

Use the Text Field component to gather a single line of text.
Text field component configured to accept an email address.

Text Area

Use the Text Area component to gather multiple lines of text.
Text Area component configured to accept an address.

Number

Use the Number component to gather a numeric value. This component will not accept letters or symbols.
Number component configured to accept a year.

Password

Use the Password component to gather sensitive text. This field will display an input mask of · instead of the typed text.
Password component with a password type in and masked.

Checkbox

Use the Checkbox component to gather a single boolean value.
Checkbox component configured to ask about the users medical history disclosure.

Select Boxes

Use the Select Boxes component to gather one or more boolean value.
Select Boxes component configured to ask about medical history items.

Select

Use the Select Boxes component to gather one or more selections from a drop down.
Select component configured to accept a state code.

Radio

Use the Radio component to gather a single selection from multiple options.
Radio component configured to accept a region name.

Button

Use the Button component to trigger custom actions. Triggers for the button include:
  • Simple
  • Javascript
  • JSON Logic
  • Event
Actions include:
  • Property
  • Value
  • Merge Component Schema
  • Custom Action
Button component configured to calculate a vlaue on the page.

Advanced Components

Use layout components to display information about your form or to display your data fields in different ways. You can find the layout components by selecting the Advanced section.

Content

Use the Content component to provide details or important information about your form. The information you enter here is for display only and is not saved to the object. You can format the text using the tool bar buttons and insert images.

The following is not supported:

  • Display of bullet character
  • Tables
  • Embedding video

Content component configuration.

Columns

Use the columns component to display fields in columns next to each other. Once you have the column component configured with the number of columns you want to display, drag and drop object fields into the columns.

Column component with object fields.

Column component configuration.

Data Grid

If your object is configured to collect line item data, you can add a data grid that displays as a table. You can add the data grid component and then drag and drop the line item fields into the data grid.

Data grid component with object fields.

Lookups can be used in data grids to lookup an individual row. To do so, use the search parameter format of {formName.dataGridName.columnName} and the result format of [hidden_formName.dataGridName.columnName].

Data Grid component configuration.

File Component

The file component places an upload widget so users can drag-and-drop, or browse for, files directly from the form. These files become file attachments to the form and can be accessed using the Attachments button from the Document toolbar on the Document Viewer.

File upload component display options.

If you allow multiple file types in your configuration, you can specify labels for the file types to classify the uploads. The user completing the form can select the type of file they're uploading.

To restrict the upload to specific file types enter the file pattern into the appropriate field separated by commas. For example .jpg,.png,.tiff,.pdf

You can also set minimum and maximum file sizes.

File upload configuration options.

To enable the File upload widget the following is required:

  1. Create an object drop-down field and include at least one value to map to the file upload widget.

    The recommended practice is to disable the Allow Multiple Values option when you create the drop-down field.

  2. On the File Component modal, select a value from the object drop-down field you created.

  3. Configure any other attributes, as necessary.

Object Fields

The Object Fields section shows the list of fields you created. The data captured in these fields is available for other contextual use, like workflows and reports. You can drag a field into a form more than once, however, when completing the form, the user can only enter data in the first field location. Any subsequent placements of the field are displayed as read-only.

Multiple field placements.

To add a dropdown field filter do the following:

  1. Drag and drop the dropdown field you want to use as the filter.
  2. Drag and drop the dropdown field with the values.

To configure a dropdown filter, see Create a Dropdown Filter.

Utilizing the Label & Value options within the field Edit Edit form field icon. menu is not supported for dropdown filters.

Dropdown filter configuration on a form.

When completing the form and the user selects an option from the dropdown filter, the values field displays the appropriate options based on the filter selection.

Dropdown filter.

Text Field Components

Text field components can collect information and save it to the form and generated PDF, but the data is not mapped to any of the object fields. You can add text fields by selecting the Basic section. When you drag a field into the form, you can configure various settings by selecting the Edit icon Edit form field icon.. The Display settings are shown by default.

  • Text Field — this field accepts alphanumeric characters and the content displays on one line. Best used for short descriptions.
  • Text Area — this field accepts alpha numeric characters and the content displays on multiple lines. Best used for long descriptions. You can set the number of lines to display in the Display tab by changing the number in the Rows field. the default is 3.

Display

The Display options determine how the field displays to end users in the form. Required items are noted by the asterisk(*) character.

  1. Label — by default, this field displays the field label entered when the field was created. You can update the field to display something else, if desired.
  2. Label Position — use the drop-down to select where the label is displayed in relation to the field. You can display the label above or below the field.
  3. Placeholder — enter the text that displays to the user when the field is empty.
  4. Description — enter a detailed description of what should be entered into the field.
  5. Tooltip — display a small "?" icon to the end of the label. When a user hovers the pointer over it a pop up shows what is written in this field.
  6. Input Mask — displays a pre-defined format in the fields to help the user when entering data; for example a telephone mask (999) 999-9999. When using this option, the user must enter the predefined characters and those are saved with the numbers.
  7. Display Mask — helps to display the input in a readable way but does not save the mask characters. In the telephone example, as the user enters the numbers, the field displays the predefined characters without the user having to enter them and only the numbers entered are saved.
  8. Autocomplete — allows the browser to automatically fill in information where applicable. The default is on.
  9. Vasion Field Name — shows the name of the object field associated with the current field. If the field name is blank the data is only saved on the form and the generated PDF.
  10. On the right side of the modal, you can see a preview of the field. Once the field options are configured, select Save.

Display field components.

Hide a Field

An object field may need to be filled by automated processes like lookups, but also kept hidden so that is not end-user editable. To hide a field, but retain the ability for the field to maintain any index data:

  1. Select the edit form field button Edit form field button. for the field you wish to hide.

  2. Select the Display tab.

  3. Enter the value: vasion-hide-field in the Custom CSS Class field.

  4. Select the Save button.

Data

  1. The data options include:
    1. Multiple Values — select this option to allow multiple values to be entered in this field.
    2. Default Value — enter a default value for the field. The default value overrides the placeholder text.
    3. Input Format — use the drop-down to select the output of this field into a specific format.
    4. Text Case — select a radio button to select a specific case for the text to display.
  2. The right side of the Data modal displays a preview of the field. When you're satisfied with the field, select Save.

Data field configuration.

Validation

  1. The validation options include:
    1. Validate On — use the drop-down to select an option that determines when the component should trigger front-end validation.
    2. Required — select this option to make the field mandatory for form submission.
    3. Unique — select this option to force the entry in this field to be unique and not previously submitted.
    4. Minimum and Maximum Length — enter the minimum and maximum number of characters that must be entered into this field.
    5. Minimum and Maximum Word Length - enter the minimum and maximum number of words that must be entered into the field.
    6. Regular Expression Pattern — enter a regular expression pattern test to pass prior to form submission.
    7. Error Label — enter the label to display if there is an error with the content.
    8. Custom Error Message — enter text to display as a custom error message if an error occurs.
  2. The right side of the Validation modal displays a preview of the field, When you're satisfied with the field, select Save.

Validation field settings.

API

The API settings are used to document the name of this field in an API endpoint.

  1. API — enter the property name for the field.
  2. The right side of the Validation modal displays a preview of the field. When you're satisfied with the field, select Save.

API field settings.

Conditional

The conditional settings are used to dynamically show and hide fields.

  • This component should Display — Select True to default the selected component to hidden. Select False to default the selected component to visible.
  • When the form component — Select the form component that will determine the visibility of the selected component.
  • Has the value — Enter the value that determines the selected component's visibility.

Conditional Component.

Use case

In the following use case, the form user is selecting whether or not they require a computer during their on-boarding process. When the user selects Yes to the question Do you require a computer for your new role?, the Computer Type drop-down displays. To set up this process do the following:

  1. Select the Edit button Settings icon. on the Computer Type field.
  2. Select the Conditional tab.
  3. Select the following settings:
    1. This component should Display — Select True.
    2. When the form component — Select Do you require a computer for your new role?.
    3. Has the Value — Enter Yes.