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
Property | Type | Example | Description | Required |
---|---|---|---|---|
ref | string | pickup-date | Required unless you want | |
title | string | Choose a date | Descriptive title is shown at 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 radio select is based on a number of items. Each 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 subtile | |
lineBreakMode | string | wrap | lineBreakMode = 'wrap' enables multiline titles | |
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 |
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')
}
}]
...
})
Updated 12 months ago