Forms

Everything you need to build complex, form-driven, business process workflows.

The Forms page is the center for all activities needed to build business workflows to better manage your agency, provide superior service to all your customers, and maximize your profits.

The admin users in the platform have access to the Forms Center.

All Forms functionality is accessible from the three screens. The Forms library page opens by default when a user selects the Forms Center.

Form Library

The top section of the Form library page is divided into three sections.

  • Your Forms section lists all the forms that have been created and managed by your team in the Fieldworker platform.

  • The middle section, labeled 'Community Forms' lists all forms provided by the community that your agency can also use.

  • The last section shows all the forms (created by your agency, or used from community contributions) that have been subscribed to. A form is subscribed when it is associated with a task type.

You can review any form from any section by simply clicking on it.

You can also use this screen to edit a form created by your agency.

Form Builder

The Form Builder page is the most important page where you create a new form.

To get started, simply drag and drop the desired form components from the left panel onto the canvas. To customize a component hover over the component and click the "Edit" button on the top-right to set properties like labels, validation rules, and more. You can also click and hold the "Move" button to drag the component to your desired location. Click the "Remove" button to remove the component from the form.

See below for more details about the creation of a new form. Once you're satisfied with your form, click the "Add Form" button to add it to your list of forms. Once a form is created, and added to your collection, it can be associated with a task type from the Settings and Configuration page.

Form Report

To access data associated with a form, or submitted from a form is accessible from this screen. You can select a form that has been associated with a task type, any specific customer and/or a date range to retrieve all submitted data.

This data is then presented in a data grid.

This data can be used to analyze, export, or print in any required manner.

Form Building

One major capability of the Fieldworker platform is that it leverages an easy-to-use drag-and-drop form builder to dynamically create Forms for your workflow.

Adding a Form Component

To add a form component, drag and drop the component from the left column into the desired location within the form.

Each new form will include a submit button by default. This can be removed or edited as necessary.

From Components

The FIeldowrker platform supports various components that can be used to construct your forms. Depending upon your needs you can drag and drop and position the components to build a desired form.

Basic Components

Basic components are found at the top of the component groupings within the Form Builder. These components are more commonly used on traditional web forms and should be familiar components if you have ever used a Form Builder in the past.

Text Field

A Text Field can be used for short and general text input. There are options to define input masks and validations, allowing users to mold information into desired formats.

Widget:

The widget is the display UI used to input the value of the field. By default, the widget will be set to a traditional Input Field, however, you can change the widget to turn the text field into a calendar picker.

Input Mask: Use an Input Mask when a predefined input format is required. This helps force input formats such as phone numbers, postal codes, SSN, etc.

9: numeric

a: alphabetical

*: alphanumeric

Example a Phone Number mask: (999) 999-9999

When should I use the Text Field component?
  • Unpredictable or free-form responses. If you canโ€™t reasonably predict a userโ€™s answer to a prompt and there might be wide variability in usersโ€™ answers.

  • Input simplicity. When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a date picker.

  • Pasted content. When users want to be able to paste in a response.

Text Area

A Text Area is a multi-line input field that allows for longer text. The Text Area can also be converted to WYSIWYG content editor.

Rows: Controls how many default rows are set in the Text Area

Auto Expand: The Text Area will automatically expand vertically as the user types into the field.

Editor: This option will convert the text area into one of the following WYSIWYG Editors

Ace

CKEditor

Quill

Enable Image Upload: Allows the user to upload an image to the WYSIWG Editor

-Use the Text Area when larger text input is required

-Switch the Text Area to a WYSWIG to give the user the ability to format and customize the text input.

Number

Use a Number field whenever a field should be limited to a number value type. There are options to set thousands separators, decimal places, and decimal requirements.

Use Thousands Separator: Check this setting if you would like the value in this component to separate thousands by a local delimiter.

Decimal Places: The maximum number of decimal places for the values in this field.

Require Decimals: Always show decimals for this field, even if trailing zeros.

