Widgets in Forms
This is the official documentation of the forestadmin-agent-django
and forestadmin-agent-flask
Python agents.
Field Widgets empower your Actions Forms providing various options to display inputs and ease operators in their daily operations.
Widgets
Widget | Supported types | Minimal version | Description |
---|---|---|---|
| All types |
| Use the default widget |
|
| Display a text input with address autocomplete. | |
|
| Display a checkbox with true/false and possibly null values. | |
|
| Display a group of checkboxes to select multiple values. | |
|
| Display a color picker to select a color. | |
|
| Display a currency input. | |
|
| Display a calendar date picker | |
|
| Users can choose between a limited set of values. | |
|
| Users can upload files. | |
|
| Display a Json editor with syntax highlighting. | |
|
| Display a standard number input. | |
|
| Display a standard number input to enter a list of number values. | |
|
| Group of radio buttons to choose a value from. | |
|
| Rich text area allowing to input formatted text. | |
|
| Multi-line text area. | |
|
| One-line text input. | |
|
| One-line text input to enter a list of string values | |
|
| Input for entering a time | |
|
| Dropdown containing the users available in the current project |
Address autocomplete widget
The address autocomplete widget allows to input an address as a text value, autocompleted by the Google Maps API.
The above code will produce the following form (when empty):
And once the user starts typing:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
Checkbox widget
The checkbox widget allows to activate or deactivate a boolean value.
The above code will produce the following form:
Options
The Checkbox
widget has no specific options, but its behavior can be customized using the following already existing options on fields:
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| boolean or | dynamic or static | optional |
| Default value of the field. Define a value different from |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| If |
| string | static value only | required |
| Field's label. |
By default, the Checkbox
widget allows 3 states:
None
True
False
To ensure having only 2 states, you need to:
set the
is_required
option toTrue
,define a value for the
default_value
option.
Checkbox group widget
The checkbox group widget allows to select multiple values from a list of options.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| StringList or NumberList | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| An array of values, or an array of value/label pairs. | dynamic or static | required |
| List of available options in the component. Supported formats:
|
Color picker widget
The color picker widget allows to select a color.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | static value only | optional |
| Allow users to select a color with an opacity. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
| string[] | static value only | optional |
| List of colors to display in the quick palette. The list can be an array of hex colors or rgba colors. |
Currency input widget
The currency input widget allows to input a currency value.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | required |
| Currency code to display in the component. Valid currency ISO codes ↗ is required. |
| number | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
|
| dynamic or static | optional |
| Base unit to use for the value.unitValue is expressed in the currency's base unit.centValue is expressed as a hundredth of the base unit (typically in cents). |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| number | dynamic or static | optional |
| Minimum value allowed. |
| number | dynamic or static | optional |
| Maximum value allowed. |
| string | static value only | optional |
| Placeholder shown in the component. |
| number | dynamic or static | optional |
| Step between two values. |
DatePicker widget
The date picker widget allows to input a date in a form
The above code will produce the following form :
Note: using a Dateonly
field type will hide the time section from the date picker
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| Date | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| string | dynamic or static | optional |
| The date picker uses |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| Date | dynamic or static | optional |
| The minimum date allowed to be set in the field |
| Date | dynamic or static | optional |
| The maximum date allowed to be set in the field |
| string | static value only | optional |
| Text will be shown as placeholder if the field is empty |
The dates are sent as ISO 8601 formatted strings over the network. In order to use them as Date
object in your hooks, you can parse them directly like so
Dropdown widget
The dropdown widget allows to select a value from a list of options.
The above code will produce the following form:
In this next example, we call a remote api to get a list of products and then perform a custom filter based on given fields of the json response, and return the first 25. This example uses "search": "dynamic"
dropdown widget, which provides you with the search_value
in the callback context.
Note: when a search is performed, only the field on which it is performed will have its options recomputed.
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| Coherent with | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| An array of values, or an array of value/label pairs | dynamic or static | required |
| List of available options in the component. Supported formats:
|
| string | static value only | optional |
| Placeholder shown in the component. |
|
| static value only | optional |
| Allow users to input text to filter values displayed in the dropdown.
- |
File picker widget
The file picker allows to upload files
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| File or File[] | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string[] | dynamic or static | optional |
| The whitelist of file extensions allowed. If not specified, any file extension will be accepted |
| number | dynamic or static | optional |
| The max file size allowed to upload. Any file size is allowed if left empty. Make sure your server will be able to handle it. |
| number (positive integer) | dynamic or static | optional |
| The max number of files allowed to be uploaded. If not specified, any number of files is allowed |
JSON editor widget
The JSON editor widget display a rich editor with syntax highlighting for JSON.
The above code will produce the following form:
Options
This widget does not have any options.
Number input widget
The number input widget allows to input a number value.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| number | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| number | dynamic or static | optional |
| Minimum value allowed. |
| number | dynamic or static | optional |
| Maximum value allowed. |
| string | static value only | optional |
| Placeholder shown in the component. |
| number | dynamic or static | optional |
| Step between two values. |
Number input list widget
The number input list widget allows to input a list of number values.
The above code will produce the following form (once the user entered two step values):
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| boolean | static value only | optional |
| Allow users to enter duplicate values. |
| boolean | static value only | optional |
| Allow users to enter empty values. |
| number[] | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | static value only | optional |
| Allow users to reorder values. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| number | dynamic or static | optional |
| Minimum value allowed. |
| number | dynamic or static | optional |
| Maximum value allowed. |
| string | static value only | optional |
| Placeholder shown in the component. |
| number | dynamic or static | optional |
| Step between two values. |
Radio group widget
The radio group widget allows to select a value from a list of options.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| Coherent with | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| An array of values, or an array of value/label pairs | dynamic or static | required |
| List of available options in the component. Supported formats:
|
Using the options
function, you can dynamically change the list of options based on the context, which contains information about the selected records and other values in the form. More info about dynamic configuration.
Rich text widget
The rich text widget allows to input a formatted text value.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
Text area widget
The text area widget allows to input a multiline string value.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | optional |
| Placeholder shown in the component. | |
| number | optional |
| Widget's height expressed as a number of rows. |
Text input widget
The text input widget allows to input a string value.
The above code will produce the following form:
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
Text input list widget
The text input list widget allows to input a list of string values.
The above code will produce the following form (once the user entered two tags):
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| boolean | static value only | optional |
| Allow users to enter duplicate values. |
| boolean | static value only | optional |
| Allow users to enter empty values. |
| boolean | static value only | optional |
| Allow users to reorder values. |
| string[] | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
Time picker widget
The time picker widget allows to select a time
The above code will produce the following form :
time picker does not support additional options
User dropdown widget
The user dropdown widget allows to input a user or list of users from the project
The above code will produce the following form (once the user has selected some users)
Options
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
| string | dynamic or static | optional |
| Default value when displaying the field for the first time. |
| string | dynamic or static | optional |
| Description shown above the field, with additional help for users. |
| boolean | dynamic or static | optional |
| Displays a read only field. |
| boolean | dynamic or static | optional |
| Requires the user to input a value before validating. |
| string | static value only | required |
| Field's label. |
| string | static value only | optional |
| Placeholder shown in the component. |
Last updated