Forest Admin Cloud
  • What is Forest Admin?
  • How to Read This Doc?
  • Quick Start
  • Core Concepts
    • Agent
    • Data Sources
    • Collections
    • Views
    • Fields
      • Types
    • Relationships
    • Actions
    • Segments
    • Dashboards
    • Workspaces
    • Layouts
    • Roles & Permissions
    • Projects
    • Organizations
  • Native Modules
    • CRUD
    • Approval Workflows
    • Activity Logs
    • Notes
    • Inbox
  • UI Customization
    • Actions
    • Workspaces
    • Analytics
      • Metabase Integration
  • Code Customization
    • Getting Started
    • Actions
      • Context
      • Response
        • Data refresh
      • Form
        • Widgets
    • Fields
      • Filtering
      • Sorting
      • Validation
    • Relationships
    • Collections
      • Search
    • Charts
  • Security Modules
    • Roles & Permissions
    • SCIM User Provisioning
    • Single Sign On
    • Two-Factor Authentication
    • Auto-logout
    • IP Whitelisting
  • Data sources settings
    • SQL
    • MongoDB
    • Multiple Data Sources
    • Database Credentials
    • Schema Synchronization
  • Best Practices
    • Performance
Powered by GitBook
On this page
  • Address Autocomplete
  • Checkbox
  • Checkbox group
  • Color picker
  • Currency
  • Date picker
  • Dropdown
  • File picker
  • JSON Editor
  • Number
  • Number (List)
  • Radio button
  • Rich text
  • TextArea
  • TextInput
  • TextInput (List)
  • Time picker
  • User

Was this helpful?

  1. Code Customization
  2. Actions
  3. Form

Widgets

Last updated 1 year ago

Was this helpful?

This is the official documentation of Forest Admin Cloud.

Widgets improve your Forms by offering a range of input display options:

  • null any: Use the default widget.

  • String: Enables quick address input.

  • Boolean: Display a checkbox with false, true or null values.

  • StringList, NumberList: Display a group of checkboxes to select multiple values.

  • String: Select a color from the color picker.

  • Number: Display a field to enter money amount.

  • Date, Dateonly, String: Select a date from the date picker.

  • : Date, Dateonly, Number, String, StringList: Select from a limited set of values.

  • File, FileList: Display a file uploader to upload files.

  • Json: Display a JSON editor with syntax highlighting.

  • Number: Display a standard number input.

  • NumberList: Display a group of number inputs to select multiple values.

  • Date, Dateonly, Number, String: Display a set of radio buttons.

  • String: Display a rich text area allowing to input formatted text.

  • String: Display a text area allowing the input of multiple lines of text.

  • String: Display a text box allowing the input of a single line of text.

  • StringList: Display a group of text inputs to enter multiple values.

  • String, StringList: Display a dropdown with users in the ForestAdmin project.

To make the code easier to read, all the code snippets below should be wrapped in the following code. Ensure you update the collection and action names as needed.

import type { Agent } from '@forestadmin/forest-cloud';
import { Schema } from '../typings';

export default function customizeAgent(agent: Agent<Schema>) {
  agent.customizeCollection('customers', collection => {
    collection.addAction('My action', {
    scope: 'Single',
    // Insert the code snippet here.
    execute: async context => {
    },
  });
  });
}

Address Autocomplete

The AddressAutocomplete facilitates quick input of addresses by offering suggestions from the Google Maps API.

Options:

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Address',
  type: 'String',
  widget: 'AddressAutocomplete',
  placeholder: 'Type the address here',
}],

Checkbox

The Checkbox widget enables users to toggle a boolean value. The default behavior allows three states: false, true, and null.

Options:

  • defaultValueBoolean: Specify the default value.

  • isRequiredBoolean: Activate this option to only supports two states false and true.

form: [{
  label: 'Send a notification',
  type: 'Boolean',
  widget: 'Checkbox',
  isRequired: true,
  defaultValue: true,
}],

Checkbox group

The CheckboxGroup allows to select multiple values from a list of options.

Options:

  • options* [String or Object] or Function: Specify the list of options available. The supported formats are:

    • ['Good', 'Very good']

    • [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

    • (context) => ['Good', 'Very good']

    • (context) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

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' },
  ],
}],

Color picker

The ColorPicker widget enables color selection.

Options:

  • enableOpacityBoolean: Enables the option to select colors with adjustable opacity levels.

  • placeholderString: Shows a hint within the widget when no content is present.

  • quickPalette[String]: Provides a selection of pre-defined Hex or RGBA colors for expedited color choices.

form: [{
  label: 'Background color',
  type: 'String',
  widget: 'ColorPicker',
  placeholder: 'Select a color',
  isRequired: true,
  enableOpacity: false,
  quickPalette: [
    '#6002ee',
    '#90ee02',
    '#021aee',
    '#d602ee',
    '#ee0290',
    '#ee6002',
  ]},
],

Currency

The CurrencyInput widget enables users to input a currency value.

Options:

  • base String: When specifying currency, use Unit for whole units and Cent for cents.

  • max Number: Maximum value allowed.

  • min Number: Minimum value allowed.

  • placeholderString: Shows a hint within the widget when no content is present.

  • step Number: The interval between two values.

form: [{
  label: 'Price',
  type: 'Number',
  widget: 'CurrencyInput',
  placeholder: 'Enter the new price',
  isRequired: true,
  min: 0,
  max: 1000,
  step: 1,
  currency: 'USD',
  base: 'Unit',
}],

Date picker

The DatePicker widget helps you choose a date. If set to Date, you can select a date and time. If set to Dateonly, you can only pick a date.

To convert ISO 8601 date strings to Date objects, you can directly parse them as follows:

const shippingDate = new Date(context.formValues['Shipping date']));

