Prerequisites

To render the scheduler directive, you should switch to chatbot version - v2 in the Bot view template node.
API to get the scheduled times.
URLs of the images from Orbita backend. see How do I upload an image? for more information.

Scheduler

The Scheduler directive lets you render the time and date in a window from which the user can choose the time and date of his/her appointment.

Sample scheduler directive

if(!msg.payload.orbita) {
    msg.payload.orbita = {}
}

// Set the Url for getting time slots
var timeSlotsServerURL = '/oeapi/gettimeslots-support';

// Create the scheduler Directive
msg.payload.orbita.directive= [{  
    "type": "scheduler",
    "title": "<h3>Title of the Window</h3>", 
    "headercard": {
        "fullName": "Header Text",
        "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/aurora/assets/dynamic/images/orbitascheduler13d408b0-32af-11ea-9bc7-5d28415c60bb.png",
        "address": "Header address",
        "name": "Header Name",
        "description": "Header Description"
    },
    "calendar": {
        "startDate": "", // if empty start from current date
        "endDate": "", //if empty end with next 30 day's,
        "title": `<strong>Available Times:</strong>`,
        "description": "Please select a time that is convenient for you.",
        "getTimeUrl":timeSlotsServerURL, // http url to load the available slots dynamically. 
    },
    "subList": {
        "title": "Sublist title",
        "items": [{
            "fullName": "Item fullname 1",
            "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/sandbox5/assets/dynamic/images/smallimage192c03a10-384d-11ea-9e3c-4750e1188599.jpg",
            "description": "Item description 1",
            "name": 'Item Name 1',
            "address": '',
            "phone": '',
            "paramValue":'Param1',
            "paramName": `facility`,
        },
        {
            "fullName": "Item fullname 2",
            "imageUrl": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg",
            "description": "Item description 2",
            "name": 'Item Name 2',
            "address": '',
            "phone": '',
            "paramValue":'Param2',
            "paramName": `facility`,
        },
        {
            "fullName": "Item fullname 3",
            "imageUrl": "https://s3.amazonaws.com/orbitahealth/clients/aurora/assets/dynamic/images/Bigimage3073a45d0-3393-11ea-9bc7-5d28415c60bb.jpg",
            "description": "Item description 3",
            "name": 'Item Name 3',
            "address": '',
            "phone": '',
            "paramValue":'Param3',
            "paramName": `facility`,
        }],
    },
    "buttons": [{
        "text": "Select Appointment",
        "type": "javascript",
        "value": "orbitaAction.schedulerDir.submitAction()",
        "icon": "<i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i>"
    }]
}]

return msg;

Parameters used for Scheduler

Parameter	Description
`"type": "scheduler"`	The type property should be set as “scheduler”.
`"title": "<h3>Title of the Window</h3>",`	The Title of the Scheduler window.
`"headercard": {` `"fullName": "Header Text",` `"imageUrl": "URL",` `"address": "Header address",` `"name": "Header Name",` `"description": "Header Descr"` `},`	headercard fullName - The full name of the Header. imageUrl - The URL of the header image. address - The address of the header. name - Short name of the header to render it in the card. description - The text from the description property is rendered in the scheduler window.
`"calendar": {` `"startDate": "",` `"endDate": "",` `"title": <strong>slot:</strong>,` `"description": "Select a time",` `"getTimeUrl":timeSlotsServerURL,` `"availableTimes": []` `}`	calendar startDate - The date from which the calendar should start. If left empty, the calendar starts from the current date. endDate - The date until which the calendar gets rendered. If left empty, the calendar ends after 30 days from the startDate. title - The title for the timeslots section in the scheduler window. description - The description for the timeslots section in the scheduler window. getTimeUrl - API for fetching the available time slots. As an example, random time slots are generated and rendered using a function node in the sample flow json (attached).
`"subList": {` `"title": "Sublist title",` `"items": [{` `"fullName": "Item fullname1",` `"imageUrl": "URL",` `"description": "Item desc1",` `"name": 'Item Name 1',` `"address": '',` `"phone": '',` `"paramValue":'Param1',` "paramName": `facility`, `}]` `}`	sublist title - The title of the sub-list section in the scheduler window. items - Items can be a doctor, or a hospital, or a drive location, and so on. fullName - Full name for each item. imageUrl - Url of the item’s Image. description - Description of the item. name - You can give a short name for each item. address - Optional phone - Optional paramValue - Unique identifier for the item. You can use this value to create item based logic. For example, user defined timeslots for each item. paramName - This should always be `facility` to be able to use the `paramValue`. The `paramName` should be `facility` and the `paramValue` should be a unique.
`"buttons": [{` `"text": "Select Appointment",` `"type": "javascript",` `"value":"orbitaAction.schedulerDir.submitAction()",` `"icon": "<i class="fa fa-map-marker" aria-hidden="true"></i>"` `}]`	button text - The button text value - The button action to be performed on click. Clicking on the button generates a chat bubble with the appointment details. You can change the contents of the chat bubble from the chat.js. (scheduler - index.js file)

Time Slot API

You can use an API to create a set of timeslots for your selected item. The variable in the above example code is created for the same.

You should call the time slots from the API and pass them to the getTimeUrl property.

Any changes to the time slots should be done in the API based on the paramValue defined for each of the sublist items.

Sample code for Generate Slot function node

var result = [];

var slots;
if (msg.payload.facilityID == "Param1") {
    slots = [
        {"text":"Morning","value":"10:30 AM"},
        {"text":"Afternoon","value":"2:00 PM"}]    
}
else if (msg.payload.facilityID == "Param2"){
    slots = [
        {"text":"Evening","value":"4:30 PM"},
        {"text":"Night","value":"7:00 PM"}]
}
else {
    slots = [
        {"text":"Morning","value":"10:30 AM"},
        {"text":"Afternoon","value":"2:00 PM"},
        {"text":"Evening","value":"4:30 PM"},
        {"text":"Night","value":"7:00 PM"}]
}

msg.payload = slots
return msg;

Sample Scheduler directive flow

	File	Modified

No files shared here yet.

Scheduler Directive

Prerequisites

Scheduler

Parameters used for Scheduler

button

Time Slot API

Related Articles