Long read template Example usage const url = await webview.article.create({ ref : 'news-item' , title : 'Hello world' , content : `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }) Within   content   you can use   Markdown   to format text. const url = await webview.article.create({ ref : 'article' , title : 'Hello world' , content : ` # Title A simple paragraph with text ## Heading 2 - List item 1 - List item 2 - List item 3 ` }) Properties Property Type Example Description Required ref string news-article Required unless you want   title string Select product Descriptive titles shown in the top Yes content string Lorem ipsum dolor... Markdown supported content Yes

The Date picker provides an easy way to handle date selection. Example usage const url = await webview.datePicker.create({ ref : 'pickup-date' , title : 'Choose a pick up date' , onSelect : { eventName : 'pick date' , paramName : 'date' } }) Properties Property Type Example Description Required ref string pickup-date If provided, the webview will update it's content   title string Choose a date... Descriptive titles shown in the top Yes tint string #FF0000 Tint color used for the buttons   button.label string Choose date Label of the confirmation button   onSelect.eventName string Date selected Event name to trigger when selection is made Yes onSelect.paramName string pickupDate Optional name to use for the parameter that will contain the selected date   Calendar properties Parameter Type Default Description value array   Array with initial selected dates. Each array item represents selected date disabled Date Range   Additional disabled dates. Parameter accepts so called Date Range (look below for details) events Date Range   Dates with events. Will be marked with additional "dot" on calendar day. Parameter accepts so called Date Range (look below for details). monthNames array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] Array with full month names monthNamesShort array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Array with short month names dayNames array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Array with week day names dayNamesShort array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Array with week day short names firstDay number 1 First day of the week. By default 1 - Monday weekendDays array [0, 6] Array with index number of weekend days, by default it is Saturday and Sunday dateFormat string yyyy-mm-dd Default date format, available expressions:'yyyy' - 4 digits year'yy' - 2 digits year'mm' - 2 digits month number, from 01 to 12'm' - month number, from 1 to 12'MM' - full month name'M' - short month name 'dd' - 2 digits day number, from 01 to 31'd' - day number, from 1 to 31'DD' - full week day name 'D' - short week day name multiple boolean false Enable to allows select multiple dates/values rangePicker boolean false Enable to enable range picker. Not compatible with multiple rangePickerMinDays number 1 Minimum days that need to be selected when rangePicker enabled rangePickerMaxDays number 0 Maximum days allowed to be selected when rangePicker enabled. 0 means no maximum direction string horizontal Months layout direction, could be 'horizontal' or 'vertical' minDate Date null Minimum allowed date maxDate Date null Maximum allowed date weekHeader boolean true Enable week header with short name week days monthSelector boolean true Enable month selector in toolbar yearSelector boolean true Enable year picker in toolbar More details Date Range Some of Calendar parameters (disabled, events) accept a so called Date Range. It is a simple way to specify and cover all possible dates combination. It can be array with dates, for example: ... // Disable all dates between 1st October 2015 and 31 December 2015 disabled : { from : new Date ( 2015 , 9 , 1 ), to : new Date ( 2015 , 11 , 31 ) } ... Or array with mixed dates and objects: ... events: [ new Date ( 2015 , 9 , 1 ), new Date ( 2015 , 9 , 5 ), { from : new Date ( 2015 , 9 , 10 ), to : new Date ( 2015 , 9 , 15 ) }, { from : new Date ( 2015 , 9 , 20 ), to : new Date ( 2015 , 9 , 31 ) }, { date : new Date ( 2015 , 11 , 1 ), color : '#ff0000' } ] ... Date Events If you want to indicate that day has few different events, it is possible to indicate this with multiple different color dots. In this case, you need to pass date range as array where each object will have date and color properties ... events: [ new Date ( 2015 , 9 , 1 ), new Date ( 2015 , 9 , 5 ), { from : new Date ( 2015 , 9 , 10 ), to : new Date ( 2015 , 9 , 15 ) }, { from : new Date ( 2015 , 9 , 20 ), to : new Date ( 2015 , 9 , 31 ) }, { date : new Date ( 2015 , 11 , 1 ), color : '#ff0000' }, // same date but one more color dot will be added { date : new Date ( 2015 , 11 , 1 ), color : '#00ff00' }, ] ...

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 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 radio 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   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   Examples 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 80 x 80 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 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' ) } }] ... })  

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' ) } }] ... })

Display content and a button that triggers an event You can use   Markdown   within the content to format text. const url = await webview.terms.create({ ref : 'terms' , onSelect : { eventName : 'ACCEPTED' }, title : 'Accept our terms of usage' , tint : '#000' , content : ` # Title A simple paragraph with text ## Heading 2 - List item 1 - List item 2 - List item 3 ` }) Reference Property Type Example Description Required ref string news-article If provided, the webview will update it's content   tint string #FF0000 Tint color used for the button   title string Select product Descriptive titles shown in the top Yes onSelect.eventName string ACCEPTED Event name to trigger when terms are accepted Yes content string Lorem ipsum dolor... Markdown supported content Yes button.label string I agree and accept Label of the confirmation button