Skip to main content

IMPORTANT - Product End of Life Statement - IMPORTANT

Request RE, Survey, and Calendar 1.5 Support Ending December 31, 2020
Contact Kinetic Data Support with Questions
Kinetic Community

Extending a Deployment Calendar to a Work Order

This page contains instructions necessary to extend the deployment calendar described here to allow fulfillers to (re)schedule a deployment time for their work order directly within the work order from available times configured by the deployment team. Files/downloadable examples aren't included because work order implementations vary greatly. Details required to add this extension to the previous service item implementation are included on this page. User Interaction The user interaction with the scheduling calendar is very similar in the work order to what it is in the service item, but with a couple of additional features that allow the fulfiller to reserve a time with a  button click and release the selected time if one is already scheduled. If there is not a time reserved the section looks like this: And when “Select a Time” is clicked, the embedded calendar will display along with a date field that allows the user to select a date other than the one shown by default. When the user click on an available slot, the selected time is entered in the deployment time and the calendar is removed. New buttons are shown.  The Release Time button clears this unreserved time and hides these buttons, showing the Select a Time button again. The Reserve time button reserved the time and emails the requested for individual the scheduled time. Once the time is reserved, the time is displayed with a button that will release the reserved time, if desired.

Work Order

There are elements, events, additional supporting code and tree updates necessary for the service items.

Section Elements

The section is larger this time, with the extra buttons and additional fields to allow the reservation by button click, but all of the elements from the service item are present and perform the same functions they did within that item. To start, copy the Select Event Section from the Service Item available for download from the first part of this solution into the work order. There are 3 extra buttons (Release Reserved Time, Reserve Time, Release Unreserved Time) and a series of new fields used for constructing the name and details of the event and the message the the customer (Req For Name, Req For Email, Item Due Date, Web URL). Be sure to copy the showCalendar() function and update the field ID in the KS.utils.Action.setDateFields call (line 15). Aslo, be sure to copy over the include for timeSlots.js from the example service item. 


For the work order, since different buttons display based on the different states and all the buttons to line up beside each other as well as the question for deployment time, each button also has a float: right; style, just like the Select a Time button.

The Release Reserved Time button

<input id="Release_Reserved_button" type="button" class="templateButton_wide" value="Release This Time" title="Release Reserved Time" name="ReleaseReservedTime">

has a click event that releases the time using another function from timeSlot.js, releaseSlot(eventID). The event then fires the change event on Event ID, because that is what controls which buttons are visible, and clears the Deployment Time field.


Releasing a chosen but unreserved slot is a simpler matter, so the Release Unreserved Time button

<input id="Release_button" type="button" class="templateButton" value="Release Time" title="Release Time" name="ReleaseTime">

has a click event is just a Set Fields – Internal event that clears the Event ID and Deployment Time fields. Note that this does fire the change event for the Event ID question.


The Event ID field has a series of change events that control which buttons display for the user.




Reserving a time is done, within the work order, by clicking a button.

<input id="Reserve_button" type="button" class="templateButton" value="Reserve Time" title="Reserve Time" name="ReserveTime">

This requires additional information that is collected on the Review Page of the service item to be pieced together differently and be ready without element submission. The Req For Name, Req For Email, Item Due Date, and Web URL questions are used to facilitate this process. See the Additional Supporting Events subsection of this section for more details on how those fields are filled in. The Reserve Time button contains a click event that uses the reserveSlot function from timeSlot.js (reserveSlot(slotID, status, name, details, originatingID, originatingKSR, workOrderID)) to reserve the time. This process also informs the requested for of the new time using a function sendMessage (sendMessage(sendToEmailAddress,messageTemplateInstanceID,csrv)) out of sendMessage.js, so the Custom Header Content must include the sendMessage.js file:

<script type="text/javascript" src="/kinetic/themes/klean/packages/base/resources/js/sendMessage.js"></script>


Example Custom Code (from above image)

reserveSlot(KD.utils.Action.getQuestionValue('Event ID'), 'Reserved', 'Deployment for '+KD.utils.Action.getQuestionValue('Req For Name')+' for '+KD.utils.Action.getQuestionValue('_OriginalReqID'), 'Request: '+KD.utils.Action.getQuestionValue('_OriginalReqID') +'; Requested For: '+KD.utils.Action.getQuestionValue('Req For Name')+' For ' +KD.utils.Action.getQuestionValue('For Login ID')+ '; Due Date (if specified):'+ KD.utils.Action.getQuestionValue('Item Due Date'), KD.utils.Action.getQuestionValue('_OriginalReqInstanceID'), KD.utils.Action.getQuestionValue('_OriginalReqID'),  KD.utils.Action.getQuestionValue('_WorkOrderInstanceID'));

var csrv = KD.utils.Util.getParameter('csrv');
var sendTo = KD.utils.Action.getQuestionValue('For Email Address');
if (sendTo == '') {
sendTo = KD.utils.Action.getQuestionValue('Req For Email');

KD.utils.Action.removeElement('Reserve Time');
KD.utils.Action.removeElement('Release Unreserved Time');
KD.utils.Action.removeElement('Select Date Text');
KD.utils.Action.insertElement('Release Reserved Time');

As you can see in the above example code, the name and details are built as they are passed into the reserveSlot function in this case, instead of within a question as in the Service Item.

Additional Supporting Code

There is one more critical javascript in the Custom Header Content. This is the javascript called when a user clicks on a time. This setEventDetails function is passed the calendar event details by the click handler set up in the calendar and calls setCalendarEventDetails (from timeslot.js) to actually do the work of setting the details into the questions passed to it (first the Deployment Time and then the Event ID) and then removes the appropriate elements. Setting the event details in this manner allows the heavy lifting to be done by shared code, while allowing developers to customize the names of all of the section elements.

function setEventDetails(calendarEvent) {
    //Set date/time from the clicked calendar event
    setCalendarEventDetails(calendarEvent, 'Deployment Time', 'Event ID');
    //Show/Remove appropriate fields
    KD.utils.Action.removeElement('Select a Date');
    KD.utils.Action.removeElement('Calendar Frame');

Additional Support Events

The deployment event information for a slot that is reserved needs to be pulled into the work order when the page is loaded. It may be that this time was reserved in the service item, it may be that the event was reserved previously in the service item, but this allows the work order to always contain the correct information (even if the work order does not employ the save and exit feature). Note that this event fires the change for the Event ID question (to control the buttons). The work order is already pulling the originating ID into one of its questions, so whichever field that is can be referenced in this event. Note that for you dataset may be different than the one pictured here and you may place the desired/needed values in different locations.


Because this data isn’t stored in the database in the same format the user should view it in, there is a change event on the Deployment Time question that only fires when the page is loading that uses a function from timeSlots.js (formatSavedDeploymentDateTime(questionName)) to format the date.


To support the creation of the Name and Details for the slot and the webURL and to address for the email, there also needs to be either additional events or updates to existing events on page load to fill in the Req For Name, Req for Email, Web URL and Item Due Date questions. In this example, three of the fields are added to a Load Service Item Details event that already existed.


And a new event may be needed to gather information from the originating record. This example pulls the item due date, but you may desire other information from the original request for the details of the calendar entry. Pull whatever information is needed from the original request here.



Tree Set Up

The Timeslot needs to be released on Denial or Cancellation. This may require, depending on your cancellation processes, the event ID to be returned as a result from the work order. The Continue Original Request node would need this result added in, if that is the case.