Radio Select

Allow a user to make a selection out of a list of options.

Example usage

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

  const message = new Message(`Select a category ${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 radio 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
lineBreakModestringwraplineBreakMode = 'wrap' enables multiline titles
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. By default, this image is square pixels.

πŸ“˜

Note

Recommended size of the thumbnails is at least 80x80 pixels.

const url = await webview.radioSelect.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.radioSelect.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.radioSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})