...
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
Use it your custom logic to define 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>"
}]
| 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) |
| Info |
|---|
You will get the paramName and paramValue at msg.payload.queryResult.parameters.freeText.0.facility The time and date that the user selected in the Scheduler directive will be at msg.payload.queryResult.parameters.freeText.0.time and msg.payload.queryResult.parameters.freeText.0.date respectively. |
...
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.
...
| Code Block |
|---|
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; |
...
Free text Intent
To continue the flow after you select an appointment, you have to trigger the Free Text Intent.
Invoke Scheduler with Flow studio
The best way to use a scheduler directive is with flow studio.
The Custom control that triggers the scheduler directive should be connected to the Single Input control with the Input Type as Textbox in the Directive tab.
...
In the Experience Designer, you have to connect the autogenerated OrbitaFlowMessages Intent tothe Flow Manager node.
Invoke Scheduler with an intent
Connect the Scheduler directive to an Intent as shown in the below screenshot.
Image AddedSet a state for the Scheduler directive.
| Code Block |
|---|
msg.payload.orbita.state = "Scheduler" |
Create a Free Text Intent.
Image AddedUse the free text intent with the the same state set in the scheduler directive node.
Image Added
Sample Scheduler directive flow
...