Contents x
    Multi-Choice Picker
      • Print
      • Dark
        Light
      Contents

      Multi-Choice Picker

        • Print
        • Dark
          Light
        Article summary

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

        What's Next