Documentation - Khoros Flow
  • Getting started
  • Triggers & Replies
  • Actions
  • Integrations
  • Guides
  • API

›Webviews

Actions

  • Overview
  • When and why
  • Code actions

    • Overview
    • Payload
    • Toolbelt
    • API Calls
    • Configuration
    • Triggering Events
    • Sending Replies
    • Params
    • Managing State
    • Debugging

    Webhook actions

    • Overview
    • Receiving calls
    • Sending Replies

    Zapier actions

    • Overview

    Payments

    • Overview
    • Stripe Single Purchase
    • Stripe Prepared Product Purchase
    • Examples of Stripe Purchases

    Webviews

    • Overview
    • Article
    • Date Picker
    • Radio select
    • Multiple Select
    • Terms

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 date...Descriptive title shown in 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 can individual can contain a title, subtitle, image and onSelect property.

Properties

PropertyTypeExampleDescriptionRequired
titlestringAwesome PhoneTitle of the itemYes
subtitlestring10" screen with 12GB memoryOptional subtitle
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

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')
    }
  }]
  ...
})
← Radio selectTerms →
  • Example usage
  • Properties
  • Items
    • Properties
  • Examples
    • Item with image
    • Item with subtitle
    • Item with subtitle and image
Docs
Getting StartedBasic conceptsGuides
Platform
StatusSlack community
Resources
Blog
Copyright © 2021 Khoros Flow