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

PropertyTypeExampleDescriptionRequired
refstringpickup-dateRequired unless you want
titlestringChoose a dateDescriptive title is shown at the topYes
tintstring#FF0000Tint color used for the buttons
searchbooleantrueWhen set to true, it will display a search bar
button.labelstringChoose itemLabel of the confirmation button

Items

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

Properties

PropertyTypeExampleDescriptionRequired
titlestringAwesome PhoneTitle of the itemYes
subtitlestring10" screen with 12GB memoryOptional subtile
imagestringhttps://.../thumbnail.pngURL to display image thumbnail
onSelect.eventNamestring"Date selected"Event name to trigger when selection is madeYes
onSelect.paramParam or arraynew Param('productiId', 112234)Parameters that are set when the item is selected

Example

Item with image

Each item can have a thumbnail associated with it.

πŸ“˜

Note

Recommended size of the thumbnails is at least 80x80 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 a 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')
    }
  }]
  ...
})