Multiple Select

Allow a user to select multiple options out of a list.

Note:

The Multiple-Select is comparable to the Radio Select in functionality

Example usage

async payload => {
  
  const url = await webview.multipleSelect.create({
    ref: 'category',
    title: 'Choose a category',
    eventName: 'select',
    items: [{
      title: 'Audio',
      subtitle: 'Sound, music and noise',
      onSelect: {
        params: new Param('category', 'audio')
      }
    }, {
      title: 'Display',
      subtitle: 'Screen, video and pixels',
      onSelect: {
        params: new Param('category', 'display')
      }
    }, {
      title: 'Camera',
      subtitle: 'Lenses, posture and flashes',
      onSelect: {
        params: new Param('category', 'display')
      }
    }]
  })
  
  const buttons = new Buttons('Select categories')
  buttons.addButton(new Button({
    label: 'Choose categories',
    type: 'webview',
    value: url
  }))

  const message = new Message(`Choose categories ${url}`)
  message.addResponse(buttons)

  return message
}

Properties

Property	Type	Example	Description	Required
ref	string	pickup-date	Required unless you want
title	string	Choose a date...	Descriptive title shown in the top	Yes
tint	string	#FF0000	Tint color used for the buttons
search	boolean	true	When set to true it will display a search bar
button.label	string	Choose item	Label of the confirmation button

Items

The multiple select is based on a number of items. Each can individual can contain a title, subtitle, image and onSelect property.

Properties

Property	Type	Example	Description	Required
title	string	Awesome Phone	Title of the item	Yes
subtitle	string	10" screen with 12GB memory	Optional subtitle
image	string	https://.../thumbnail.png	URL to display image thumbnail
onSelect.eventName	string	"Date selected"	Event name to trigger when selection is made	Yes
onSelect.param	Param or array	new Param('productiId', 112234)	Parameters that are set when the item is selected

Examples

Item with image

Each item can have a thumbnail associated with it.

Note:

Recommended size of the thumbnails is at least 80 x 80 pixels

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})

---

Item with subtitle

Each item can optionally have a subtitle.

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})

Item with subtitle and image

You can also combine an item with subtitle and image

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})