Widgets in Forms

This is the official documentation of the agent_ruby Ruby agent.

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
null	All types	1.0.0	Use the default widget
AddressAutocomplete	String	1.0.0	Display a text input with address autocomplete.
Checkbox	Boolean	1.0.0	Display a checkbox with true/false and possibly null values.
CheckboxGroup	StringList, NumberList	1.0.0	Display a group of checkboxes to select multiple values.
ColorPicker	String	1.0.0	Display a color picker to select a color.
CurrencyInput	Number	1.0.0	Display a currency input.
DatePicker	Date, Dateonly, String	1.0.0	Display a calendar date picker
Dropdown	Date, Dateonly, Number, String, StringList	1.0.0	Users can choose between a limited set of values.
FilePicker	File, FileList	1.0.0	Users can upload files.
JsonEditor	Json	1.0.0	Display a Json editor with syntax highlighting.
NumberInput	Number	1.0.0	Display a standard number input.
NumberInputList	NumberList	1.0.0	Display a standard number input to enter a list of number values.
RadioGroup	Date, Dateonly, Number, String	1.0.0	Group of radio buttons to choose a value from.
RichText	String	1.0.0	Rich text area allowing to input formatted text.
TextArea	String	1.0.0	Multi-line text area.
TextInput	String	1.0.0	One-line text input.
TextInputList	StringList	1.0.0	One-line text input to enter a list of string values
TimePicker	Time	1.0.0	Input for entering a time
UserDropdown	String, StringList	1.0.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.

include ForestAdmin::Types

