Embed Size (px)
Citation preview
Combining Calendar into Request
Embedding a Deployment Times Calendar into a Request
3
Agenda Combining Calendar & Request Creating Calendar Data Creating the Calendars Embedding Calendar in Request Questions
5
Combining Calendar and Request?
Creating Calendar Data
7
Creating the Calendar Data Two Data Sets, One Data Source
Available Time Slots Reserved Time Slots
Supporting/Managing this Data Creating this Data
8
Available Time Slots
9
Reserved Time Slot
10
Automated Time Slot Creation
Creating the Calendars
12
Creating the Calendars Example Booked Time Calendar{
"name": "Desktop Reserved Times",
"id": "ScheduleDesktop",
"description": "Reserved Times for Desktop Appointments",
"status": "Active",
"defaultView": "Week",
"displayPage": "/themes/default/calendar.jsp",
"visibleInListing": true,
"clickHandler": {},
"eventTypeOrder": []
}
13
Creating the Calendars Example Booked Time Event{
"name": "Completed",
"status": "Active",
"defaultFilter": "",
"detailsPage": "/themes/default/event.jsp",
"color": null,
"source": {
"connectionName": "ITSM ARS",
"configuration": {
"Form": "CUSTOM:KS_TimeSlots",
"Qualification": "'Status' = \"Reserved\" AND 'CalendarName' = \"My Deployment Calendar\""
},
"coreMappings": {
"Id": "{{1}}",
"Name": "{{700006001}}",
"Description": "{{700006001}}",
"Start": "{{700006053}}",
"End": "{{700006054}}"
},
"detailMappings": {
"SlotName": "{{700006001}}",
"SlotStartTime": "{{700006053}}",
"SlotEndTime": "{{700006054}}",
"Service Item Details": "{{700006005}}"
},
"filterMappings": [
{
"name": "Duration",
"value": "{{700006052}}",
"values": {}
}
]
}
}
14
Creating the Calendars Example Available Time Calendar{
"name": "Desktop Available Times",
"id": " ScheduleDesktopAvailable",
"description": "Available Times for Desktop Appointments",
"status": "Active",
"defaultView": "Day",
"displayPage": "/themes/default/calendar.jsp",
"visibleInListing": false,
"clickHandler": {},
"eventTypeOrder": []
}
15
Creating the Calendars Example Available Time Event{
"name": "Available",
"status": "Active",
"defaultFilter": "",
"detailsPage": "/themes/default/event.jsp",
"color": null,
"source": {
"connectionName": "ITSM ARS",
"configuration": {
"Form": "CUSTOM:KS_TimeSlots",
"Qualification": "'Status' = \"Available\" AND 'CalendarName' = \"My Deployment Calendar\""
},
"coreMappings": {
"Id": "{{1}}",
"Name": "{{700006001}}",
"Description": "{{700006001}}",
"Start": "{{700006053}}",
"End": "{{700006054}}"
},
"detailMappings": {
"SlotName": "{{700006001}}",
"SlotStartTime": "{{700006053}}",
"SlotEndTime": "{{700006054}}"
},
"filterMappings": [
{
"name": "Available",
"value": "{{700006001}}",
"values": {}
}
]
},
"clickHandler": {
"type":"js",
"callback":"window.parent.setEventDetails",
"parameters": {}
}
}
Embedding Calendar in Request
17
Service Item – User View
18
Service Item – Developer View
Calendar Frame<div class="calContainer">
<iframe id="calFrame" height="700px" width="97%"
data-src="/kineticCalendar/calendar?id=ScheduleDesktopAvailable&embedded=true">
<p>Your browser does not support iframes.</p> </iframe>
</div>
19
Showing the Calendar Clicking the button to select a time calls the showCalendar() function
that sets a default time and a change on the Select a Date field, which actually displays the calendar.
20
Calendar Click Event A function must exist in the service item to handle the click in the
embedded calendar (as configured in the calendar)
21
timeSlots.js Part of a package to manage the time slots as described in this
example Provides:
setCalendarURL(isoDate, calFrameElementId) setCalendarEventDetails(calendarEvent, dateQuestionName,
eventIdQuestionName) reserveSlot(slotID, status, name, details, itemID, itemNo, workOrderID) & more
22
Tree Set-Up The Timeslot needs to be released on Denial, Expiration, or
Cancellation. This can be done by using the KS Timeslot Record Update handler.
23
What did we just cover? Combining Calendar & Request Creating Calendar Data Creating the Calendars Embedding Calendar in Request
24
Questions?
