Python Developer Guide
Other documentationsDemoCommunityGitHub
  • Forest Admin
  • Getting started
    • How it works
    • Quick start
      • Flask
      • Django
    • Create your agent
    • Troubleshooting
    • Migrating legacy agents
      • Pre-requisites
      • Recommendations
      • Migration steps
      • Code transformations
        • API Charts
        • Live Queries
        • Smart Charts
        • Route overrides
        • Smart Actions
        • Smart Fields
        • Smart Relationships
        • Smart Segments
  • Data Sources
    • Getting Started
      • Collection selection
      • Naming conflicts
      • Query interface and Native Queries
        • Fields and projections
        • Filters
        • Aggregations
    • Provided data sources
      • SQLAlchemy
      • Django
        • Polymorphic relationships
    • Write your own
      • Translation strategy
        • Structure declaration
        • Capabilities declaration
        • Read implementation
        • Write implementation
        • Intra-data source Relationships
      • Contribute
  • Agent customization
    • Getting Started
    • Actions
      • Scope and context
      • Result builder
      • Static Forms
      • Widgets in Forms
      • Dynamic Forms
      • Form layout customization
      • Related data invalidation
    • Charts
      • Value
      • Objective
      • Percentage
      • Distribution
      • Leaderboard
      • Time-based
    • Fields
      • Add fields
      • Move, rename and remove fields
      • Override binary field mode
      • Override writing behavior
      • Override filtering behavior
      • Override sorting behavior
      • Validation
    • Hooks
      • Collection hook
      • Collection override
    • Pagination
    • Plugins
      • Write your own
    • Relationships
      • To a single record
      • To multiple records
      • Computed foreign keys
      • Under the hood
    • Search
    • Segments
  • Frontend customization
    • Smart Charts
      • Create a table chart
      • Create a bar chart
      • Create a cohort chart
      • Create a density map
    • Smart Views
      • Create a Map view
      • Create a Calendar view
      • Create a Shipping view
      • Create a Gallery view
      • Create a custom tinder-like validation view
      • Create a custom moderation view
  • Deploying to production
    • Environments
      • Deploy on AWS
      • Deploy on Heroku
      • Deploy on GCP
      • Deploy on Ubuntu
    • Development workflow
    • Using branches
    • Deploying your changes
    • Forest Admin CLI commands
      • init
      • login
      • branch
      • switch
      • set-origin
      • push
      • environments:create
      • environments:reset
      • deploy
  • Under the hood
    • .forestadmin-schema.json
    • Data Model
      • Typing
      • Relationships
    • Security & Privacy
Powered by GitBook
On this page
  • Widgets
  • Address autocomplete widget
  • Checkbox widget
  • Checkbox group widget
  • Color picker widget
  • Currency input widget
  • DatePicker widget
  • Dropdown widget
  • File picker widget
  • JSON editor widget
  • Number input widget
  • Number input list widget
  • Radio group widget
  • Rich text widget
  • Text area widget
  • Text input widget
  • Text input list widget
  • Time picker widget
  • User dropdown widget

Was this helpful?

  1. Agent customization
  2. Actions

Widgets in Forms

PreviousStatic FormsNextDynamic Forms

Last updated 11 months ago

Was this helpful?

This is the official documentation of the forestadmin-agent-django and forestadmin-agent-flask Python agents.

Field Widgets empower your providing various options to display inputs and ease operators in their daily operations.

Widgets

Widget
Supported types
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

Address autocomplete widget

The address autocomplete widget allows to input an address as a text value, autocompleted by the Google Maps API.

