Widgets in Forms
Last updated
Last updated
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.
Widget | Supported types | Minimal version | Description |
---|---|---|---|
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:
The checkbox widget allows to activate or deactivate a boolean value.
The above code will produce the following form:
The Checkbox
widget has no specific options, but its behavior can be customized using the following already existing options on fields:
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 to True
,
define a value for the default_value
option.
The checkbox group widget allows to select multiple values from a list of options.
The above code will produce the following form:
The color picker widget allows to select a color.
The above code will produce the following form:
The currency input widget allows to input a currency value.
The above code will produce the following form:
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
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
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.
The file picker allows to upload files
The above code will produce the following form:
The JSON editor widget display a rich editor with syntax highlighting for JSON.
The above code will produce the following form:
This widget does not have any options.
The number input widget allows to input a number value.
The above code will produce the following form:
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):
The radio group widget allows to select a value from a list of options.
The above code will produce the following form:
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.
The rich text widget allows to input a formatted text value.
The above code will produce the following form:
The text area widget allows to input a multiline string value.
The above code will produce the following form:
The text input widget allows to input a string value.
The above code will produce the following form:
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):
The time picker widget allows to select a time
The above code will produce the following form :
time picker does not support additional options
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)
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
Option | Type | Dynamic support | Usage | Minimal version | Description |
---|---|---|---|---|---|
null
All types
1.3.0
Use the default widget
String
1.3.0
Display a text input with address autocomplete.
Boolean
1.3.0
Display a checkbox with true/false and possibly null values.
StringList
, NumberList
1.3.0
Display a group of checkboxes to select multiple values.
String
1.3.0
Display a color picker to select a color.
Number
1.3.0
Display a currency input.
Date
, Dateonly
, String
1.3.0
Display a calendar date picker
Date
, Dateonly
, Number
, String
, StringList
1.3.0
Users can choose between a limited set of values.
File
, FileList
1.3.0
Users can upload files.
Json
1.3.0
Display a Json editor with syntax highlighting.
Number
1.3.0
Display a standard number input.
NumberList
1.3.0
Display a standard number input to enter a list of number values.
Date
, Dateonly
, Number
, String
1.3.0
Group of radio buttons to choose a value from.
String
1.3.0
Rich text area allowing to input formatted text.
String
1.3.0
Multi-line text area.
String
1.3.0
One-line text input.
StringList
1.3.0
One-line text input to enter a list of string values
Time
1.3.0
Input for entering a time
String
, StringList
1.3.0
Dropdown containing the users available in the current project
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
default_value
boolean or None
dynamic or static
optional
1.3.0
Default value of the field. Define a value different from None
in combination to is_required
to receive a not-null value even if the user did not click the widget.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
1.3.0
If is_required
is set to false (default value), the checkbox widget allows users to choose between 3 states: True
, False
and Null
. Setting is_required
to True
only allows 2 states: True
and False
. In both cases the default value will be None
if not defined.
label
string
static value only
required
*
Field's label.
default_value
StringList or NumberList
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
options
An array of values, or an array of value/label pairs.
dynamic or static
required
1.3.0
List of available options in the component. Supported formats:
["Good", "Very good"]
[{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}]
lambda context: ["Good", "Very good"]
(context) => [{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}]
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
enable_opacity
boolean
static value only
optional
1.3.0
Allow users to select a color with an opacity.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
quick_palette
string[]
static value only
optional
1.3.0
List of colors to display in the quick palette. The list can be an array of hex colors or rgba colors.
currency
string
dynamic or static
required
1.3.0
Currency code to display in the component. Valid currency ISO codes ↗ is required.
default_value
number
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
base
Unit
(default value) or Cent
dynamic or static
optional
1.3.0
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).
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
min
number
dynamic or static
optional
1.3.0
Minimum value allowed.
max
number
dynamic or static
optional
1.3.0
Maximum value allowed.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
step
number
dynamic or static
optional
1.3.0
Step between two values.
default_value
Date
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
format
string
dynamic or static
optional
1.3.0
The date picker uses moment.js
library under the hood. You can refer to this documentation ↗ to specify your date display format
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
min
Date
dynamic or static
optional
1.3.0
The minimum date allowed to be set in the field
max
Date
dynamic or static
optional
1.3.0
The maximum date allowed to be set in the field
placeholder
string
static value only
optional
1.3.0
Text will be shown as placeholder if the field is empty
default_value
Coherent with Type
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
options
An array of values, or an array of value/label pairs
dynamic or static
required
1.3.0
List of available options in the component. Supported formats:
["Good", "Very good"]
[{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}]
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
search
static
, dynamic
or disabled
(default)
static value only
optional
1.3.0
Allow users to input text to filter values displayed in the dropdown.
- disabled
: Users need to scroll to find the appropriate option.
- static
: Users can search a value by typing terms in an input. The search will be done in the browser, based on the label.
- dynamic
The search is performed on the agent side, using any custom logic needed to fetch the required options
default_value
File or File[]
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
extensions
string[]
dynamic or static
optional
1.3.0
The whitelist of file extensions allowed. If not specified, any file extension will be accepted
max_size_mb
number
dynamic or static
optional
1.3.0
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.
max_count
number (positive integer)
dynamic or static
optional
1.3.0
(only available if the field type is FileList
)
The max number of files allowed to be uploaded. If not specified, any number of files is allowed
default_value
number
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
min
number
dynamic or static
optional
1.3.0
Minimum value allowed.
max
number
dynamic or static
optional
1.3.0
Maximum value allowed.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
step
number
dynamic or static
optional
1.3.0
Step between two values.
allow_duplicates
boolean
static value only
optional
1.3.0
Allow users to enter duplicate values.
allow_empty_values
boolean
static value only
optional
1.3.0
Allow users to enter empty values.
default_value
number[]
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
enable_reorder
boolean
static value only
optional
1.3.0
Allow users to reorder values.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
min
number
dynamic or static
optional
1.3.0
Minimum value allowed.
max
number
dynamic or static
optional
1.3.0
Maximum value allowed.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
step
number
dynamic or static
optional
1.3.0
Step between two values.
default_value
Coherent with Type
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
options
An array of values, or an array of value/label pairs
dynamic or static
required
1.3.0
List of available options in the component. Supported formats:
["Good", "Very good"]
[{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}]
lambda context: ["Good", "Very good"]
lambda context:[{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}]
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
optional
1.3.0
Placeholder shown in the component.
rows
number
optional
1.3.0
Widget's height expressed as a number of rows.
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.
allow_duplicates
boolean
static value only
optional
@1.3.0
Allow users to enter duplicate values.
allow_empty_values
boolean
static value only
optional
@1.3.0
Allow users to enter empty values.
enable_reorder
boolean
static value only
optional
@1.3.0
Allow users to reorder values.
default_value
string[]
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
@1.3.0
Placeholder shown in the component.
default_value
string
dynamic or static
optional
*
Default value when displaying the field for the first time.
description
string
dynamic or static
optional
*
Description shown above the field, with additional help for users.
is_read_only
boolean
dynamic or static
optional
*
Displays a read only field.
is_required
boolean
dynamic or static
optional
*
Requires the user to input a value before validating.
label
string
static value only
required
*
Field's label.
placeholder
string
static value only
optional
1.3.0
Placeholder shown in the component.