Decimal Symbol: Change the default Decimal Symbol for the Number component.

  • Use the Number component when dealing with input types that will be specific to numeric input

  • Use the decimal places settings for numeric requirements like a percentage that may need specific decimal places included in the submission

Check Box

A check box can be used for the boolean value input field. It can either be checked (true) or unchecked (false). There are options to set Shortcut and Input Type.

Shortcut: Add a keyboard shortcut to check/uncheck the component.

Input Type: The input type can be changed from a single input value checkbox or a multi-valued radio component.

The Radio type option is used when setting up dynamic Radio values for a PDF First form.

Select Box

This multi-valued component allows users to select one or more options in checkbox style format. Set your values within the Data tab of the settings. Apply unique settings such as value shortcuts and min/max value validation.

Data Source Type: The source to use for the Select Box options:

Values: Create your own list of static values for the Select Box options. The Label is the front-end identifier for the end user. The value is the back-end identifier for the option and is what is saved to the Database.

When setting the option value, use only Strings or Numeric values.

Data Source URL: Designate a URL that will provide the option values for the Select Dropdown. Use the Item Template to determine what part of the URL's object will be used as the option values.

For example, suppose you wish to populate your Select Box with a list of all U.S. States of You can use an external JSON URL like the following.

Copy

https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json

Place the URL within the Data Source URL. Provide a Value Property to represent the option which is what will save within the meta-data. When the value is left blank, the entire object will be saved for the option. Modify the Item Template to determine what part of the object the end user will see when choosing an option.

In the image below, the abbreviation, set by the Value Property, will be saved in the meta-data to represent the option within the back end. The end user will see the State name, set by the Item Template, for the option on the front end.

Shortcut: Add a keyboard shortcut for the designated option.

Options Label Position: Determines the position of the option label relative to it's checkbox

Inline Layout: Displays the option values horizontally

Min/Max Checked Number: Validation that determines the minimum and maximum amount of options to check. Checked options below the minimum will trigger front-end validation. When the maximum amount of options is checked, the remaining options will become disabled.

Min/Max Checked Error Message: Determines the validation message displayed to the user for the minimum or maximum option amount.

Select

The Select component displays a list of values in a dropdown list where users can select one of the values. This component has flexibility on where the data source originates from. There is also a large offering of settings providing different ways of filtering, querying, and loading data values.

Unique Options: Display only unique dropdown options removing repeated values.

Multiple Values: Allows the user to select more than one option. Options are saved like tags on the field when the setting is enabled.

Data Source Type: The source to use for the Select component options:

Value, URL, Resource, Raw JSON, and Custom.

(More information in the next tab Data Souce Types)

Storage Type: Select how you want the field data to be stored. Defaults to 'Autotype' if an option is not selected:

String, Number, Boolean, Object

ID Path: Designate the path to select the option ID

Item Template: HTML template that determines how the Select options are displayed within the dropdown. You can use the item variable to access the current object in the array.

EG embed the value by using {{ item.value }} in a template.

Lazy Load Data: When set, a request will not be fired to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the APIs will only fire when the field is activated.

Request Headers: Set any headers that should be sent along with the request to the url, useful for authentication.

Data Path: The property within the source data, where iterable items reside.

For example: results.items or results[0].items

Value Property: The property of each item in the data source to use as the select value. If not specified, the item itself will be used.

Disable Limiting Response: When enabled, the request will not include the limit and skip options within the query string. This can help with unnecessary requests and performance.

Search Query Name: The name of the search query string parameter used when sending a request to filter results with. The server at the URL must handle this query parameter. If URL or Resource is selected as Data Source Type, enter the name of the search query parameter to filter requests with.

For example, if your URL is http://api.dogs.com/dogs, and Search Query Name is set to type, and then the user types nice in the Select field, then this component will send a request to http://api.dogs.com/dogs?type=nice and update the Select items with the results. If this option is omitted, no new requests will be made when a user enters text in the select field.

Search Delay Request: The delay in seconds before the search request is sent, measured from the last character input in the search field. The default is set to 0.3

Filter Query: Provide additional filtering within the dropdown using query parameters.

