Multi-Choice Picker

The Multi-Choice Picker is a configurable component that allows users to select multiple options from a predefined list. The list of items can be either hardcoded with items or populated with the url attribute.

Configuration Options

The picker can be configured through the following options:

Option	Type	Default	Description
`isSearchable`	boolean	false	Determines if the picker is searchable
`isSortableList`	boolean	false	Determines if the selected list of items is sortable
`items`	array	[]	Array of items to choose from. Each item must include `id` and `title`
`pickedItemsLimit`	number	null	Limits the number of items that can be picked
`pickedItemIds`	array	[]	Array of IDs of the initially picked items
`canSelectMultiple`	boolean	true	Determines if multiple items can be selected
`selectAllByDefault`	boolean	false	When `true`, all items are selected by default
`disableApplyWhenEmpty`	boolean	false	When `true`, disables the apply button when no items are selected
`shouldListBeUnique`	boolean	false	When `true`, ensures that the list of items is unique
`singularHeaderTitle`	string	`"Item"`	The singular form of the header title for the items
`fullItem`	boolean	false	When `true`, returns the full item object instead of just the ID
`url`	string \| null	null	URL to fetch items from (optional, alternative to `items`)
`idAttribute`	string	`"id"`	The attribute of the item object to use as the item ID (from the `url` response)
`displayAttribute`	string	`"title"`	The attribute of the item object to use as the item display value (from the `url` response)
`urlResponseKey`	string	""	The key in the URL response that contains the list of items
`isRequired`	boolean	false	When `true`, the update button will be disabled until at least one option is selected

Example with url:

{
  "displayAttribute": "display_name",
  "idAttribute": "name",
  "fullItem": true,
  "id": "multi_choice_picker",
  "isSearchable": true,
  "isSortableList": true,
  "url": "<%= `/v1/selector/analytics/cycle/${getAssetType(asset)}/axis` %>"
}

Example with hardcoded items:

{
  "disableApplyWhenEmpty": true,
  "id": "multi_choice_picker_2",
  "items": [
    {
      "id": "one",
      "title": "ONE"
    },
    {
      "id": "two",
      "title": "TWO"
    },
    {
      "id": "three",
      "title": "THREE"
    }
  ],
  "pickedItemsLimit": 20,
  "singularHeaderTitle": "Number"
}

Default Query Params

The multi-choice picker generates the following params to the API Query:

{ "fullItem": true } Example:

"multi_choice_picker": {
  "pickerType": "multi-choice",
  "value": [
    {
      "name": "shift",
      "display_name": "Shift",
      "unit": "",
      "type": "categorical",
      "data_type": "string",
      "stream_types": [],
      "raw_data_field": "",
      "model": "cycle",
      "id": "shift",
      "title": "Shift"
    },
    {
      "name": "starttime",
      "display_name": "Cycle Start Time",
      "unit": "",
      "type": "datetime",
      "data_type": "datetime",
      "stream_types": [],
      "raw_data_field": "",
      "model": "cycle",
      "id": "starttime",
      "title": "Cycle Start Time"
    },
    {
      "name": "endtime",
      "display_name": "Cycle End Time",
      "unit": "",
      "type": "datetime",
      "data_type": "datetime",
      "stream_types": [],
      "raw_data_field": "",
      "model": "cycle",
      "id": "endtime",
      "title": "Cycle End Time"
    }
  ]
}

{ "fullItem": false } Example:

"multi_choice_picker": {
  "pickerType": "multi-choice",
  "value": [
    "machine__factory_location",
    "starttime",
    "endtime"
  ]
}

Page Link

Example mapping for page link.

Assigning the choices with ids.

{
    "mapping": {
        'multi_choice_picker': '["choice_1_id", "choice_2_id"]'
    }
}