Widgets
Last updated
Was this helpful?
Last updated
Was this helpful?
This is the official documentation of Forest Admin Cloud.
Widgets improve your Forms by offering a range of input display options:
null
any: Use the default widget.
String: Enables quick address input.
Boolean: Display a checkbox with false
, true
or null
values.
StringList, NumberList: Display a group of checkboxes to select multiple values.
String: Select a color from the color picker.
Number: Display a field to enter money amount.
Date, Dateonly, String: Select a date from the date picker.
: Date, Dateonly, Number, String, StringList: Select from a limited set of values.
File, FileList: Display a file uploader to upload files.
Json: Display a JSON editor with syntax highlighting.
Number: Display a standard number input.
NumberList: Display a group of number inputs to select multiple values.
Date, Dateonly, Number, String: Display a set of radio buttons.
String: Display a rich text area allowing to input formatted text.
String: Display a text area allowing the input of multiple lines of text.
String: Display a text box allowing the input of a single line of text.
StringList: Display a group of text inputs to enter multiple values.
String, StringList: Display a dropdown with users in the ForestAdmin project.
To make the code easier to read, all the code snippets below should be wrapped in the following code. Ensure you update the collection and action names as needed.
The AddressAutocomplete
facilitates quick input of addresses by offering suggestions from the Google Maps API.
Options:
placeholder
String: Shows a hint within the widget when no content is present.
The Checkbox
widget enables users to toggle a boolean value. The default behavior allows three states: false
, true
, and null
.
Options:
defaultValue
Boolean: Specify the default value.
isRequired
Boolean: Activate this option to only supports two states false
and true
.
The CheckboxGroup
allows to select multiple values from a list of options.
Options:
options
* [String or Object] or Function: Specify the list of options available. The supported formats are:
['Good', 'Very good']
[{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
(context) => ['Good', 'Very good']
(context) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
The ColorPicker
widget enables color selection.
Options:
enableOpacity
Boolean: Enables the option to select colors with adjustable opacity levels.
placeholder
String: Shows a hint within the widget when no content is present.
quickPalette
[String]: Provides a selection of pre-defined Hex or RGBA colors for expedited color choices.
The CurrencyInput
widget enables users to input a currency value.
Options:
base
String: When specifying currency, use Unit
for whole units and Cent
for cents.
max
Number: Maximum value allowed.
min
Number: Minimum value allowed.
placeholder
String: Shows a hint within the widget when no content is present.
step
Number: The interval between two values.
The DatePicker
widget helps you choose a date. If set to Date
, you can select a date and time. If set to Dateonly
, you can only pick a date.
Options:
max
Date: The maximum date allowed.
min
Date: The minimum date allowed.
placeholder
String: Shows a hint within the widget when no content is present.
The Dropdown
widget allows to select a value from a list of options.
Options:
Specify the list of options available. The supported formats are:
options
* [String or Object] or Function: Specify the list of options available. The supported formats are:
['Good', 'Very good']
[{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
(context, searchValue) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
placeholder
String: Shows a hint within the widget when no content is present.
search
String: Enable users to input text to refine options shown in the dropdown.
disabled
: Users need to scroll to select their desired option.
static
: Users can search for a value by typing terms. The search will be conducted in the browser, based on the labels.
dynamic
The search happens on the backend, using custom code to get the needed options.
The FilePicker
widget allows to upload a file.
Options:
extensions
[String] or Function: The whitelist of file extensions allowed. If not specified, any file extension will be accepted. The value can be either a list of strings or a function that returns a list of strings.
maxSizeMb
Number or Function: The maximum file size for uploads. If not specified, there is no limit. Ensure your server can support the file sizes being uploaded. The value can be either a number or a function that returns a number.
maxCount
Number or Function: The maximum number of files allowed to be uploaded. If not specified, any number of files is allowed. The value can be either a number or a function that returns a number.
The JsonEditor
widget provides an interface focused on JSON syntax highlighting.
The NumberInput
widget enables users to input numerical values.
The NumberInputList
widget allows to input a list of numberical values.
Options:
allowDuplicates
Boolean: Enable/disable duplicate value entry.
allowEmptyValues
Boolean: Enable/disable empty value entry.
allowReorder
Boolean: Enable/disable to reorder values.
max
Number: Maximum value allowed.
min
Number: Minimum value allowed.
placeholder
String: Shows a hint within the widget when no content is present.
step
Number: The interval between two values.
A RadioButton
lets you choose one option from a list.
Options:
options
* [String or Object] or Function: Specify the list of options available. The supported formats are:
['Good', 'Very good']
[{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
(context) => ['Good', 'Very good']
(context) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]
The rich text widget enables formatted text input.
Options:
placeholder
String: Shows a hint within the widget when no content is present.
The TextArea
widget lets you type in more than one line of text.
Options:
rows
Number: Display the desired number of rows.
placeholder
String: Shows a hint within the widget when no content is present.
The TextInput
widget lets you type one line of text.
Options:
placeholder
String: Shows a hint within the widget when no content is present.
The TextInputList
widget lets you enter multiple text values.
Options:
allowDuplicates
Boolean: Enable/disable duplicate value entry.
allowEmptyValues
Boolean: Enable/disable empty value entry.
allowReorder
Boolean: Enable/disable to reorder values.
placeholder
String: Shows a hint within the widget when no content is present.
The TimePicker
widget helps you choose a time.
The UserDropdown
widget lets you select one or more users from your Forest Admin project.
Options:
placeholder
String: Shows a hint within the widget when no content is present.
currency
* String: Currency code to display in the component. Valid currency is required.
format
String: The date picker uses moment.js
library under the hood. You can refer to to specify your date display format.