agent.customize_collection('customer').add_action('Update address', {
    "scope": "Single",
    "form": [
        {
            "label": 'Address',
            "type": 'String',
            "widget": 'AddressAutocomplete',
            "placeholder": 'Type the address here',
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

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

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

Checkbox widget

The checkbox widget allows to activate or deactivate a boolean value.

agent.customize_collection('product').add_action('Refresh price', {
    "scope": "Single",
    "form": [
        {
            "label": 'Send a notification',
            "type": 'Single',
            "widget": 'Checkbox',
            "is_required": True,
            "default_value": False,
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

boolean or None

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

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

By default, the Checkbox widget allows 3 states:

  • None

  • True

  • False

To ensure having only 2 states, you need to:

  1. set the is_required option to True,

  2. 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.

agent.customize_collection('product').add_action('Leave a review', {
    "scope": 'Single',
    "form": [
        {
            "label": "Why do you like this product?",
            "type": "StringList",
            "widget": "CheckboxGroup",
            "options": [
              { "value": "price", "label": "Good price" },
              { "value": "quality", "label": "Build quality" },
              { "value": "look", "label": "It looks good" },
            ],
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

StringList or NumberList

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

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"}]

Color picker widget

The color picker widget allows to select a color.

agent.customize_collection('organization').add_action('Customize UI', {
    "scope": "Single",
    "form": [
        {
            "label": "Background color",
            "type": "String",
            "widget": "ColorPicker",
            "placeholder": "Select the color",
            "is_required": True,
            "enable_opacity": False,
            "quickPalette": [
                "#6002ee",
                "#90ee02",
                "#021aee",
                "#d602ee",
                "#ee0290",
                "#ee6002",
            ],
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

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

optional

*

Displays a read only field.

is_required

boolean

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 input widget

The currency input widget allows to input a currency value.

agent.customize_collection('product').add_action('Change price', {
    "scope": "Single",
    "form": [
        {
            "label": "Price",
            "type": "Number",
            "widget": "CurrencyInput",
            "placeholder": "Enter the new price",
            "is_required": True,
            "min": 0,
            "max": 1000,
            "step": 1,
            "currency": 'USD',
            "base": 'Unit',
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

currency

string

required

1.3.0

default_value

number

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

base

Unit (default value) or Cent

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

optional

*

Displays a read only field.

is_required

boolean

optional

*

Requires the user to input a value before validating.

label

string

static value only

required

*

Field's label.

min

number

optional

1.3.0

Minimum value allowed.

max

number

optional

1.3.0

Maximum value allowed.

placeholder

string

static value only

optional

1.3.0

Placeholder shown in the component.

step

number

optional

1.3.0

Step between two values.

DatePicker widget

The date picker widget allows to input a date in a form

from datetime import datetime, timedelta
agent.customize_collection('order').add_action('Set shipping date', {
    "scope": "Single",
    "form": [
        {
            "label": "Shipping date",
            "type": "Date",
            "widget": "DatePicker",
            "format": 'DD-MM-YYYY',
            "min": datetime.now() - timedelta(days=10),
            "max": datetime.now(),
            "placeholder": "please indicate when you shipped the item",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

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

default_value

Date

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

format

string

optional

1.3.0

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

optional

*

Requires the user to input a value before validating.

label

string

static value only

required

*

Field's label.

min

Date

optional

1.3.0

The minimum date allowed to be set in the field

max

Date

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

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.

agent.customize_collection('product').add_action('Leave a review', {
    "scope": "Single",
    "form": [
        {
            "label": "Rating",
            "type": "Number",
            "widget": "Dropdown",
            "options": [
                { "value": 0, "label": "Poor" },
                { "value": 1, "label": "Fair" },
                { "value": 2, "label": "Good" },
                { "value": 3, "label": "Very good" },
                { "value": 4, "label": "Excellent" },
            ],
            "search": "disabled",
            "placeholder": "Select a rating",
            "is_required": True,
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

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.

from forestadmin.datasource_toolkit.decorators.action.context.base import (
    ActionContext
)
import requests

def options_fn(context: ActionContext, search_value: str | None):
    products = requests.get('https://api.fake-eshop.com/v2/products').json()
    searched_products = []
    for product in products:
        if search_value is None:  # case of initialization
            searched_products.append({ "label": product["name"], "value": product["id"] })
            continue

        for field in ['description', 'name', 'features', 'keyword', 'category']:
            if search_value.lower() in product[field].lower():
                searched_products.append({ "label": product["name"], "value": product["id"] })
                break

    return sorted(searched_products, key=lambda x: ["label"])[0:25]

agent.customize_collection('product').add_action('Add more products', {
    "scope": "Global",
    "form": [
        {
            "label": "Select some products",
            "type": "StringList",
            "widget": "Dropdown",
            "options": options_fn,
            "search": "dynamic",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

Coherent with Type

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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

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

File picker widget

The file picker allows to upload files

import os
from forestadmin.datasource_toolkit.interfaces.actions import File
from forestadmin.datasource_toolkit.decorators.action.context.single import (
    ActionContextSingle
)
from forestadmin.datasource_toolkit.decorators.action.result_builder import (
    ResultBuilder
)

def read_file(path: str):
    with open(path, "rb") as fin:
        return fin.read()

def write_file(directory: str, file: File):
    with open(os.path.join(directory, os.path.basename(file.name)), "wb") as fout:
        fout.write(file.buffer)

async def execute(context: ActionContextSingle, result_builder: ResultBuilder):
  try:
      username = await context.get_record(["username"])["username"]
      user_directory = os.path.join(
          __dirname,
          'data',
          'documents',
          sanitize(username),
      )
      write_file(user_director, context.form_values["Avatar picture"])
      for f in context.form_values["Identification"]:
          write_file(user_director, f)
      return result_builder.success("Profile updated")
  except Exception as exc:
      return result_builder.error(f"Upload failed with error: {exc}")

agent.customize_collection('user').add_action('Update user identification details', {
    "scope": "Single",
    "form": [
        {
            "label": "Avatar picture",
            "type": "File",
            "widget": "FilePicker",
            "description": "Upload a profile picture or leave it to use the default one",
            "extensions": ['png', 'jpg'],
            "max_size_mb": 20,
            "default_value": readFile(
              os.path.join(__dirname, './data/avatars/default-avatar.png'),
            ),
        },
        {
            "label": "Identification",
            "type": "FileList",
            "widget": "FilePicker",
            "description": "Upload up to 4 documents to identify the user",
            "extensions": ["png", "jpg", "bmp", "pdf", "gif"],
            "max_size_mb": 2,
            "max_count": 4,
            "is_required": True,
        },
    ],
    "execute": execute
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

File or File[]

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

optional

*

Requires the user to input a value before validating.

label

string

static value only

required

*

Field's label.

extensions

string[]

optional

1.3.0

The whitelist of file extensions allowed. If not specified, any file extension will be accepted

max_size_mb

number

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)

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

JSON editor widget

The JSON editor widget display a rich editor with syntax highlighting for JSON.

agent.customize_collection('product').add_action('Set properties', {
    "scope": "Single",
    "form": [
        {
            "label": "Properties",
            "type": "Json",
            "widget": "JsonEditor",
            "default_value": {"color": "red"},
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

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.

agent.customize_collection('product').add_action('Change price', {
    "scope": "Single",
    "form": [
        {
            "label": "Price",
            "type": "Number",
            "widget": "NumberInput",
            "placeholder": "Enter the new price",
            "isRequired": True,
            "min": 0,
            "max": 1000,
            "step": 1,
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

number

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

optional

*

Requires the user to input a value before validating.

label

string

static value only

required

*

Field's label.

min

number

optional

1.3.0

Minimum value allowed.

max

number

optional

1.3.0

Maximum value allowed.

placeholder

string

static value only

optional

1.3.0

Placeholder shown in the component.

step

number

optional

1.3.0

Step between two values.

Number input list widget

The number input list widget allows to input a list of number values.

agent.customize_collection('product').add_action('Change step values', {
    "scope": "Single",
    "form": [
        {
            "label": "Step values",
            "type": "NumberList",
            "widget": "NumberInputList",
            "placeholder": "Enter the new step value",
            "is_required": True,
            "min": 0,
            "max": 1000,
            "step": 1,
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form (once the user entered two step values):

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

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[]

optional

*

Default value when displaying the field for the first time.

description

string

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

optional

*

Displays a read only field.

is_required

boolean

optional

*

Requires the user to input a value before validating.

label

string

static value only

required

*

Field's label.

min

number

optional

1.3.0

Minimum value allowed.

max

number

optional

1.3.0

Maximum value allowed.

placeholder

string

static value only

optional

1.3.0

Placeholder shown in the component.

step

number

optional

1.3.0

Step between two values.

Radio group widget

The radio group widget allows to select a value from a list of options.

agent.customize_collection('product').add_action('Leave a review', {
    "scope": "Single",
    "form": [
        {
            "label": "Appreciation",
            "type": "Number",
            "widget": "RadioGroup",
            "options": [
                { "value": 1, "label": "Good" },
                { "value": 0, "label": "Average" },
                { "value": -1, "label": "Bad" },
            ],
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

Coherent with Type

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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

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"}]

Rich text widget

The rich text widget allows to input a formatted text value.

agent.customize_collection('product').add_action('Leave a review', {
    "scope": "Single",
    "form": [
        {
            "label": "Comment",
            "type": "String",
            "widget": "RichText",
            "is_required": True,
            "placeholder": "Type your comment here",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

Text area widget

The text area widget allows to input a multiline string value.

agent.customize_collection('product').add_action('Leave a review', {
    "scope": "Single",
    "form": [
        {
            "label": "Comment",
            "type": "String",
            "widget": "TextArea",
            "is_required": True,
            "placeholder": "Type your comment here...",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

Text input widget

The text input widget allows to input a string value.

agent.customize_collection('product').add_action('Send notification', {
    "scope": "Single",
    "form": [
        {
            "label": "Message",
            "type": "String",
            "widget": "TextInput",
            "placeholder": "Enter your message here",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form:

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

Text input list widget

The text input list widget allows to input a list of string values.

agent.customize_collection('product').add_action('Add tags', {
    "scope": "Single",
    "form": [
        {
            "label": "Message",
            "type": "StringList",
            "widget": "TextInputList",
            "is_required": True,
            "placeholder": "Enter a tag",
            "allow_duplicates": False,
            "allow_empty_values": False,
            "enable_reorder": False,
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form (once the user entered two tags):

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

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[]

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

Time picker widget

The time picker widget allows to select a time

agent.customize_collection('store').add_action('set opening and closing time', {
    "scope": "Single",
    "form": [
        {
            "label": "Opening time",
            "type": "Time",
            "widget": "TimePicker",
        },
        {
            "label": "Closing time",
            "type": "Time",
            "widget": "TimePicker",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

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

agent.customize_collection('Ticket').add_action('Assign to the record', {
    "scope": "Single",
    "form": [
        {
            "label": "Manager",
            "type": "String",
            "widget": "UserDropdown",
            "placeholder": "Select the manager in charge",
        },
        {
            "label": "Operators",
            "type": "StringList",
            "widget": "UserDropdown",
            "placeholder": "Select operators for this record",
        },
    ],
    "execute": lambda context, result_builder: pass,  # perform work here
})

The above code will produce the following form (once the user has selected some users)

Options

Option
Type
Dynamic support
Usage
Minimal version
Description

default_value

string

optional

*

Default value when displaying the field for the first time.

description

string

optional

*

Description shown above the field, with additional help for users.

is_read_only

boolean

optional

*

Displays a read only field.

is_required

boolean

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.

or static

or static

or static

or static

The Checkbox widget has no specific options, but its behavior can be customized using the following already existing :

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

Currency code to display in the component. Valid currency is required.

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

The date picker uses moment.js library under the hood. You can refer to to specify your date display format

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

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. .

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

or static

Actions Forms
options on fields
More info about dynamic configuration
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
ISO codes ↗
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
this documentation ↗
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
dynamic
AddressAutocomplete
Checkbox
CheckboxGroup
ColorPicker
CurrencyInput
DatePicker
Dropdown
FilePicker
JsonEditor
NumberInput
NumberInputList
RadioGroup
RichText
TextArea
TextInput
TextInputList
TimePicker
UserDropdown
Address autocomplete widget on an action form (empty)
Address autocomplete widget on an action form (with suggestions)
Checkbox widget on an action form
Checkbox group widget on an action form
Color picker widget on an action form
Currency input widget on an action form
Date input on an action form
Dropdown widget on an action form
File picker widget on an action form
JSON editor widget on an action form
Number input widget on an action form
Number input list widget on an action form
Radio group widget on an action form
Rich text widget on an action form
Text area widget on an action form
Text input widget on an action form
Text input list widget on an action form
Time widget on an action form
Dropdown widget on an action form