Custom Form Elements

Introduction

This document will describe each form element available in the Visual Form Builder. For more information on configuring each element, see the Visual Form Builder guide.

Text Elements

Notification

Notification panels can be used to present information to the user in color coded panels.

Property Name	Type	Description
Default Value	String	The notification message that will be shown to the user.
Notification Type	String	The type of notification to be shown to the user. This will determine the icon and color of the notification panel. Possible values include: default, success, error, and warning.
Allow Timer	Boolean	If enabled, the notification panel will appear for a time span of 5 second before disappearing. If disabled, the notification panel will always remain visible on the form.
Show Close Button	Boolean	If enabled, a close button will appear to the right of the panel, allowing the end user to close the panel.

Paragraph

A paragraph is used to display a paragraph of text in the form.

Property Name	Type	Description
Default Value	String	The text of the paragraph that will appear on the form.

Subtitle

The form subtitle that will appear beneath the top header.

Property Name	Type	Description
Default Value	String	The subtitle of the form that will be shown to the user.

Input Elements

Date

A date input field that requests the end-user to enter a date.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default date that will be shown on the form. By default, the date format will be displayed as DD/MM/YYYY.
Default Date Format	String	The format that the default date value will be displayed in. Various date formats are supported including YYYY-MM-DD, MM/DD/YYYY, and DD. MM. YYYY. By default, the date will be displayed in DD/MM/YYYY
Language-specific Formatting	String	Allows users to configure the default date format per supported language.
Error - Invalid format	String	The error message to display when the end-user enters a date in an invalid format.
Error - Missing input	String	The error message to display when the end-user has not entered a valid date. This error is thrown when the element is set to 'Required'.
Required	Boolean	When enabled, this element will require a valid date before the form can be completed. This is disabled by default.
Allow Today	Boolean	When enabled, the date element will accept the current date as input. This is enabled by default.
Max Date	Date	The maximum date that will be accepted as valid input.
Minimum Date	Date	The minimum date that will be accepted as valid input.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Email

A string input field that requests the end-user to enter a valid email.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default email that will be shown on the form.
Error - Invalid format	String	The error message to display when the end-user enters an email address in an invalid format.
Error - Missing input	String	The error message to display when the end-user has not entered a valid email address. This error is thrown when the element is set to 'Required'.
Required	Boolean	When enabled, this element will require a valid email address before the form can be completed. This is disabled by default.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Number

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default email that will be shown on the form.
Error - Invalid format	String	The error message to display when the end-user enters a number in an invalid format.
Error - Missing input	String	The error message to display when the end-user has not entered a valid number. This error is thrown when the element is set to 'Required'.
Required	Boolean	When enabled, this element will require a valid email address before the form can be completed. This is disabled by default.
Min number	Integer	The minimum number that must be entered.
Max number	Integer	The maximum number that can be entered.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Phone

A string number input field that requests the end-user to enter a valid phone number.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default phone number that will be shown on the form.
Default Country	String	A drop-down list of countries that will determine the prefix of the phone number.
Error - Invalid format	String	The error message to display when the end-user enters a phone number in an invalid format.
Error - Missing input	String	The error message to display when the end-user has not entered a valid phone number. This error is thrown when the element is set to 'Required'.
Required	Boolean	When enabled, this element will require a valid phone number before the form can be completed. This is disabled by default.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Text

A string input field that requests the end-user to enter a string of text.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default text that will be shown on the form.
Error - Invalid format	String	The error message to display when the end-user enters a phone number in an invalid format.
Error - Length out of range	String	The error message to display when the end-user has entered text that exceeds the maximum or minimum length defined for the element.
Error - Missing input	String	The error message to display when the end-user has not entered a valid phone number. This error is thrown when the element is set to 'Required'.
Required	Boolean	When enabled, this element will require a valid phone number before the form can be completed. This is enabled by default.
Length - Min	Integer	The minimum number of characters required before the form can be completed. The default value is 1.
Length - Max	Integer	The maximum number of characters required before the form can be completed. The default value is 1.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Password

A string input field that captures a password from the user.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
UI Label	String	A label that will help to advise to end-users on what information is expected in the field. This field is mandatory.
Default Value	String	The default password that will be shown on the form.
Confirmation Default Value	String	The default password that will be shown for the password confirmation field.
Required	Boolean	When enabled, this element will require a valid phone number before the form can be completed. This is enabled by default.
Length - Min	Integer	The minimum number of characters required before the form can be completed. The default value is 1.
Length - Max	Integer	The maximum number of characters required before the form can be completed. The default value is 1.
Lowercase - Min	Integer	The minimum number of lowercase characters that are required.
Uppercase - Min	Integer	The minimum number of uppercase characters that are required.
Numbers - Min	Integer	The minimum amount of number characters that are required.
Allowed Special Characters	Boolean	Whether special characters are allowed within the password.
Number of Special Characters - Min	Integer	The minimum number of special characters that are required. Only applicable if 'Allowed Special Characters' is true.
Not Match Username	Boolean	Determines whether the password can be a match of the username.
UsernameId	String	ID of the username text field to match the password against. Only applicable of 'Not Match Username' is true.
Error - Missing input	String	The error message to display when the end-user has not entered a valid password. This error is thrown when the element is set to 'Required'.
Error - Length out of range	String	The error message displayed when the end-user has entered a password that is not within the defined minimum and maximum length. Only applicable if a min/ max length is defined.
Error - Min Lowercase	String	The error message displayed when the end-user has entered a password that does not meet the minimum number of lowercase letters requirement. Only applicable if a minimum lowercase amount is defined.
Error - Min Uppercase	String	The error message displayed when the end-user has entered a password that does not meet the minimum number of uppercase letters requirement. Only applicable if a minimum uppercase amount is defined.
Error - Allow Special Characters	String	The error message displayed when the end-user has entered a password that contains a special character when the 'Allow Special Characters' value is set to false.
Error - Min Special Characters	String	The error message displayed when the end-user has entered a password that does not meet the minimum number of special letters requirement. Only applicable if a minimum special character amount is defined.
Error - Username match Password	String	The error message displayed when the end-user has entered a password that matches the username. Only applicable if 'Not match Username' is set to true.
Read Only	Boolean	If enabled, this element will not be editable by the end-user. This is disabled by default.

Button Elements

Submit

A button that will submit the completed form and move to the next step of the ID&V process.

Property Name	Type	Description
Default Value	String	The button text that will be shown on the form.

Retake

Returns the form to default value and requests the user to retake the form.

Property Name	Type	Description
Default Value	String	The button text that will be shown on the form.

Continue

Enables users to proceed to the next step of the ID&V process without explicitly submitting a form. This can be used for read-only and non read-only forms.

Property Name	Type	Description
Default Value	String	The button text that will be shown on the form.

Image Elements

Image

Displays an image within the form.

Property Name	Type	Description
Element ID	String	A unique identifier that is used to identify the form element within the JSON summary report. This field is mandatory.
Image Source	File	File upload to add an image to the form. Supported file types include: jpg, jpeg, and png. Max image size is 5 MB.
Image description	String	An alternative text description that will be shown to the user if the image cannot be found. This field is optional.
Image width	Integer	Width value represented in pixels. For example: "50". This field is optional.
Image height	Integer	Height value represented in percentage or pixel. For example: "50". This field is optional.

Last updated on