Introduction
HelloID Dynamic Forms are a powerful part of the Self Service module. They allow you to gather more information about a user's Self Service product request, and use that information further on in the request process. Understanding the form designer is a key component to building effective forms. This article will go through all of the components of the form designer and their function.
Form Designer
When you first create a form, you are presented with a blank Form Designer interface. It contains the following components:
- Form Name
The name of the newly created form. - Form Field List
A list of all available form fields, each of which will be detailed later in this article. - Workspace
This is the area in which you will place and configure your form's fields. To add a field here, either click its plus (+) icon, or drag it onto the workspace. - Advanced Editor
The advanced editor allows you to view and modify the code that creates the form. If you have a form that you want to use as a starting template, you can save the code here, and paste it into any new forms.
Form Field Basics
After placing fields into your workspace, you may edit the field's properties by clicking on its pencil icon. Alternatively, you can remove a field by clicking on its trashcan icon.
When multiple fields are present, you may reorder them by dragging the field up or down with its drag control.
Form fields come in two varieties: display fields and input fields.
Display fields are simple HTML tags that display static content, such as headers and blocks of text. These are useful for presenting information to the end user that is filling out the form. Their properties generally only include what text is to be displayed, and whether or not their value is shown on the form summary.
Input fields are form elements into which end users may place values, either by typing or selecting from a list. The customization options for input fields is much greater than display fields. Each input field has validation options that you may use to ensure submitted values conform to expected inputs (e.g., a phone number must be in a certain format), as well as a form key (i.e., variable name) that can be used later on in the request process.
In the screenshot below, you can see the properties dialog of a text input field.
Advanced Editor
The advanced form editor can be used to examine the JSON code that makes up your form, and to validate test input values. For this example, we've created a basic form that asks for a user's first name, last name, and email address. All fields are required.
The advanced editor has the following components:
- Form Definition
This is the JSON code that makes up the form. You can edit the form's properties directly from here if necessary, but it is recommended to use the basic designer. You may also copy the JSON code and paste it into another form to create a copy, without having to manually add all of the fields again. - Form Preview
This is a live preview of the form. Any changes made to the form definition will automatically show up here. You may also submit form values to test validation and form results. - Form Result
This is a representation of the data that was submitted through the form. The information here is useful for verifying that the data submitted is being put into the variables that you expect.
Field Types
Listed below is a brief description, screenshot, and property list for all available field types within HelloID Dynamic Forms.
Checkbox Input
This will add a single check box to the form. You may choose whether to display a classic checkbox, or a toggle switch.
Properties:
- Label
- Placeholder
- Use switch
- Use data source
- Checked by default
- Validation Options:
- Must be checked
- Form key
- Hide from summary
- Conditional visibility
Confirm Password Input
This field adds two password inputs to the form. The value of both must match before the form may be submitted.
Properties:
- Label
- Placeholder
- Prefilled value (this will populate both fields)
- Validation Options:
- Required (yes/no)
- Minimum length
- Maximum length
- Pattern match (regular expression)
- Form key
- Hide from summary
- Conditional visibility
- Make component dependent
Date & Time
This will add a date and time selector to your form. The date is in day, month, year format.
Properties:
- Label
- Show date only
- Use data source
- Form Key
- Hide from summary
- Conditional visibility
Drop Down
This will add a drop down list to the form. Its values are statically defined during form creation. You may also choose to use an existing data source, such as HelloID groups.
Properties:
- Label
- Use Data Source
- Default selected value
- Enable filter (adds a search bar)
- Validation Options:
- Required (yes/no)
- Form key
- Hide from summary
- Conditional visibility
- Selectable values
Dual List
This will add a dual list control to the form. It allows you to move items from one list to another, such as "available groups" and "assigned groups".
Properties:
- Label
- Use Data Source
- Enable filter
- Dual list options definition (if not using a data source)
- Make list filterable (adds a search bar)
- Form key
- Left side column label
- Right side column label
- Hide from summary
- Conditional visibility
- Mapping properties
- Key
- Display
Email Input
This field adds an email address input to the form.
Properties:
- Label
- Placeholder
- Use data source
- Prefilled value
- Invalid email validation message
- Validation Options:
- Required (yes/no)
- Form Key
- Hide from summary
- Conditional visibility
Grid
This field creates a grid with selectable rows based on data from a data source.
Properties
- Label
- Select data source
- Use search filter
- Validation Options:
- Required (yes/no)
- Form Key
- Hide from summary
- Conditional visibility
- Height
Header
This field adds an <h3> tag to the form with the static text of your choosing.
Properties:
- Use data source
- Header text
- Hide from summary
- Conditional visibility
Markdown
This will add a paragraph of markdown text field to the form, where you may add various types of formatting and external links.
Properties:
- Hide from summary
- Conditional visibility
- Use data source
- Text
Multi Checkbox
This will add a group of checkboxes to the form. You may use this to allow form users to select zero or more options from the group.
- Label
- Use switch
- Align options vertical
- Use data source
- Form key
- Hide from summary
- Conditional visibility
- Checkbox items
- Label
- Value
- Must be checked
Multiselect
This will add a multiselect field to the form, where users can select any number of given values. Its values are statically defined during form creation.
Properties:
- Label
- Use data source
- Default selected value
- Enable filter (adds a search bar)
- Validation Options:
- Required (yes/no)
- Form Key
- Hide from summary
- Conditional visibility
- Selectable values
Number Input
This field adds a numeric input to the form.
Properties:
- Label
- Placeholder
- Use data source
- Prefilled value
- Validation Options:
- Required (yes/no)
- Minimum length
- Maximum length
- Form Key
- Hide from summary
- Conditional visibility
Password Input
This field adds a single password input to the form. No confirmation is necessary.
Properties:
- Label
- Placeholder
- Use data source
- Prefilled value
- Validation Options:
- Required (yes/no)
- Minimum length
- Maximum length
- Pattern match (regular expression)
- Form key
- Hide from summary
- Conditional visibility
- Make component dependent
Radio
This will add a set of radio buttons to the form. Its values are statically defined during form creation.
Properties:
- Label
- Use data source
- Default selected value
- Validation Options:
- Required (yes/no)
- Form key
- Hide from summary
- Conditional visibility
- Selectable values
Text
This field adds a paragraph of static text to the form with the contents of your choosing.
Properties:
- Use data source
- Text
- Hide from summary
- Conditional visibility
Text Area
This will add a text are to the form.
Properties:
- Label
- Placeholder
- Use data source
- Prefilled value (this will populate both fields)
- Validation Options:
- Required (yes/no)
- Minimum length
- Maximum length
- Pattern match (regular expression)
- Form key
- Hide from summary
- Text area height
- Conditional visibility
Text Input
This field adds a single line text input to the form.
Properties:
- Label
- Placeholder
- Use data source
- Prefilled value
- Validation Options:
- Required (yes/no)
- Minimum length
- Maximum length
- Pattern match (regular expression)
- Form Key
- Hide from summary
- Conditional visibility
- Make component dependent
Time
This will add a time selector to your form.
Properties:
- Label
- Use data source
- Form Key
- Hide from summary
- Conditional visibility
User Selector
This will add a user selection dropdown field to the form, where the user of the form can select another HelloID user in your organization. This can be used to perform actions on the selected user, or pass along that user's information as part of the form submission.
Properties:
- Label
- Scope
- Validation Options:
- Required (yes/no)
- Form Key
- Hide from summary
- Conditional visibility