Advanced Fields
Home> CHEFS Components > Form Builder Components > Advanced Fields
 |
Advanced Fields in form builders are an extension of Basic Fields, specifically designed to cater to more complex requirements. They offer additional features, functionality, or customization options beyond what the Basic Components provide |
|---|
Page content:
- Text Field
- Text Area
- Url
- Number
- Phone Number
- Tags
- Address
- Password
- Date Time
- Checkbox
- Day
- Time
- Select Boxes
- Select
- Currency
- Radio
- Button
- Survey
- Signature
The Text/Images input field is a versatile option for entering short and general text. It provides rules and validations to manage and format the information based on specific requirements. It also offers additional features like multiple masks, label hiding, word/character counters, spellcheck, and disabled mode for added functionality.
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.
The Text Area input field is an enhanced version of a multi-line input field with (Basic layout). It enables users to enter multiple lines of text, making it ideal for longer messages, descriptions, or comments.
In addition to the basic functionality, the Text Area offers several advanced features:
- Hidden: It can be hidden from view.
- Hide Label: The label associated with the Text Area can be hidden.
- Show Word Counter: It displays a counter indicating the number of words entered.
- Show Character Counter: A counter indicates the number of characters entered.
- Initial Focus: It can be set to receive focus when the page loads automatically.
- Allow Spellcheck: It enables spellcheck for the entered text.
- Disabled: It can be disabled, preventing any user interaction.
- Table View: It can be displayed in a table format.
- Modal Edit: It can be edited within a modal window.
Similar to the Email field, the URL component is a string field that carries special input validation ensuring the entered data is in a valid URL format. Validation will check to see if the entered input data is at least in the correct format to be a legitimate URL potentially.
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.
The Phone Number field carries an input mask to force the user to enter the field data in Phone Number format.
The Tag component draws attention to or categorizes elements on your form. Multiple tags can be added to one Tag field.
Back to top 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.
Unique Settings
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.
Form.io is integrated with several Location and Map providers for fast and easy address lookup and geolocation data.
Azure Maps: Set up your own Azure Map account and provide the subscription key to enable this map provider.
Open Street Map Nominatim: Nominatim is a tool to search OSM data by name and address and to generate synthetic addresses of OSM points
Custom: Provides settings to integrate your own custom map provider.
Google Maps: Set up a Google Map API to utilize Google's location and map technology.
Manual Mode View String: Specify the template to be used when querying the view string for component values entered in manual mode. This string is used in the table view, CSV export, and email rendering. When left blank combined value of all components joined with a comma will be used.
The password field has the same options as a text field component. It differs from a text field in that its HTML type will be password instead of text. This will cause the field to display hidden input symbols instead of the entered value.
The Date/Time component is a powerful and flexible component that offers many options for validation, date ranges, and calculations.
Unique Settings
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: yyyy-MM-dd hh:mm a
Use formats provided by DateParser Codes for more options
**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: (yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)
Custom Disabled Dates: Write Javascript to customize your disabled dates
// Disable all weekends date.getDay() === 0 || date.getDay() === 6 Disable Weekends/Weekdays: Disables the selected days from the calendar picker.
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.
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:
{ "locale": "fr" }
FuA fullll list of the available locales and their shorthand names can be found here.
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 prior to the current date.
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
A check box can be used for boolean value input field. It can either be checked (true) or unchecked (false). There are options to set Shortcut and Input Type.
Unique Settings
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 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.
Unique Settings
Values - Set the options that can be picked for this component. Label is the front-end identifier and the Value is the backend identifier for the option.
When setting the option value, use only Strings or Numeric values.
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
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
Unique Settings
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.
The Survey component works similarly to the radio. Instead of one question, users are able to select a value for multiple questions which are configured within the component settings. Survey is a great component to utilize when asking multiple questions with the same context of answers or values.
Unique Settings
Questions: The questions presented to the user, displayed vertically in the left-hand column
Values: Values are the answer that can be selected for each question.
Tooltip: Add a tooltip to any of the Questions or Values to help better communicate with your users.
The Signature component allows the end-user to digitally sign a signature pad with either their finger on a touch-enabled device or with the mouse pointer. When the form is submitted, the Signature pad will be converted into an image and stored with the form submission.
- Basic Layout
- Basic Fields
- Advanced Layout
- Advanced Fields
- Advanced Data
- BC Government