Sort Query: Provide additional sorting within the dropdown using query parameters.

skip=10sort=created

skips the first 10 results based on creation date in ascending order

skip=5sort=-created

skips the first 10 results based on creation date in ascending order

Limit: Use this to limit the number of items to request or view within the select field dropdown.

10

Returns only 10 values. When user scrolls to the bottom of the dropdown list, an API call is made returning the remaining results.

Formio Authenticate: Check this if you would like to use Formio Authentication with the request.

Disables Storing Request Result in the Cache: Check it if you don't want the requests and their results to be stored in the cache. By default, it is stored and if the Select tries to request the same URL with the same parameters, the cached data will be returned. It allows to increase performance, but if the remote source's data is changing quite often and you always need to keep it up-to-date, uncheck this option.

Refresh Options On: Refresh the field options based on a change from another field on the form, or any change on the form. This is helpful when dealing with dynamic values, such as the Cascading Select Dropdowns

Refresh Options On Blur: Refresh the field options when a specific field or any field on the form is blurred.

Clear Value Option On Refresh: Clears any selected value if the field is reset by the Refresh Options On setting.

Enable Static Search: When checked, the select dropdown will allow for searching within the static list of items provided.

Search Threshold: Determines when the select component match algorithm gives up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything. This setting is set to 0.3 by default.

Read Only Value: Check this if you would like to only display the value when in Read Only mode.

Choices.js options: A raw JSON object to use as options for the Select component. Refer to the Choices.js documentation for more information.

Use Exact Search: Disables the Search Algorithm and only allows exact searches to return an option.

Radio

The radio component is a field that allows users to select a single option from a list of options displayed in radio-style format. Users can click a selected option to deselect it, returning the field back to its original state. allows

Data Source Type: The source to use for the Select Box options:

Values: Create your own list of static values for the Select Box options. The Label is the front-end identifier for the end user. The value is the back-end identifier for the option and is what is saved to the Database.

When setting the option value, use only Strings or Numeric values.

Data Source URL: Designate a URL that will provide the option values for the Select Dropdown. Use the Item Template to determine what part of the URL's object will be used as the option values.

For example, suppose you wish to populate your Select Box with a list of all U.S. States of You can use an external JSON URL like the following.

Copy

https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json

Place the URL within the Data Source URL. Provide a Value Property to represent the option which is what will save within the meta-data. When the value is left blank, the entire object will be saved for the option. Modify the Item Template to determine what part of the object the end user will see when choosing an option.

In the image below, the abbreviation, set by the Value Property, will be saved in the meta-data to represent the option within the back end. The end user will see the State name, set by the Item Template, for the option on the front end.

Shortcut: Add a keyboard shortcut for the designated option.

Options Label Position: Determines the position of the option label relative to the option bubble

Inline Layout: Displays the option values horizontally

Button

Buttons can be added to perform various actions within the form. The most obvious function of the Button component is the Submission action. However, you can also utilize the Button component to trigger events associated with workflow logic, reset field data, authenticate to an OAuth provider, and more.

In addition to functionality, the button component offers many settings to change the style and theme of the component.

Action: The functionality that executes when the button is clicked. Click the event to show additional settings related to the selected action:

Submit - Submits the form to the back-end server

Save In State - This button action works alongside the Save In State workflow and facilitates a 'Save as Draft' workflow.

Inheritently the action will bypass validation giving the submission a different state.

Reset - Reset all fields on the form back to their pristine state

Event - Triggers an 'event' on the form which is usually correlated to application logic or form workflow logic

Oauth - Opens an OAuth authentication popup. This will only work after it has been assigned to an OAuth Action.

See the OAuth guide for more information on how to set up OAuth in your project.

Post to URL -

Custom - Write custom code to fire

Save On Enter: Use the Enter key to submit the form

Theme: Set a theme (color) for the button mapped to Bootstrap classes

Size: Determines the position of the option label relative to the option bubble

Block Button: Spans the button horizontally across the form

Left/Right Icon: Set an icon to the left or right side of the button label using Font Awesome icon classes.

