Advanced Components
This document outlines the Advanced Components used in form-building platforms. These components extend basic input fields with enhanced functionality, validation, and integration capabilities. Each section includes a description, unique settings, and usage notes.
| Component | Description | Use Case |
|---|---|---|
| A string field with built-in validation for standard email formats. | Collecting and validating user email addresses. | |
| URL | A string field that validates input as a properly formatted URL. | Capturing website links or references. |
| Phone Number | Enforces a phone number format using an input mask (e.g., (123) 123-1234). | Standardized phone number collection. |
| Tags | Allows multiple tags with settings for delimiter, max tags, and storage format (CSV or array). | Categorizing or labeling form entries. |
| Address | Supports automatic address lookup and geolocation via third-party providers as the primary feature. Additionally, you have the option to enter location details manually using a free-form address entry setting. | Capturing structured address data with optional geolocation. |
| Date & Time | Flexible date/time input with timezone. Stores data in ISO 8601 format. | Scheduling, filtering, and validating temporal data. |
| Currency | Numeric input with two decimal precision, comma separators, and currency symbol prefix. | Capturing and formatting monetary values. |
| Currency | A custom component that embeds a Monaco-based code editor for writing and validating XML or JSON. | Embedding and validating structured code input. |
| Survey | Matrix-style component for multiple questions with shared answer options. Supports tooltips for guidance. | Structured surveys or feedback collection. |
| Signature | Captures digital signatures via mouse or touch. Stored as an image. | Collecting digital consent or approvals. |
The Email component is a text input field with built-in real-time validation to ensure the input conforms to standard email address formats.
URL
The URL component validates that the input is a properly formatted web address. Ensures input is a valid URL (e.g., https://example.com).
Phone Number
This component enforces a phone number format using an input mask.
Tags
The Tags component allows users to categorize or label form entries with multiple tags. You can input several tags in a single field, separated by a defined delimiter.
| Unique Setting | Description |
|---|---|
| Delimiter | Character used to separate tags |
| Max Tags | Maximum number of tags allowed |
| Store As |
Format for storing tag data:
|
Address
The Address component enables you to input location details with support for automatic address lookup and geolocation via third-party providers. It operates in automatic mode, where selecting a provider is mandatory to enable real-time address suggestions and geolocation metadata.
You also have the option to switch to manual entry, allowing you to input address information in free-text format if needed. Regardless of the mode, the component stores address data along with geolocation and relevant metadata, making it suitable for applications requiring location-based functionality.
Display Tab Unique Settings
| Unique Setting | Description |
|---|---|
| Enable Manual Mode | Activating this option introduces a checkbox beneath the address input field. When selected by the user, it disables automatic address lookup. Instead, it presents a traditional address form where users can manually input details such as street address, city, state, and ZIP code. |
| Switch To Manual Mode Label | Defines the custom label next to the checkbox that enables manual address entry. |
| Disable Clear Icon | Hides the clear (X) icon to prevent accidental deletion. |
Provider Tab Unique Settings
| Unique Setting | Description |
|---|---|
| Provider | The Address component exclusively supports Azure Maps as the address provider. To use Azure Maps, create an account and provide your subscription key. This enables access to Microsoft’s mapping services. |
|
Manual Mode View String |
Specifies the template used to display the component's value when entered manually. This format will be applied in table views, CSV exports, and email outputs. If no template is specified, all address components will be automatically combined into a single, comma-separated string. |
Date & Time
A flexible component for selecting or inputting date and time values. Stores data in ISO 8601 format. It offers robust functionality for capturing and managing date and time inputs. It supports advanced features such as validation, date range constraints, and dynamic date calculations powered by Moment.js, making it well-suited for applications that require accurate time zone handling, filtering, and precise scheduling.
Display Tab Settings
Display in Timezone
This setting controls how the date and time values are shown to users, depending on the selected timezone mode. These modes help ensure the correct interpretation of time across different locations.
| Timezone Mode | Description |
|---|---|
| Of Viewer | Displays the date/time in the viewer’s local timezone. Ideal when the value should reflect the user's current location. |
| Of Submission | Retains the timezone from when the form was submitted. If viewed from another timezone, an indicator will show the original timezone. |
| Of Location | Allows selection of a fixed timezone via a dropdown. The date/time will always display in this set timezone, with an indicator if viewed from elsewhere. |
| UTC | Displays values in Coordinated Universal Time (UTC), ensuring consistency across all users and systems. Best for standardized time references. |
Input Settings
| Unique Setting | Description | ||||||
|---|---|---|---|---|---|---|---|
| Use Locale Settings | Uses the date and time from the user’s local machine. | ||||||
| Allow Manual Input | When enabled (default), users can type in the date/time. If disabled, input is restricted to the calendar/time picker. | ||||||
| Format | Defines how the date/time appears. Default format: yyyy-MM-dd hh:mm a. You can customize using DateParser format codes. | ||||||
| Shortcut Buttons |
Allows configuration of custom buttons displayed above the calendar interface. These buttons provide quick access to predefined date/time selections.
|
Date Tab Settings
| Unique Setting | Description |
|---|---|
| Enable Date Input | Activates the calendar widget for date selection and manual entry. |
| Disable specific dates or dates by range | Prevents selection of certain dates. Use formats like yyyy-MM-dd or a range yyyy-MM-dd - yyyy-MM-dd. |
| Custom Disabled Dates/ Disabling dates by a function | Add JavaScript here to define logic for disabling dates. |
| Disable Weekends/ Weekdays | Disable specific days of the week from being selected in the calendar. |
Time Tab Settings
| Unique Setting | Description |
|---|---|
| Enable Time Input | Allows users to select or enter a time value. |
| Hour/Minute Step Size | Sets the step interval for hours and minutes in the time picker. |
| 12 Hour Time (AM/PM) | Displays time in 12-hour format with AM/PM indicators instead of 24-hour format. |
Data Tab Settings
| Unique Setting | Description |
|---|---|
| Default Date | Sets the default date/time when the form loads. Use Moment.js for dynamic values. Example:moment().subtract(10, 'days') |
| Flatpickr options | Experlogix Documents uses the Flatpickr library to create its date/time picker. You can customize its behavior by providing additional configuration options. Example: You can change the language or locale, set the locale property in the configuration. |
Validation Tab Settings
| Unique Setting | Description |
|---|---|
| Use calendar to set minDate/ maxDate | Opens a calendar to select the minimum or maximum allowed date. |
| Use Input to add moment.js for maxDate/ minDate | Allows you to define date limits using Moment.js expressions instead of the calendar picker. |
Currency
This component is used for monetary input with formatting and currency symbol support. It features a numeric input mask that supports two decimal places and automatically formats numbers with comma separators as the user types. It also allows selection of a specific currency, which updates the displayed currency symbol accordingly.
| Unique Setting | Description |
|---|---|
| Currency | Sets the currency symbol and format used in Currency input field. |
Code Editor
The Code Editor component allows users to input structured code directly within a form using the Monaco Editor. It supports syntax highlighting, language selection (XML or JSON), and automatic validation with error feedback. This component is ideal for applications requiring embedded code input and schema generation.
Survey
The Survey component allows users to answer multiple related questions using a shared set of response options, making it ideal for efficiently collecting structured feedback.
| Unique Setting | Description |
|---|---|
| Questions | Defines the list of questions displayed vertically |
| Values | Defines the answer options for each question |
Signature
Captures a digital signature using a mouse or touch input. The signature is stored as an image during form submission.