@create_agent.customize_collection('customer') do |collection|
  collection.add_action(
    'Update address',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Address',
          type: FieldType::STRING,
          widget: 'AddressAutocomplete',
          placeholder: 'Type the address here',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form (when empty):

Address autocomplete widget on an action form (empty)

And once the user starts typing:

Address autocomplete widget on an action form (with suggestions)

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.

Checkbox widget

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Refresh price',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Send a notification',
          type: FieldType::STRING,
          widget: 'Checkbox',
          is_required: true,
          default_value: false,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Checkbox widget on an action 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
default_value	boolean or nil	dynamic or static	optional	1.0.0	Default value of the field. Define a value different from nil 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	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	If is_required is set to false (default value), the checkbox widget allows users to choose between 3 states: true, false and nil. Setting is_required to true only allows 2 states: true and false. In both cases the default value will be nil if not defined.
label	string	static value only	required	1.0.0	Field's label.

By default, the Checkbox widget allows 3 states:

• nil

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Leave a review',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Why do you like this product?',
          type: FieldType::STRING_LIST,
          widget: 'CheckboxGroup',
          options: [
            { value: 'price', label: 'Good price' },
            { value: 'quality', label: 'Build quality' },
            { value: 'look', label: 'It looks good' },
          ],
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Checkbox group widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	String_List or Number_List	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
options	An array of values, or an array of value/label pairs.	dynamic or static	required	1.0.0	List of available options in the component. Supported formats: ["Good", "Very good"] [{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}] proc { |context| ["Good", "Very good"] } proc { |context| [{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}] }

Color picker widget

The color picker widget allows to select a color.

include ForestAdmin::Types

@create_agent.customize_collection('organization') do |collection|
  collection.add_action(
    'Customize UI',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Background color',
          type: FieldType::STRING,
          widget: 'ColorPicker',
          placeholder: 'Select the color',
          is_required: true,
          enable_opacity: false,
          quick_palette: [
            '#6002ee',
            '#90ee02',
            '#021aee',
            '#d602ee',
            '#ee0290',
            '#ee6002',
          ],
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Color picker widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
enable_opacity	boolean	static value only	optional	1.0.0	Allow users to select a color with an opacity.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.
quick_palette	string[]	static value only	optional	1.0.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.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Change price',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Price',
          type: FieldType::NUMBER,
          widget: 'CurrencyInput',
          placeholder: 'Enter the new price',
          is_required: true,
          min: 0,
          max: 1000,
          step: 1,
          currency: 'USD',
          base: 'Unit',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Currency input widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
currency	string	dynamic or static	required	1.0.0	Currency code to display in the component. Valid currency ISO codes ↗ is required.
default_value	number	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
base	Unit (default value) or Cent	dynamic or static	optional	1.0.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	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
min	number	dynamic or static	optional	1.0.0	Minimum value allowed.
max	number	dynamic or static	optional	1.0.0	Maximum value allowed.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.
step	number	dynamic or static	optional	1.0.0	Step between two values.

DatePicker widget

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

include ForestAdmin::Types

@create_agent.customize_collection('order') do |collection|
  collection.add_action(
    'Set shipping date',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Shipping date',
          type: FieldType::DATE,
          widget: 'DatePicker',
          format: 'DD-MM-YYYY',
          min: DateTime.now - 10,
          max: DateTime.now,
          placeholder: 'please indicate when you shipped the item',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form :

Date input on an action 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	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
format	string	dynamic or static	optional	1.0.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	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
min	Date	dynamic or static	optional	1.0.0	The minimum date allowed to be set in the field
max	Date	dynamic or static	optional	1.0.0	The maximum date allowed to be set in the field
placeholder	string	static value only	optional	1.0.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.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Leave a review',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Rating',
          type: FieldType::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,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Dropdown widget on an action 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 dropdown widget, which provides you with the in the callback context.

Note: when a search is performed, only the field on which it is performed will have its options recomputed.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Add more products',
    BaseAction.new(
      scope: ActionScope::BULK,
      form: [
        {
          label: 'Select some products',
          type: FieldType::STRING_LIST,
          widget: 'Dropdown',
          search: 'dynamic',
          options: ->(context, search_value) {
            products = JSON.parse(
              Net::HTTP.get(URI('https://api.fake-eshop.com/v2/products'))
            )
            products
              .filter do |product|
              !search_value ||
                %w[description name features keyword category].any? do |key|
                  product[key]&.downcase&.include?(search_value.downcase)
                end
            end
              .sort_by { |product| product['name'] }
              .map { |product| { label: product['name'], value: product['id'] } }
              .first(25)
          },
        },
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	Coherent with Type	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
options	An array of values, or an array of value/label pairs	dynamic or static	required	1.0.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.0.0	Placeholder shown in the component.
search	static, dynamic or disabled(default)	static value only	optional	1.0.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

include ForestAdmin::Types

def read_file(file_path)
  File.read(file_path)
end

def write_file(directory_path, file)
  File.write(directory_path, file)
end

@create_agent.customize_collection('user') do |collection|
  collection.add_action(
    'Update user identification details',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Avatar picture',
          type: FieldType::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: read_file(
            File.dirname(__FILE__) + '/data/avatars/default-avatar.png'
          ),
        },
        {
          label: 'Identification',
          type: FieldType::FILE_LIST,
          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,
        },
      ]
    ) do |context, result_builder|
      begin
        username = context.get_record(['username'])['username']
        user_directory = File.join(
          __FILE__,
          'data',
          'documents',
          sanitize(username),
        )
        write_file(user_directory, context.form_values['Avatar picture'])
        context.form_values['Identification'].each do |f|
          write_file(user_directory, f)
        end
        result_builder.success('Profile updated')
      rescue StandardError => e
        result_builder.error("Upload failed with error: #{e.message}")
      end
    end
  )
end

The above code will produce the following form:

File picker widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	File or File[]	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
extensions	string[]	dynamic or static	optional	1.0.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.0.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.0.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.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Set properties',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Properties',
          type: FieldType::JSON,
          widget: 'JsonEditor',
          default_value: { color: 'red' },
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

JSON editor widget on an action form

Options

This widget does not have any options.

Number input widget

The number input widget allows to input a number value.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Change price',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Price',
          type: FieldType::NUMBER,
          widget: 'NumberInput',
          placeholder: 'Enter the new price',
          is_required: true,
          min: 0,
          max: 1000,
          step: 1,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Number input widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	number	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
min	number	dynamic or static	optional	1.0.0	Minimum value allowed.
max	number	dynamic or static	optional	1.0.0	Maximum value allowed.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.
step	number	dynamic or static	optional	1.0.0	Step between two values.

Number input list widget

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Change step values',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Step values',
          type: FieldType::NUMBER_LIST,
          widget: 'NumberInputList',
          placeholder: 'Enter the new step value',
          is_required: true,
          min: 0,
          max: 1000,
          step: 1,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

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

Number input list widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
allow_duplicates	boolean	static value only	optional	1.0.0	Allow users to enter duplicate values.
allow_empty_values	boolean	static value only	optional	1.0.0	Allow users to enter empty values.
default_value	number[]	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
enable_reorder	boolean	static value only	optional	1.0.0	Allow users to reorder values.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
min	number	dynamic or static	optional	1.0.0	Minimum value allowed.
max	number	dynamic or static	optional	1.0.0	Maximum value allowed.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.
step	number	dynamic or static	optional	1.0.0	Step between two values.

Radio group widget

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Leave a review',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Appreciation',
          type: FieldType::NUMBER,
          widget: 'RadioGroup',
          options: [
            { value: 1, label: 'Good' },
            { value: 0, label: 'Average' },
            { value: -1, label: 'Bad' },
          ],
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Radio group widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	Coherent with Type	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
options	An array of values, or an array of value/label pairs	dynamic or static	required	1.0.0	List of available options in the component. Supported formats: ["Good", "Very good"] [{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}] proc { |context| ["Good", "Very good"] } proc { |context| [{"value": 2, "label": "Good"}, {"value": 3, "label": "Very good"}] }

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.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Leave a review',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Comment',
          type: FieldType::STRING,
          widget: 'RichText',
          is_required: true,
          placeholder: 'Type your comment here',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Rich text widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.

Text area widget

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Leave a review',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Comment',
          type: FieldType::STRING,
          widget: 'TextArea',
          is_required: true,
          placeholder: 'Type your comment here...',
          rows: 10,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Text area widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string		optional	1.0.0	Placeholder shown in the component.
rows	number		optional	1.0.0	Widget's height expressed as a number of rows.

Text input widget

The text input widget allows to input a string value.

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Send notification',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Message',
          type: FieldType::STRING,
          widget: 'TextInput',
          placeholder: 'Enter your message here',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form:

Text input widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.

Text input list widget

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

include ForestAdmin::Types

@create_agent.customize_collection('product') do |collection|
  collection.add_action(
    'Add tags',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Tag',
          type: FieldType::STRING_LIST,
          widget: 'TextInputList',
          is_required: true,
          placeholder: 'Enter a tag',
          allow_duplicates: false,
          allow_empty_values: false,
          enable_reorder: false,
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

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

Text input list widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
allow_duplicates	boolean	static value only	optional	1.0.0	Allow users to enter duplicate values.
allow_empty_values	boolean	static value only	optional	1.0.0	Allow users to enter empty values.
enable_reorder	boolean	static value only	optional	1.0.0	Allow users to reorder values.
default_value	string[]	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.

Time picker widget

The time picker widget allows to select a time

include ForestAdmin::Types

@create_agent.customize_collection('store') do |collection|
  collection.add_action(
    'set opening and closing time',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Opening time',
          type: FieldType::TIME,
          widget: 'TimePicker',
        },
        {
          label: 'Closing time',
          type: FieldType::TIME,
          widget: 'TimePicker',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

The above code will produce the following form :

Time widget on an action 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

include ForestAdmin::Types

@create_agent.customize_collection('Ticket') do |collection|
  collection.add_action(
    'Assign to the record',
    BaseAction.new(
      scope: ActionScope::SINGLE,
      form: [
        {
          label: 'Manager',
          type: FieldType::STRING,
          widget: 'UserDropdown',
          placeholder: 'Select the manager in charge',
        },
        {
          label: 'Operators',
          type: FieldType::STRING_LIST,
          widget: 'UserDropdown',
          placeholder: 'Select operators for this record',
        }
      ]
    ) do |context, result_builder|
      # perform work here
    end
  )
end

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

Dropdown widget on an action form

Options

Option	Type	Dynamic support	Usage	Minimal version	Description
default_value	string	dynamic or static	optional	1.0.0	Default value when displaying the field for the first time.
description	string	dynamic or static	optional	1.0.0	Description shown above the field, with additional help for users.
is_read_only	boolean	dynamic or static	optional	1.0.0	Displays a read only field.
is_required	boolean	dynamic or static	optional	1.0.0	Requires the user to input a value before validating.
label	string	static value only	required	1.0.0	Field's label.
placeholder	string	static value only	optional	1.0.0	Placeholder shown in the component.