Contents x
    Choice Picker
      • Print
      • Dark
        Light
      Contents

      Choice Picker

        • Print
        • Dark
          Light
        Article summary

        The Choice Picker is a configurable component that allows users to select a single option 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 in the config object:

        Option

        Type

        Default

        Description

        pickedItemId

        string | null

        null

        ID of the default picked item

        fullItem

        boolean

        false

        When true, returns the full item object instead of just the ID

        items

        array

        []

        Array of items to choose from. Each item must include id and title

        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)

        isSearchable

        boolean

        false

        Determines if the picker is searchable

        search

        string

        ""

        Default Search query string

        Example Configuration with items:

        {
  "id": "choice_picker_id",
  "title": "Choice Picker Title",
  "fullItem": true,
  "items": [
    {
      "id": "choice_1",
      "title": "Choice 1"
    },
    {
      "id": "choice_2",
      "title": "Choice 2"
    }
  ],
  "pickedItemId": "choice_1",
  "isSearchable": true,
  "type": "choice"
}

        Example Configuration with url:

        The choice picker is populated with items based on the url specified. In this case must be used with an asset picker.

        The idAttribute the key to use from the url response to be the id.

        The displayAttribute the key to use from the url response to be the display title.

        The pickedItemId sets the default selection.

        {
  "id": "choice_picker_id",
  "title": "Choice Picker",
  "url": "<%= `/v1/selector/analytics/cycle/${getAssetType(asset)}/axis` %>",
  "idAttribute": "name",
  "displayAttribute": "display_name",
  "fullItem": true,
  "pickedItemId": "output",
  "isSearchable": false,
  "type": "choice",
}

        Default Query Params

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

        Parameter

        Type

        Description

        id

        string

        selected item id

        title

        string

        selected item title

        Additionally, if url is used, other keys/values from the response items will also be included.

        Example request body with items:

        "choice_picker_id": {
  "pickerType": "choice",
  "value": {
    "id": "choice_1",
    "title": "Choice 1"
  }
},

        Example request body with url:

        "choice_picker_id": {
  "pickerType": "choice",
  "value": {
    "id": "output",
    "title": "Output",
    "name": "output",
    "display_name": "Output",
    "unit": "",
    "type": "continuous",
    "data_type": "float",
    "stream_types": [],
    "raw_data_field": "",
    "model": "cycle"
  }
},

        Page Link

        The following is the accepted mapping to populate the parameter for this picker:

        {
  "mapping": {
    'choice_1': '"choice_2"'
  }
}

        What's Next