Options:

  • max Date: The maximum date allowed.

  • min Date: The minimum date allowed.

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Shipping date',
  type: 'Date',
  widget: 'DatePicker',
  format: 'DD-MM-YYYY',
  min: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
  max: new Date(),
  placeholder: 'please indicate when you shipped the item',
}],

Dropdown

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

Options:

Specify the list of options available. The supported formats are:

  • options* [String or Object] or Function: Specify the list of options available. The supported formats are:

    • ['Good', 'Very good']

    • [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

    • (context, searchValue) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

  • placeholderString: Shows a hint within the widget when no content is present.

  • search String: Enable users to input text to refine options shown in the dropdown.

    • disabled: Users need to scroll to select their desired option.

    • static: Users can search for a value by typing terms. The search will be conducted in the browser, based on the labels.

    • dynamic The search happens on the backend, using custom code to get the needed options.

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',
  isRequired: true,
}],

File picker

The FilePicker widget allows to upload a file.

Options:

  • extensions[String] or Function: The whitelist of file extensions allowed. If not specified, any file extension will be accepted. The value can be either a list of strings or a function that returns a list of strings.

  • maxSizeMb Number or Function: The maximum file size for uploads. If not specified, there is no limit. Ensure your server can support the file sizes being uploaded. The value can be either a number or a function that returns a number.

  • maxCountNumber or Function: The maximum number of files allowed to be uploaded. If not specified, any number of files is allowed. The value can be either a number or a function that returns a number.

form: [{
  label: 'Avatar picture',
  type: 'File',
  widget: 'FilePicker',
  description: 'Upload a profile picture or leave it to use the default one',
  extensions: ['png', 'jpg'],
  maxSizeMb: 20
}, {
  label: 'Legal documents',
  type: 'FileList',
  widget: 'FilePicker',
  description: 'Upload up to 4 documents to identify the user',
  extensions: ['png', 'jpg', 'bmp', 'pdf', 'gif'],
  maxSizeMb: 2,
  maxCount: 4,
  isRequired: true,
}],

JSON Editor

The JsonEditor widget provides an interface focused on JSON syntax highlighting.

form: [{
  label: 'Properties',
  type: 'Json',
  widget: 'JsonEditor',
  defaultValue: {
    name: '',
    age: 0,
    city: '',
    country: '',
    is_student: false
  }
}],

Number

The NumberInput widget enables users to input numerical values.

form: [{
  label: 'Quantity',
  type: 'Number',
  widget: 'NumberInput',
  placeholder: 'Enter a quantity',
  isRequired: true,
  min: 0,
  max: 1000,
  step: 1,
}],

Number (List)

The NumberInputList widget allows to input a list of numberical values.

Options:

  • allowDuplicates Boolean: Enable/disable duplicate value entry.

  • allowEmptyValues Boolean: Enable/disable empty value entry.

  • allowReorder Boolean: Enable/disable to reorder values.

  • max Number: Maximum value allowed.

  • min Number: Minimum value allowed.

  • placeholderString: Shows a hint within the widget when no content is present.

  • step Number: The interval between two values.

form: [{
  label: 'Step values',
  type: 'NumberList',
  widget: 'NumberInputList',
  placeholder: 'Enter the new step value',
  isRequired: true,
  min: 0,
  max: 1000,
  step: 1,
}],

Radio button

A RadioButton lets you choose one option from a list.

Options:

  • options* [String or Object] or Function: Specify the list of options available. The supported formats are:

    • ['Good', 'Very good']

    • [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

    • (context) => ['Good', 'Very good']

    • (context) => [{value: 2, label: 'Good'}, {value: 3, label: 'Very good'}]

form: [{
  label: 'Rating',
  type: 'Number',
  widget: 'RadioGroup',
  options: [
    { value: 1, label: 'Good' },
    { value: 0, label: 'Average' },
    { value: -1, label: 'Bad' },
  ]},
],

Rich text

The rich text widget enables formatted text input.

Options:

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Comment',
  type: 'String',
  widget: 'RichText',
  isRequired: true,
  placeholder: 'Type your comment here',
}],

TextArea

The TextArea widget lets you type in more than one line of text.

Options:

  • rows Number: Display the desired number of rows.

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Comment',
  type: 'String',
  widget: 'TextArea',
  isRequired: true,
  placeholder: 'Type your comment here...',
  rows: 10,
}],

TextInput

The TextInput widget lets you type one line of text.

Options:

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Message',
  type: 'String',
  widget: 'TextInput',
  placeholder: 'Enter your message here',
}],

TextInput (List)

The TextInputList widget lets you enter multiple text values.

Options:

  • allowDuplicates Boolean: Enable/disable duplicate value entry.

  • allowEmptyValues Boolean: Enable/disable empty value entry.

  • allowReorder Boolean: Enable/disable to reorder values.

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  label: 'Tag',
  type: 'StringList',
  widget: 'TextInputList',
  isRequired: true,
  placeholder: 'Enter a tag',
}],

Time picker

The TimePicker widget helps you choose a time.

form: [{
  label: 'Opening time',
  type: 'Time',
  widget: 'TimePicker',
}],

User

The UserDropdown widget lets you select one or more users from your Forest Admin project.

Options:

  • placeholderString: Shows a hint within the widget when no content is present.

form: [{
  type: 'String',
  label: 'Manager',
  widget: 'UserDropdown',
  placeholder: 'Select the manager in charge',
}],

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

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

ISO codes ↗
this documentation ↗
AddressAutocomplete
Checkbox
CheckboxGroup
ColorPicker
CurrencyInput
DatePicker
Dropdown
FilePicker
JsonEditor
NumberInput
NumberInputList
RadioGroup
RichText
TextArea
TextInput
TextInputList
UserDropdown