Disable on Form Invalid: If any field on the form is invalid, disable the button.

Advanced Components

Advanced Components are often Basic Components that have been extended to meet more complex requirements. You can find information for each of the Advanced Components like unique settings below:

Email

The Email component is a string field that carries special input validation ensuring the entered data is in a valid email format. A valid email address consists of an email prefix and an email domain, both in acceptable formats.

Phone Number

The Phone Number field carries an input mask to force the user to enter the field data in Phone Number format.

EG (123) 123-1234

Address

The Address component is a special component that performs an address lookup based on user input using several map and location providers as well as Custom Provider support. Address data can also be entered in free form and will save the address as well as geolocation and other metadata.

Enable Manual Mode: Checking this setting adds a checkbox under the Address field. Should the user check this, the address lookup through the location provider is disabled, and the traditional address field will display for manual input (Address, City, State, Zip etc)

Switch To Manual Mode Label: The label of the checkbox used for the 'Enable Manual Mode' setting.

Disable Clear Icon: Removes the 'x' clear icon found at the far right of the field. You may want to check this setting to prevent any users from accidentally clicking the icon.

Date & Time

The Date/Time component is a powerful and flexible component that offers many options for validation, date ranges, and calculations using Moment.js.

Display In Timezone: This will display the captured date time in the selected timezone.

Of Viewer

Of Submission

Of Location

UTC

Use Local Settings: Use the Date/Time of your local machine

Allow Manual Input: Set by default, this setting will allow you to use your keyboard to input the value. When unchecked, the user will only be able to select the Date and Time from the calendar widget.

Format: The format the Date/Time will display in. By default, the format will be set to:

Copy

yyyy-MM-dd hh:mm a

Use formats provided by DateParser Codes for more options

Date

Enable Date Input: Enables selectable dates in the calendar widget and user input.

Disable Specific Dates: Blacklist certain dates by providing a date in the following format:

Copy

(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)

Custom Disabled Dates: Write Javascript to customize your disabled dates

Copy

// Disable all weekends
date.getDay() === 0 || date.getDay() === 6

Disable Weekends/Weekdays: Disables the selected days from the calendar picker.

Time

Enable Time Input: Enable or Disable the time input.

Hour/Minute Increment: Change the increment value when selecting a time from the Calendar Widget using the increment buttons.

12 Hour Time (AM/PM): Display time in 12-hour time with AM/PM.

Data

Flatpickr options: add new/override current Flatpickr options.

This field can be used to set the options of Flatpickr library, that is used to create the datepicker widget. A full list of the options can be found here.

It can also be used to set a translation for the datepicker. To do so, the user has to provide a value to the locale variable. In the following example, translation is set to French with the shorthand name of the locale:

Copy

{ "locale": "fr" }

FuA fullll list of the available locales and their shorthand names can be found here.

Validation

Default Date: Set a default Date and Time when a user renders the form. Utilize Moment.JS to set dynamic date ranges.

For example, this code will default the date to 10 days before the current date.

Copy

moment().subtract(10, 'days')

Use Calendar To Set Min/Max Date: Click in the setting field to open a Calendar to pick the minimum or maximum date.

Use Moment.js To Set Min/Max Date: Check this if you would rather use Moment.js to set your dates rather than the calendar picker

Day

The Day component is used to enter values for the Day, Month, and Year using a number or select type of field.

Hide Input Labels: Hide the labels of component inputs. Labels will be visible when using the Form Builder but hidden when the form is rendered.

Type of Input: Determines the type of input the user will use for the field.

Numer - User inputs a number to represent the field

Select - User will select a value relative to the field.

Hidden: When checked, this specific field will be hidden from the set of Day components

Day First: When checked, the day field will display first from the set of Day components

Placeholder: Text displayed inside the field and removed when there is user input.

Time

A stand-alone time field for manual input or a time selector widget.

Input Type: The type of widget the Time field will use:

HTML5, Text input with mask

Format: Set the formatting for the time when the Text input with mask setting is set.

Last updated