Please use docs.servicenow.com for the latest documentation.

This site is for reference purposes only and may not be accurate for the latest ServiceNow version

Schedule Pages

From Wiki Archive
Jump to: navigation, search
Note
Note: This article applies to Fuji and earlier releases. For more current information, see Schedule Pages at http://docs.servicenow.com

The ServiceNow Wiki is no longer being updated. Visit http://docs.servicenow.com for the latest product documentation.



Overview

A schedule page is a record that contains a collection of scripts that allow for custom generation of a calendar or timeline display. For a discussion of how calendars are created using Schedule Pages, see Creating Calendars with Schedule Pages. For information about custom generated timelines using schedule pages, see Timelines. See Application Programming Interface (API) for links to classes and methods in the API.

Schedule Pages Form

To access Schedule Pages, navigate to System Scheduler > Schedules > Schedule Pages. The form provides the following fields, depending upon the View Type selected:

Field Field Type Description
Name String General name that is used to identity the current schedule page.
Schedule type String The schedule type is a string that is used to uniquely identity the schedule page via the "sysparm_page_schedule_type" URI parameter. For example, a schedule page could be accessed as follows:


/show_schedule_page.do?sysparm_page_schedule_type=gantt_chart&sysparm_timeline_task_id=d530bf907f0000015ce594fd929cf6a4

Alternatively, the schedule page can also be accessed by setting the "sysparm_page_sys_id" URI parameter to that of the unique 32 character hexadecimal system identifier of the schedule page.

View Type Choice Each view type displays different field combinations. There are two options available :
Description String General description that provides additional information about the current schedule page. This field is not necessary.
Init function name String
Note
Note: This functionality is only used by Calendar type schedule pages.

The init function name specifies the name of the JavaScript function to call inside the Client script function for calendar type schedule pages.

HTML String
Note
Note: This functionality is only used by Calendar type schedule pages.

The HTML field is a scriptable section that is parsed by Jelly and injected into the display page prior to the rest of the calendar. It can be used to pass in variables from the server and define extra fields are necessary.

Client script String The client script is a scriptable section that allows for configuring options of the schedule page display. The API is different depending on the schedule page view type and is discussed below.
Server AJAX processor String
Note
Note: This functionality is only used by Calendar type schedule pages.

The Server AJAX processor is specific to calendar type schedule pages that is used to return a set of schedule items and spans to be displayed.


Timelines

A Timeline Schedule Page is a specific record that contains configuration information for displaying time based points and spans in a "timeline" like fashion. The timeline schedule page references a script include that extends from AbstractTimelineSchedulePage to perform dynamic modification to the timeline based on different events and conditions. Both the schedule page and the script include for timeline generation allow for extreme customization and their corresponding application programming interface (API) is documented below.

The following diagram shows the series of events that occur when a timeline schedule page is accessed. Once the timeline has been loaded, all subsequent events, such as events resulting from timeline interaction (e.g. moving a timeline span), follow the same logic flow shown in the gray event box.


TimelineFlow.png

Applications that Use Schedule Pages to Generate Timelines

Application Programming Interface (API)

Timeline schedule pages use an internal class that allows for direct customization of how a timeline is displayed. Creation of new timeline schedule pages requires thorough understanding of how the page/event flow [link to above] works as well as capability to write both client and server side JavaScript. The API described below details the available methods and scripting requirements for both the client side and server side.

Note
Note: Click here to view a complete example of a new timeline schedule page with its corresponding script include.


The timeline Application Programming Interface (API) contains the following classes:

See the Incident Summary Timeline example for information about how a project support manager might use these APIs to create a timeline in which new incidents are grouped together by priority and closed incidents by duration.

Client Script / Class GlideTimeline

The GlideTimeline class provides the core implementation for configuring and displaying a Glide Windowing Toolkit Timeline. For security the GlideTimeline has already been instantiated as a single instance variable named: glideTimeline. All configurations should be made in the client script section of the corresponding schedule page referencing this instance variable.

Method Summary
Return Value Details
void setReadOnly(Boolean b)
Enables or disables all timeline event interaction. If enabled, event interaction is determined from the corresponding attributes specified by each Timeline Item. The default value for the readOnly property is false.
void showLeftPane(Boolean b)
Specifies whether or not to show the left hand pane in the timeline. The default value for the showLeftPane property is true.
void showSummaryPane(Boolean b)
Specifies whether or not to show the summary pane at the bottom of the timeline. The default value for the showSummaryPane property is true.
void showLeftPaneAsTree(Boolean b)
Specifies whether or not to show items that have a parent attribute as nested indented nodes with expand and collapse capability. The default value for the showLeftPaneAsTree property is false.
void showTimelineText(Boolean b)
Specifies whether or not to show the timeline text underneath each Timeline Span in the primary timeline pane. The default value for the showTimelineText property is false.
void showDependencyLines(Boolean b)
Specifies whether or not to show dependency lines between Timeline Spans. This is only applicable if the set of Timeline Items returned from the server includes dependency relationships. The default value for the showDependencyLines property is false.
void groupByParent(Boolean b)
Specifies whether or not to group items by their parent. If true, this will nest all child items inside their parent. This affects the ordering of display and children will always be listed immediately after their parent. The default value for the groupByParent property is false.
void sortByLeftLabelText(Boolean b)
Specifies whether or not to sort the list of Timeline Items returned in alphabetical order according to the text that was specified to show in the Left Pane. Note that this function will still sort regardless if the left pane is disabled. Additionally, if groupByParent() is set true, items will be sorted appropriately after grouping has occurred. The default value for the sortByLeftLabelText property is false.
void sortByTimelineLabelText(Boolean b)
Specifies whether or not to sort the list of Timeline Items returned in alphabetical order according to the text that was specified to show in the Timeline Pane. Note that this will still sort will still occur regardless if the timeline text has been set false via the showTimelineText() method. Additionally, if groupByParent() is set true, items will be sorted appropriately after grouping has occurred. The default value for the sortByTimelineLabelText property is false.
void sortByStartDate(Boolean b)
Specifies whether or not to sort the list of Timeline Items returned by the earliest start date of an item's Timeline Span objects. Note that if groupByParent() is set true, items will be sorted appropriately after grouping has occurred. The default value for the sortByStartDate property is false.
void setDefaultPointIconClass(String strName)
Specifies the default icon class to use for Timeline Spans with zero duration if no icon class was explicitly specified in the properties of the Timeline Span returned from the server. The default value for the setDefaultPointIconClass property is milestone.
void showLeftPaneInputBox(Boolean b, String strDefaultValue)
Specifies whether or not to show the text input box at the bottom of the left pane with a default value as specified by strDefaultValue. Note that if the left pane is diabled via showLeftPane() the input box will not be visible. The default value for the showLeftPaneInputBox property is false.
void setInitialViewRange(mixed objStartDate, mixed objEndDate)
Specifies the initial viewable range for the timeline. The format of the start and end date must be either in the default timestamp format: yyyy-MM-dd HH:mm:ss or specified as a number representing the time in milliseconds since the standard epoch of 1/1/1970. The default range is the range that specifies the earliest Timeline Span point to the end of the latest Timeline Span. If the initialViewRange property is specified, it will override the default range.
void setExtraAjaxParam(String strName, String strValue)
Allows setting of additional parameters in the client script to be made available to the corresponding Script Include events by using the getParameter() method. URI parameters that are prefixed with "sysparm_timeline_" will automatically be included in all server side AJAX calls.
void registerEvent(String strServerEvent, String strScriptIncludeName)
Registers the specified Timeline server event. The strServerEvent must be one of the allowed events for registration to work correctly. When the event occurs, the GlideTimeline will send a request to the server and process the event as handled inside the strScriptIncludeName class.
void snapVertScrollingIntoRows(Boolean boolSnapVertScrollingIntoRows)
Specifies whether or not the vertical movement of timeline span objects (if appropriately registered to perform this event) should snap adjust into the closest row. By default this value is enabled.
void showGridLines(Boolean boolShowGridLines)
Specifies whether or not to show grid lines for each row of data on the timeline. By default, grid lines are enabled.
void setAutoRefresh(Number intSeconds)
Specifies the number of seconds to wait before performing an auto refresh of the data on the timeline. Setting the number of seconds to 0 will turn auto refresh off. By default, auto refresh is not enabled. Note that if intSeconds is greater than 0 and less than the minimum allowed time in seconds (10), it will be set to 10 seconds.


setReadOnly

public void setReadOnly(Boolean b)

Enables or disables all timeline event interaction. If enabled, event interaction is determined from the corresponding attributes specified by each Timeline Item. The default value for the readOnly property is false.
Parameters:
b - Boolean variable that marks the entire timeline as read-only (non-interactive) if set to true.
Example:
<source lang="JavaScript">

glideTimeline.setReadOnly(true); </source>

showLeftPane

public void showLeftPane(Boolean b)

Specifies whether or not to show the left hand pane in the timeline. The default value for the leftPane property is true.
Parameters:
b - Boolean variable that will show the left pane if set true; otherwise, the left pane will not be displayed.
Example:
<source lang="JavaScript">

glideTimeline.showLeftPane(false); </source>

showSummaryPane

public void showSummaryPane(Boolean b)

Specifies whether or not to show the summary pane at the bottom of the timeline. The default value for the showSummaryPane property is true.
Parameters:
b - Boolean variable that will show the summary pane if set true; otherwise, if false the summary pane will not be displayed.
Example:
<source lang="JavaScript">

glideTimeline.showSummaryPane(false); </source>

showLeftPaneAsTree

public void showLeftPaneAsTree(Boolean b)

Specifies whether or not to show items that have a parent attribute as nested indented nodes with expand and collapse capability. The default value for the showLeftPaneAsTree property is false.
Parameters:
b - Boolean variable that will display child item nodes indented with expand/collapse capability if set true; otherwise, all left pane items will be displayed at a single indent level.
Example:
<source lang="JavaScript">

glideTimeline.showLeftPaneAsTree(true); </source>

showTimelineText

public void showTimelineText(Boolean b)

Specifies whether or not to show the timeline text underneath each Timeline Span in the primary timeline pane. The default value for the showTimelineText property is false.
Parameters:
b - Boolean variable that will display descriptive text underneath each Timeline Span if set true; otherwise, no text will be displayed underneath each Timeline Span.
Example:
<source lang="JavaScript">

glideTimeline.showTimelineText(true); </source>

showDependencyLines

public void showDependencyLines(Boolean b)

Specifies whether or not to show dependency lines between Timeline Spans. This is only applicable if the set of Timeline Items returned from the server includes dependency relationships. The default value for the showDependencyLines property is false.
Parameters:
b - Boolean variable that will display dependency lines on the timeline if set true; otherwise, will not.
Example:
<source lang="JavaScript">

glideTimeline.showDependencyLines(true); </source>

groupByParent

public void groupByParent(Boolean b)

Specifies whether or not to group items by their parent. If true, this will nest all child items inside their parent. This affects the ordering of display and children will always be listed immediately after their parent. The default value for the groupByParent property is false.
Parameters:
b - Boolean variable that will group Timeline Items by their parent if set true
Example:
<source lang="JavaScript">

glideTimeline.groupByParent(true); </source>

sortByLeftLabelText

public void sortByLeftLabelText(Boolean b)

Specifies whether or not to group items by their parent. If true, this will nest all child items inside their parent. This affects the ordering of display and children will always be listed immediately after their parent. The default value for the groupByParent property is false.
Parameters:
b - Boolean variable that will sort Timeline Items alphabetically by the text specified in an item's left label if set true
Example:
<source lang="JavaScript">

glideTimeline.sortByLeftLabelText(true); </source>

sortByTimelineLabelText

public void sortByTimelineLabelText(Boolean b)

Specifies whether or not to sort the list of Timeline Items returned in alphabetical order according to the text that was specified to show in the Timeline Pane. Note that this will still sort will still occur regardless if the timeline text has been set false via the showTimelineText() method. Additionally, if groupByParent() is set true, items will be sorted appropriately after grouping has occurred. The default value for the sortByTimelineLabelText property is false.
Parameters:
b - Boolean variable that will sort Timeline Items alphabetically by the text specified in an item's timeline span text if set true
Example:
<source lang="JavaScript">

glideTimeline.sortByTimelineLabelText(true); </source>

sortByStartDate

public void sortByStartDate(Boolean b)

Specifies whether or not to sort the list of Timeline Items returned by the earliest start date of an item's Timeline Span objects. Note that if groupByParent() is set true, items will be sorted appropriately after grouping has occurred. The default value for the sortByStartDate property is false.
Parameters:
b - Boolean variable that will sort Timeline Items chronologically to their earliest start date if set true
Example:
<source lang="JavaScript">

glideTimeline.sortByStartDate(true); </source>

setDefaultPointIconClass

public void sortByStartDate(String strName)

Specifies the default icon class to use for Timeline Spans with zero duration if no icon class was explicitly specified in the properties of the Timeline Span returned from the server. The default value for the setDefaultPointIconClass property is milestone.
Parameters:
strName - String that specifies one of the following values:
  • milestone Timeline milestone.gif
  • blue_square Timeline blue square.gif
  • sepia_square Timeline sepia square.gif
  • green_square Timeline green square.gif
  • red_square Timeline red square.gif
  • black_square Timeline black square.gif
  • blue_circle Timeline blue circle.gif
  • sepia_circle Timeline sepia circle.gif
  • green_circle Timeline green circle.gif
  • red_circle Timeline red circle.gif
  • black_circle Timeline black circle.gif
Example:
<source lang="JavaScript">

glideTimeline.setDefaultPointIconClass('blue_circle'); </source>

showLeftPaneInputBox

public void showLeftPaneInputBox(Boolean b, String strDefaultValue)

Specifies whether or not to show the text input box at the bottom of the left pane with a default value as specified by strDefaultValue. Note that if the left pane is diabled via showLeftPane() the input box will not be visible. The default value for the showLeftPaneInputBox property is false.
Parameters:
b - Boolean variable that will show the left pane input box if set true.
strDefaultValue - String that specifies the default value to display in the input box.
Example:
<source lang="JavaScript">

glideTimeline.showLeftPaneInputBox(true, 'Add a new task ...'); </source>

setInitialViewRange

public void setInitialViewRange(mixed objStartDate, mixed objEndDate)

Specifies the initial viewable range for the timeline. The format of the start and end date must be in the default timestamp format: yyyy-MM-dd HH:mm:ss. The default range is the range that specifies the earliest Timeline Span point to the end of the latest Timeline Span. If the initialViewRange property is specified, it will override the default range.
Parameters:
objStartDate - Either a string that specifies the start time of the view range in format: yyyy-MM-dd HH:mm:ss or a number representing the start time in milliseconds.
objEndDate - Either a string that specifies the end time of the view range in format: yyyy-MM-dd HH:mm:ss or a number representing the end time in milliseconds.
Example:
<source lang="JavaScript">

// Sets the initial range to begin on June 20th, 2010 at 8:00 AM and end on June 28th, 2010 at 2:00 PM UTC time. glideTimeline.setInitialViewRange("2010-06-20 08:00:00", 1277647200000); </source>

setExtraAjaxParam

public void setExtraAjaxParam(String strStartDate, String strEndDate)

Allows setting of additional parameters in the client script to be made available to the corresponding Script Include events by using the getParameter() method. URI parameters that are prefixed with "sysparm_timeline_" will automatically be included in all server side AJAX calls..
Parameters:
strName - String that specifies the URI parameter name.
strValue - String that specifies the value of strName.
Example:
<source lang="JavaScript">

glideTimeline.setExtraAjaxParam("sysparm_timeline_limit", "5"); </source>

registerEvent

public void registerEvent(String strServerEvent, String strScriptIncludeName)

Registers the specified Timeline server event. The strServerEvent must be one of the allowed events for registration to work correctly. When the event occurs, the GlideTimeline will send a request to the server and process the event as handled inside the strScriptIncludeName class.
Parameters:
strServerEvent - String that specifies one of the following case-sensitive events:
  • getItems
  • elementMoveX
  • elementMoveY
  • elementMoveXY
  • elementSuccessor
  • elementTimeAdjustStart
  • elementTimeAdjustEnd
  • inputBox
  • itemMove
strScriptIncludeName - String that specifies the name of the class to receive the strServerEvent. This class should must be defined in a script include that extends AbstractTimelineSchedulePage.
Example:
<source lang="JavaScript">

glideTimeline.registerEvent("getItems", "TimelineGanttSchedulePage"); </source>

snapVertScrollingIntoRows

public void snapVertScrollingIntoRows(Boolean b)

Specifies whether or not the vertical movement of timeline span objects (if appropriately registered to perform this event) should snap adjust into the closest row. By default this value is enabled.
Parameters:
b - Boolean variable that will snap vertical movement into rows if set true; otherwise, items will move exactly with respect to the mouse.
Example:
<source lang="JavaScript">

glideTimeline.snapVertScrollingIntoRows(false); </source>

showGridLines

public void showGridLines(Boolean boolShowGridLines)

Specifies whether or not to show grid lines for each row of data on the timeline. By default, grid lines are enabled.
Parameters:
boolShowGridLines - Boolean variable that will show grid lines if set true; otherwise, grid lines will not be displayed.
Example:
<source lang="JavaScript">

glideTimeline.showGridLines(false); // Disables grid lines. </source>

setAutoRefresh

public void setAutoRefresh(Number intSeconds)

Specifies the number of seconds to wait before performing an auto refresh of the data on the timeline. Setting the number of seconds to 0 will turn auto refresh off. By default, auto refresh is disabled. Note that if intSeconds is greater than 0 and less than the minimum allowed time in seconds (10), it will be set to 10 seconds.
Parameters:
intSeconds - Integer that specifies time in seconds between auto-refreshing.
Example:
<source lang="JavaScript">

glideTimeline.setAutoRefresh(15); // Sets the interval for auto-refreshing to 15 seconds. </source>

Script Include / Class AbstractTimelineSchedulePage

The processing of all data displayed within a timeline is performed first by utilizing the corresponding function of the specified script include. Like other script includes, the language syntax is JavaScript and follows the default security constraints of this type of resource. However, in order to deal with the complexity of the different types of display options a helper class was created. The AbstractTimelineSchedulePage is an abstract class that must be extended and paired with it's corresponding schedule page to display a timeline. At a minimum, extending classes should override the getItems() method as this is the primary event handler for returning items to be displayed on the client.

The AbstractTimelineSchedulePage returns data to the client that is processed in two phases. The first phase processes the data making actual updates to the timeline. Immediately after (if configured) the second phase will display a success message box, error message box, or dialog message prompt. The available options in phase one for manipulating data include:

  1. Do Not Update Any Items - This is the default behavior. Do not perform any of the remaining steps in phase one.
  2. Update With Specific Items - This is done using: add().
  3. Render The Timeline Using the getItems() Function - This is done using: setDoReRenderTimeline(true).
Note
Note: If both TimelineItems are returned and setDoReRenderTimeline is set to true, the system will ignore the setDoReRenderTimeline property and explicitly show only the TimelineItems that were added via the add() function.

The available options in phase two, which control optional message boxes after phase one is complete include:

  1. Do Not Display Any Message Boxes - This is the default behavior.
  2. Display a Success Dialog Box - This is done using: setStatusSuccess().
  3. Display an Error Dialog Box - This is done using: setStatusError().
  4. Display a Dialog Confirm Box - This is done using: setStatusPrompt().

For each dialog function, see the corresponding API below for proper implementation.

Note
Note: A script include class that extends AbstractTimelineSchedulePage will automatically receive all Uri parameters from the original Url whose prefix begins with "sysparm_timeline_". To access the values of these, use: this.getParameter("sysparm_timeline_VARIABLE"); inside your extended class. This is useful if you need to display a schedule page from a dynamic element, such as from a context menu from a list. By passing in dynamic data via the Url the schedule page will auto-include these parameters inside the Ajax calls and therefore will be accessible inside the AbstractTimelineSchedulePage script includes.


Method Summary
The following methods exist to facilitate data manipulation when extending the event handling methods in the following section.
Return Value Details
void add(TimelineItem objItem)
Adds a TimelineItem object that will be returned to the client and appropriately displayed on the timeline.
void addSeparator()
Adds a horizontal frame separator into the list of timeline items. All future items added via add() will be added into the subsequent timeline frame.
void setPageTitle(String strTitle)
Specifies the text to display as the title of the timeline. The page title can be set (and updated) from any interactive event; however, is recommended to be set during the getItems() event.
void setDoReRenderTimeline(Boolean b)
Specifies whether or not to re-render all of the timeline items using the getItems() function.
void setStatusError(String strTitle, String strMessage)
Denotes the current event request with an error status that will display a dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing.
void setStatusSuccess(String strTitle, String strMessage)
Denotes the current event request with a success status that will display a dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing.
void setStatusPrompt(String strTitle, String strMessage, String strOkFunction, String strCancelFunction, String strCloseFunction)
Denotes the current event request with a prompt status that will display a confirmation dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing. The confirmation box displays an "OK" and "Cancel" button that each generate new events that will call the specified functions as denoted in the parameter arguments. Note that the custom defined functions for the OK, Cancel, and Close will receive the same parameter arguments as those for the current event.


Abstract Event Handler Methods
The following methods correspond with the specified event thrown from the schedule page.
Return Value Details
void getItems()
Event handler for returning schedule items to display on the timeline.
void elementMoveX(String spanSysId, String newStartDateTimeMs)
Event handler for when a timeline span moves horizontally.
void elementMoveY(String spanSysId, String itemSysId, String newItemSysId)
Event handler for when a timeline span moves vertically.
void elementMoveXY(String spanSysId, String itemSysId, String newItemSysId, String newStartDateTimeMs)
Event handler for when a timeline span moves both horizontally and vertically.
void elementSuccessor(sstring spanSysId, String newSuccSpanId)
Event handler for when a timeline relationship has been created between two spans.
void elementTimeAdjustStart(String spanSysId, String newStartDateTimeMs)
Event handler for when a timeline span's start date was modified.
void elementTimeAdjustEnd(String spanSysId, String newStartDateTimeMs)
Event handler for when a timeline span's end date was modified.
void inputBox(String strInputText)
Event handler for when a string was typed into the left pane input box.
void itemMove(String itemSysId, String newItemSysId)
Event handler for when a timeline row item was moved and dragged into another row item.


add

public void add(GlideTimelineItem objItem)

Adds a GlideTimelineItem object that will be returned to the client and appropriately displayed on the timeline.
Parameters:
objItem - The GlideTimelineItem object to add to the timeline.

addSeparator

public void addSeparator()

Adds a horizontal frame separator into the list of timeline items. All future items added via add() will be added into the subsequent timeline frame.
Example:
<source lang="JavaScript">

// Inside of a script include that extends AbstractTimelineSchedulePage this.addSeparator(); </source>

setPageTitle

public void setPageTitle(String strTitle)

Specifies the text to display as the title of the timeline. The page title can be set (and updated) from any interactive event; however, is recommended to be set during the getItems() event.
Parameters:
strTitle - String that specifies the text to be displayed on the title of the timeline.

setDoReRenderTimeline

public void setDoReRenderTimeline(Boolean b)

Specifies whether or not to re-render all of the timeline items using the getItems() function.
Parameters:
b - Boolean variable that will re-render the timeline by making a new event call to the server's getItems() handler if set true.

setStatusError

public void setStatusError(String strTitle, String strMessage)

Denotes the current event request with an error status that will display a dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing.
Parameters:
strTitle - String that specifies the text to be displayed in the dialog box title.
strMessage - String that specifies the text to be displayed within the dialog box. The text can contain HTML formatting.

setStatusSuccess

public void setStatusSuccess(String strTitle, String strMessage)

Denotes the current event request with a success status that will display a dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing.
Parameters:
strTitle - String that specifies the text to be displayed in the dialog box title.
strMessage - String that specifies the text to be displayed within the dialog box. The text can contain HTML formatting.

setStatusPrompt

public void setStatusPrompt(String strTitle, String strMessage, String strOkFunction, String strCancelFunction, String strCloseFunction)

Denotes the current event request with a prompt status that will display a confirmation dialog box with the specified title and message immediately in phase two of the GlideTimeline event processing. The confirmation box displays an "OK" and "Cancel" button that each generate new events that will call the specified functions as denoted in the parameter arguments. Note that the custom defined functions for the OK, Cancel, and Close will receive the same parameter arguments as those for the current event.
Parameters:
strTitle - String that specifies the text to be displayed in the dialog box title.
strMessage - String that specifies the text to be displayed within the dialog box. The text can contain HTML formatting.
strOkFunction - String that specifies the name of the function to call in the current script include class if the "OK" button is clicked.
strCancelFunction - String that specifies the name of the function to call in the current script include class if the "Cancel" button is clicked.
strCloseFunction - String that specifies the name of the function to call in the current script include class if the "Close" button is clicked.
Example:
<source lang="JavaScript">

var MyTimelineScriptIncludeClass = Class.create(); MyTimelineScriptIncludeClass.prototype = Object.extendsObject(AbstractTimelineSchedulePage, {

 getItems: function() {
   //...
 },

 elementTimeAdjustEnd: function(spanSysId, newEndDateTimeMs) {
   // Display a status prompt dialog box
   this.setStatusPrompt('Confirm Action', 'Are you sure you want to do that?',
                        'this._myOkHandlerFunction',  
                        'this._myCancelHandlerFunction',
                        'this._myCloseHandlerFunction');
 },
 _myOkHandlerFunction: function(spanSysId, newEndDateTimeMs) { // ... },
 _myCancelHandlerFunction: function(spanSysId, newEndDateTimeMs) { // ... },
 _myCloseHandlerFunction: function(spanSysId, newEndDateTimeMs) { // ... }

}; </source>

getItems

public void getItems()

Event handler for returning schedule items to display on the timeline.

elementMoveX

public void elementMoveX(String spanSysId, String newStartDateTimeMs)

Event handler for when a timeline span moves horizontally.
Parameters:
spanSysId - String that specifies the sys ID of the current span that is being adjusted.
newStartDateTimeMs - String that specifies the new start time of the span in milliseconds. Make sure to parse the string using parseInt() prior to performing any numerical comparisons.

elementMoveY

public void elementMoveY(String spanSysId, String itemSysId, String newItemSysId)

Event handler for when a timeline span moves vertically.
Parameters:
spanSysId - String that specifies the sys ID of the current span that is being adjusted.
itemSysId - String that specifies the sys ID of the timeline item associated with the current span.
newItemSysId - String that specifies the sys ID of the timeline item (a row) that the current span was dragged into.

elementMoveXY

public void elementMoveXY(String spanSysId, String itemSysId, String newItemSysId, String newStartDateTimeMs)

Event handler for when a timeline span moves both horizontally and vertically.
Parameters:
spanSysId - String that specifies the sys ID of the current span that is being adjusted.
itemSysId - String that specifies the sys ID of the timeline item associated with the current span.
newItemSysId - String that specifies the sys ID of the timeline item (a row) that the current span was dragged into.
newStartDateTimeMs - String that specifies the new start time of the span in milliseconds. Make sure to parse the string using parseInt() prior to performing any numerical comparisons.

elementSuccessor

public void elementSuccessor(String spanSysId, String newSuccSpanId)

Event handler for when a timeline relationship has been created between two spans.
Parameters:
spanSysId - String that specifies the sys ID of the current span which will be a predecessor for the newly created relationship.
newSuccSpanId - String that specifies the sys ID of the successor span from the relationship created.

elementTimeAdjustStart

public void elementTimeAdjustStart(String spanSysId, String newStartDateTimeMs)

Event handler for when a timeline span's start date was modified.
Parameters:
spanSysId - String that specifies the sys ID of the current span that is being adjusted.
newStartDateTimeMs - String that specifies the new start time of the span in milliseconds. Make sure to parse the string using parseInt() prior to performing any numerical comparisons.

elementTimeAdjustEnd

public void elementTimeAdjustEnd(String spanSysId, String newStartDateTimeMs)

Event handler for when a timeline span's end date was modified.
Parameters:
spanSysId - String that specifies the sys ID of the current span that is being adjusted.
newStartDateTimeMs - String that specifies the new start time of the span in milliseconds. Make sure to parse the string using parseInt() prior to performing any numerical comparisons.

inputBox

public void inputBox(String strInputText)

Event handler for when a string was typed into the left pane input box.
Parameters:
strInputText - String that specifies the text that was entered in the input box in the left pane

itemMove

public void itemMove(String itemSysId, String newItemSysId)

Event handler for when a timeline row item was moved and dragged into another row item.
Parameters:
itemSysId - String that specifies the sys ID of the timeline item associated with the current span.
newItemSysId - String that specifies the sys ID of the timeline item (a row) that the current span was dragged into.

Class GlideTimelineItem

This class extends the abstract ScheduleItem class to define additional properties that are specific to the timeline. A timeline item is essentially any item that is displayed in a singular row across the timeline. A GlideTimelineItem may exist where it has zero or more spans (TimelineSpan objects) associated with it.

See Also:

TimelineSpan
Constructor Summary
Return Value Details
GlideTimelineItem GlideTimelineItem(String sys_id)
Non-default constructor that allows a "dummy" GlideTimelineItem to be created. Useful for creating rows that do not allow any YMoving into; however, contain nested children. (e.g. The top-level "Users" row in the Group Resource Timeline). The sys_id needs to be unique for DOM level functions to parse correctly.
GlideTimelineItem GlideTimelineItem(String table, String sys_id)
Constructor that sets the required table and sys_id properties. The rest of this object's properties should be set from the caller appropriately.


Method Summary
Return Value Details
TimelineSpan createTimelineSpan(String tableName)
Creates a new TimelineSpan object associated with the current instance object. If no other TimelineSpan objects exist, the newly created object will share the same sys_id as current instance object. Otherwise, a randomly generated GUID will be used.
TimelineSpan createTimelineSpan(String tableName, String sysId)
Creates a new TimelineSpan object associated with the current instance object using the specified table and sysId.
String getImage()
Returns a string specifying the name of the image file associated with the current image. If no image is associated with the current image, an empty string ("") is returned.
Boolean getIsDroppable()
Returns a boolean that specifies whether or not the current instance object should be allowed as a "drop zone" when moving timeline elements vertically.
String getLeftLabelText()
Returns a string that specifies the text to display in the left pane (if enabled).
String getParent()
Returns the unique sysId of the current TimelineItem's parent object. If the parent does not exist, this will return an empty string ("").
ArrayList getTimelineSpans()
Returns all the TimelineSpan objects associated with the current instance in an ArrayList.
Boolean isTextBold()
Returns a boolean that specifies if the left pane text should be displayed using a bold style.
void setImage(String strImageName)
Specifies the name of the image file (including it's path) to use as the icon for the item in the left pane.
void setIsDraggable(Boolean b)
Specifies whether or not the current instance object can be clicked and dragged into another Timeline Item.
void setIsDroppable(Boolean b)
Specifies whether or not the current instance object should be allowed as a "drop zone" when moving timeline elements vertically.
void setLeftLabelText(String strText)
Specifies the text to display in the left pane for this item.
void setParent(String parentSysId)
Specifies the sys ID of another TimelineItem who is a parent of the current instance.
void setTextBold(Boolean b)
Specifies whether or not to bold the text style of the item in the left pane.


GlideTimelineItem

public GlideTimelineItem(String tableName)

Non-default constructor that allows a "dummy" GlideTimelineItem to be created. Useful for creating rows that do not allow any YMoving into; however, contain nested children. (e.g. The top-level "Users" row in the Group Resource Timeline). The sys_id needs to be unique for DOM level functions to parse correctly. By default this object will not be "droppable" because a table name was not specified.
Parameters:
tableName - String that specifies the name of the table that is associated with current object.

GlideTimelineItem

public GlideTimelineItem(String tableName, String sys_id)

Constructor that sets the required table and sys_id properties. The rest of this object's properties should be set from the caller appropriately. By default, this object instance is "droppable" since a table name was specified.
Parameters:
tableName - String that specifies the name of the table that is associated with current object.
sys_id - String that specifies the sys ID for the object.

createTimelineSpan

public TimelineSpan createTimelineSpan(String tableName)

Creates a new TimelineSpan object associated with the current instance object. If no other TimelineSpan objects exist, the newly created object will share the same sys_id as current instance object. Otherwise, a randomly generated GUID will be used.
Parameters:
tableName - String that specifies the name of the table that is associated with current object.
Returns:
TimelineSpan - The newly created span object instance.

createTimelineSpan

public TimelineSpan createTimelineSpan(String tableName, String sysId)

Creates a new TimelineSpan object associated with the current instance object using the specified table and sysId.
Parameters:
tableName - String that specifies the name of the table that is associated with current object.
sys_id - String that specifies the sys ID for the object.
Returns:
TimelineSpan - The newly created span object instance.

getImage

public String getImage()

Returns a string specifying the name of the image file associated with the current image. If no image is associated with the current image, an empty string ("") is returned.
Returns:
String - The String name of the image file and path if specified; otherwise "".

getIsDroppable

public Boolean getIsDroppable()

Returns a boolean that specifies whether or not the current instance object should be allowed as a "drop zone" when moving timeline elements vertically.
Returns:
Boolean - true if droppable; false otherwise.

getLeftLabelText

public String getLeftLabelText()

Returns a string that specifies the text to display in the left pane (if enabled).
Returns:
String - The String value of the left label text if specified; otherwise "".

getParent

public String getParent()

Returns the unique sysId of the current TimelineItem's parent object. If the parent does not exist, this will return an empty string ("").
Returns:
String - The String that specifies the parent TimelineItem of the current instance if specified; otherwise "".

getTimelineSpans

public ArrayList getTimelineSpans()

Returns all the TimelineSpan objects associated with the current instance in an ArrayList.
Returns:
ArrayList - The list of TimelineSpan objects associated with the current instance.

isTextBold

public Boolean isTextBold()

Returns a boolean that specifies if the left pane text should be displayed using a bold style.
Returns:
Boolean - true if the text should be bolded; otherwise false.

setImage

public void setImage(String strImageName)

Specifies the name of the image file (including it's path) to use as the icon for the item in the left pane.
Parameters:
strImageName - The name of the image including it's path.

setIsDraggable

public void setIsDraggable(Boolean b)

Specifies whether or not the current instance object can be clicked and dragged into another Timeline Item.
Parameters:
b - true if the item can be clicked and moved; otherwise, false.

setIsDroppable

public void setIsDroppable(Boolean b)

Specifies the name of the image file (including it's path) to use as the icon for the item in the left pane.
Parameters:
b - true if the item should be marked as "droppable"; otherwise, false.

setLeftLabelText

public void setLeftLabelText(String strText)

Specifies the text to display in the left pane for this item.
Parameters:
strText - The text to display in the left pane for this item.

setParent

public void setParent(String parentSysId)

Specifies the sys ID of another TimelineItem who is a parent of the current instance.
Parameters:
parentSysId - Parent TimelineItem sys Id.

setTextBold

public void setTextBold(Boolean b)

Specifies whether or not to bold the text style of the item in the left pane.
Parameters:
b - true if the style of the left pane item text should be bold; otherwise false.

Class TimelineSpan

This class defines a set of properties that describe the characteristics and interactive behavior of an element rendered within a GlideTimelineItem. Since it is important for all of a GlideTimelineItem's collection of spans to be unique, the creation of a new instance should be performed via the createTimelineItem method of an existing GlideTimelineItem instance.

See Also:

GlideTimelineItem
Method Summary
Return Value Details
void addPredecessor(Object[] objArray)
Adds multiple relationships between the current instance and other TimelineSpan objects by enumerating through the array of JavaScript objects. Each object should have an internal property "relationship_sys_id" and "predecessor_sys_id" specified.
void addPredecessor(String strPredecessorSysId, String strRelationshipSysId)
Adds the specified relationship between the current instance and another TimelineSpan with sys ID strPredecessorSysId. The drawn line will not have any double click handlers associated with it.
void addPredecessor(String strPredecessorSysId, String strRelationshipSysId, String strTableName)
Adds the specified relationship between the current instance and another TimelineSpan with sys ID strPredecessorSysId and allow the relationship to open a GlideWindow to display information about the relationship.
Boolean getAllowXDragLeft()
Returns the boolean value of the AllowXDragLeft property.
Boolean getAllowXDragRight()
Returns the boolean value of the AllowXDragRight property.
Boolean getAllowXMove()
Returns the boolean value of the AllowXMove property.
Boolean getAllowYMove()
Returns the boolean value of the AllowYMove property.
Boolean getAllowYMovePredecessor()
Returns the boolean value of the AllowYMovePredecessor property.
Number getEndTimeMs()
Returns the start time in milliseconds of the current instance object as a long Number.
String getInnerSegmentClass()
Returns a String that specifies the current inner segment class for the Timeline Span.
Number getInnerSegmentEndTimeMs()
Returns the time in milliseconds of the end time of the inner segment portion of the timeline span as a long Number.
Number getInnerSegmentStartTimeMs()
Returns the time in milliseconds of the start time of the inner segment portion of the timeline span as a long Number.
Boolean getIsChanged()
Returns a boolean that specifies whether or not the current timeline item has been modified after initialization.
String getPointIconClass()
Returns a String that specifies the name of the icon class to use for displaying the element on the timeline if the current instance has zero duration.
ArrayList getPredecessors()
Returns an ArrayList of all the predecessor objects associated with the current instance. Each ArrayList object is a HashMap that contains a predecessor_sys_id and relationship_sys_id property.
String getSpanColor()
Returns the string name of the color specified for displaying this span.
String getSpanText()
Returns the string that specifies the text to display adjacent to the time element. Note that this text will only be displayed if the GlideTimeline object has enabled timeline text via glideTimeline.showTimelineText(true).
Number getStartTimeMs()
Returns the start time in milliseconds of the current instance object as a long Number.
String getSysId()
Returns the sys ID of the current object. This method is useful for returning the sys Id when the current object instance was created without a specific sys Id to obtain the dynamically generated GUID.
String getTable()
Returns the string name of the table where the sys ID is referenced.
String getTooltip()
Returns the string that specifies the text/html to display in the tooltip when the TimeSpan element is being hovered over.
void setAllowXDragLeft(Boolean b)
Sets a flag that determines whether the element's start date can be dragged left or right therefore adjusting the duration of the task. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
void setAllowXDragRight(Boolean b)
Sets a flag that determines whether the element's end date can be dragged left or right therefore adjusting the duration of the task. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
void setAllowXMove(Boolean b)
Sets a flag that determines whether the element can be moved to start at a different time. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
void setAllowYMove(Boolean b)
Sets a flag that determines whether the element can be dragged vertically on the timeline. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
void setAllowYMovePredecessor(Boolean b)
Sets a flag that determines whether a dashed relationship line can be drawn from this element interactively on the timeline. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
void setInnerSegmentClass(String s)
Specifies the name of the class to use for stylizing the inner segment if it exists.
void setInnerSegmentTimeSpan(String startTimeMs, String endTimeMs)
Creates an inner segment to show within the current timespan defined by the range specified.
void setInnerSegmentTimeSpan(Number startTimeMs, Number endTimeMs)
Creates an inner segment to show within the current timespan defined by the range specified.
void setIsChanged(Boolean b)
Sets a flag that specifies whether or not the current timeline item has been modified after initialization. The default value for this property is false.
void setPointIconClass(String s)
Sets the icon class to use for displaying the current element on the timeline if the current instance has zero duration. Note that this only affects the current TimelineSpan object and will take precedence over the defaultPointIconClass specified by the GlideTimeline.
void setSpanColor(String s)
Sets the color for displaying this span. This needs to be a valid HTML color entity specified by a named color or a hexadecimal color code.
void setSpanText(String s)
Sets the text to display adjacent to the time element. Note that this text will only be displayed if the GlideTimeline object has enabled timeline text via glideTimeline.showTimelineText(true).
void setTimeSpan(long startTimeMs, long endTimeMs)
Sets the start and end dates for the current span.
void setTimeSpan(String startTimeMs, String endTimeMs)
Sets the start and end dates for the current span.
void setTooltip(String s)
Sets the text to display in the tooltip when the TimeSpan element is being hovered over.
Note
Note: You can specify valid HTML in the string that sets the tooltip.


addPredecessor

public void addPredecessor(Object[] objArray)

Adds multiple relationships between the current instance and other TimelineSpan objects by enumerating through the array of JavaScript objects. Each object should have an internal property "relationship_sys_id" and "predecessor_sys_id" specified.
Parameters:
objArray - JavaScript object array that contains two internal properties: relationship_sys_id and predecessor_sys_id.

addPredecessor

public void addPredecessor(String strPredecessorSysId, String strRelationshipSysId)

Adds the specified relationship between the current instance and another TimelineSpan with sys ID strPredecessorSysId. The drawn line will not have any double click handlers associated with it.
Parameters:
strPredecessorSysId - String that specifies the sys ID of the planned task that is the predecessor of the relationship.
strRelationshipSysId - String that specifies the sys ID of the relationship of the relationship.

addPredecessor

public void addPredecessor(String strPredecessorSysId, String strRelationshipSysId, String strTableName)

Adds the specified relationship between the current instance and another TimelineSpan with sys ID strPredecessorSysId and allow the relationship to open a GlideWindow to display information about the relationship.
Parameters:
strPredecessorSysId - String that specifies the sys ID of the planned task that is the predecessor of the relationship.
strRelationshipSysId - String that specifies the sys ID of the relationship of the relationship.
strTableName - String that specifies the name of the table for the relationship.

getAllowXDragLeft

public Boolean getAllowXDragLeft()

Returns the boolean value of the AllowXDragLeft property.
Returns:
Boolean - true if the object's start time can be adjusted; false otherwise.

getAllowXDragRight

public Boolean getAllowXDragRight()

Returns the boolean value of the AllowXDragRight property.
Returns:
Boolean - true if the object's end time can be adjusted; false otherwise.

getAllowXMove

public Boolean getAllowXMove()

Returns the boolean value of the AllowXMove property.
Returns:
Boolean - true if the object can be moved; false otherwise.

getAllowYMove

public Boolean getAllowYMove()

Returns the boolean value of the AllowYMove property.
Returns:
Boolean - true if the object can be moved vertically; false otherwise.

getAllowYMovePredecessor

public Boolean getAllowYMovePredecessor()

Returns the boolean value of the AllowYMovePredecessor property.
Returns:
Boolean - true if the a dashed relationship line can be drawn from the current object to a new successor; false otherwise.

getEndTimeMs

public Number getEndTimeMs()

Returns the start time in milliseconds of the current instance object as a long Number.
Returns:
Number - The end time of the timeline span in milliseconds.

getInnerSegmentClass

public String getInnerSegmentClass()

Returns a String that specifies the current inner segment class for the Timeline Span.
Returns:
String - The String name of the class for the current inner segment style.

getInnerSegmentEndTimeMs

public Number getInnerSegmentEndTimeMs()

Returns the time in milliseconds of the end time of the inner segment portion of the timeline span as a long Number.
Returns:
Number - The end time of the timeline span inner segment portion in milliseconds.

getInnerSegmentStartTimeMs

public Number getInnerSegmentStartTimeMs()

Returns the time in milliseconds of the start time of the inner segment portion of the timeline span as a long Number.
Returns:
Number - The start time of the timeline span inner segment portion in milliseconds.

getIsChanged

public Boolean getIsChanged()

Returns a boolean that specifies whether or not the current timeline item has been modified after initialization.
Returns:
Boolean - true if the current span has been marked as changed; otherwise false.

getPointIconClass

public String getPointIconClass()

Returns a String that specifies the name of the icon class to use for displaying the element on the timeline if the current instance has zero duration.
Returns:
String - The name of the icon class to use for displaying the current TimelineSpan if the duration is zero.

getPredecessors

public ArrayList getPredecessors()

Returns an ArrayList of all the predecessor objects associated with the current instance. Each ArrayList object is a HashMap that contains a predecessor_sys_id and relationship_sys_id property.
Returns:
ArrayList - List of HashMap's that contain two internal properties: predecessor_sys_id and relationship_sys_id.

getSpanColor

public String getSpanColor()

Returns the string name of the color specified for displaying this span.
Returns:
String - String that specifies the HTML color name to use as the background color for the element.

getSpanText

public String getSpanText()

Returns the string that specifies the text to display adjacent to the time element.
Note
Note: Note that this text will only be displayed if the GlideTimeline object has enabled timeline text via glideTimeline.showTimelineText(true).
Returns:
String - String value that contains the text to display adjacent to the element.

getStartTimeMs

public Number getStartTimeMs()

Returns the start time in milliseconds of the current instance object as a long Number.
Returns:
Number - String that specifies the start time of the element in miliseconds.

getSysId

public String getSysId()

Returns the sys ID of the current object. This method is useful for returning the sys Id when the current object instance was created without a specific sys Id to obtain the dynamically generated GUID.
Returns:
String - String that specifies the unique system ID of the current element.

getTable

public String getTable()

Returns the string name of the table where the sys ID is referenced.
Returns:
String - String that specifies the table name.

getTooltip

public String getTooltip()

Returns the string that specifies the text/html to display in the tooltip when the TimeSpan element is being hovered over.
Returns:
String - String that specifies the tooltip text.

setAllowXDragLeft

public void setAllowXDragLeft(Boolean b)

Sets a flag that determines whether the element's start date can be dragged left or right therefore adjusting the duration of the task. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
Parameters:
b - true if the element's start date can be adjusted; false otherwise.

setAllowXDragRight

public void setAllowXDragRight(Boolean b)

Sets a flag that determines whether the element's end date can be dragged left or right therefore adjusting the duration of the task. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
Parameters:
b - true if the element's end date can be adjusted; false otherwise.

setAllowXMove

public void setAllowXMove(Boolean b)

Sets a flag that determines whether the element can be moved to start at a different time. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
Parameters:
b - true if the element can be moved horizontally; false otherwise.

setAllowYMove

public void setAllowYMove(Boolean b)

Sets a flag that determines whether the element can be dragged vertically on the timeline. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
Parameters:
b - true if the element can be moved vertically; false otherwise.

setAllowYMovePredecessor

public void setAllowYMovePredecessor(Boolean b)

Sets a flag that determines whether a dashed relationship line can be drawn from this element interactively on the timeline. The effect of this behavior is controlled by the script include that handles the appropriate event. The default value for this property is false.
Parameters:
b - true if a relationship line can be drawn from this element; false otherwise.

setInnerSegmentClass

public void setInnerSegmentClass(String s)

Specifies the name of the class to use for stylizing the inner segment if it exists. The default value is green.
Parameters:
s - String that specifies one of the following values:
  • green TimelineInnerSegment Green.png
  • blue TimelineInnerSegment Blue.png
  • silver TimelineInnerSegment Silver.png

setInnerSegmentTimeSpan

public void setInnerSegmentTimeSpan(String startTimeMs, String endTimeMs)

Creates an inner segment to show within the current timespan defined by the range specified.
Parameters:
startTimeMs - String that specifies the start time in milliseconds.
endTimeMs - String that specifies the end time in milliseconds.

setInnerSegmentTimeSpan

public void setInnerSegmentTimeSpan(Number startTimeMs, Number endTimeMs)

Creates an inner segment to show within the current timespan defined by the range specified.
Parameters:
startTimeMs - Number that specifies the start time in milliseconds.
endTimeMs - Number that specifies the end time in milliseconds.

setIsChanged

public void setIsChanged(Boolean b)

Sets a flag that specifies whether or not the current timeline item has been modified after initialization. The default value for this property is false.
Parameters:
b - true if the current element is marked as changed; false otherwise.

setPointIconClass

public void setPointIconClass(String s)

Sets the icon class to use for displaying the current element on the timeline if the current instance has zero duration. Note that this only affects the current TimelineSpan object and will take precedence over the defaultPointIconClass specified by the GlideTimeline.
Parameters:
s - String that specifies one of the following values:
  • milestone Timeline milestone.gif
  • blue_square Timeline blue square.gif
  • sepia_square Timeline sepia square.gif
  • green_square Timeline green square.gif
  • red_square Timeline red square.gif
  • black_square Timeline black square.gif
  • blue_circle Timeline blue circle.gif
  • sepia_circle Timeline sepia circle.gif
  • green_circle Timeline green circle.gif
  • red_circle Timeline red circle.gif
  • black_circle Timeline black circle.gif

setSpanColor

public void setSpanColor(String s)

Sets a flag that specifies whether or not the current timeline item has been modified after initialization. The default value for this property is false.
Parameters:
s - String that specifies the HTML color code.

setSpanText

public void setSpanText(String s)

Sets the text to display adjacent to the time element. Note that this text will only be displayed if the GlideTimeline object has enabled timeline text via glideTimeline.showTimelineText(true).
Parameters:
s - String that specifies the description text.

setTimeSpan

public void setTimeSpan(long startTimeMs, long endTimeMs)

Sets the start and end dates for the current span.
Parameters:
startTimeMs - A number that specifies the start time in milliseconds.
endTimeMs - A number that specifies the end time in milliseconds.

setTimeSpan

public void setTimeSpan(String startTimeMs, String endTimeMs)

Sets the start and end dates for the current span.
Parameters:
startTimeMs - A string that specifies the start time in milliseconds.
endTimeMs - A string that specifies the end time in milliseconds.

setTooltip

public void setTooltip(String s)

Sets the text to display in the tooltip when the TimeSpan element is being hovered over.
Note
Note: You can specify valid HTML in the string that sets the tooltip.
Parameters:
s - A string that specifies the tooltip text.

Example

The following example demonstrates how to create a timeline schedule page with corresponding script include utilizing a majority of the API described above. For this example we are going to create an Incident Summary Timeline for a project support manager to visualize all of the new incidents. All new incidents should be displayed as single points where the priority of the incident is distinguished by a different point icon. Additionally, all closed incidents should be displayed on the timeline in a separate group that shows the duration of the incident before it was closed. Since the Project Manager wants to be able to easily close new items that are resolved without using any form lists, we will handle the vertical move event allowing the new incidents to be dragged into the closed incident group or items within.

Schedule Page

Create a new Schedule Page with the following properties:

  • Name: Hardware Incidents
  • Schedule type: incident_timeline
  • View Type: Timeline
  • Client Script:

<source lang="JavaScript"> // Set our page configuration glideTimeline.setReadOnly(false); glideTimeline.showLeftPane(true); glideTimeline.showLeftPaneAsTree(true); glideTimeline.showTimelineText(true); glideTimeline.showDependencyLines(false); glideTimeline.groupByParent(true); glideTimeline.setDefaultPointIconClass('milestone');

// We will define what items to display and provide a custom event handler for moving new items to the closed state glideTimeline.registerEvent('getItems', 'IncidentTimelineScriptInclude'); glideTimeline.registerEvent('elementMoveY', 'IncidentTimelineScriptInclude'); </source>

Script Include

Now that the schedule page has been created we need to generate a matching script include for the events that were registered. Create a new script include with the following properties:

  • Name: IncidentTimelineScriptInclude
  • Active: Checked
  • Client callable: Checked
  • Script:

<source lang="JavaScript"> // Class Imports

var IncidentTimelineScriptInclude = Class.create(); IncidentTimelineScriptInclude.prototype = Object.extendsObject(AbstractTimelineSchedulePage, {

 //////////////////////////////////////////////////////////////////////////////////////////////////
 // GET_ITEMS
 //////////////////////////////////////////////////////////////////////////////////////////////////
 getItems: function() {
   // Specify the page title
   this.setPageTitle('My Custom Incident Summary Timeline');
   var groupNew = new GlideTimelineItem('new');
   groupNew.setLeftLabelText('New Incidents');
   groupNew.setImage('../images/icons/all.gifx');
   groupNew.setTextBold(true);
   this.add(groupNew);
   var groupClosed = new GlideTimelineItem('closed');
   groupClosed.setLeftLabelText('Closed Incidents');
   groupClosed.setImage('../images/icons/all.gifx');
   groupClosed.setTextBold(true);
   groupClosed.setIsDroppable(true); // This allows us to drag an open incident onto the closed group row.
   this.add(groupClosed);
   // Get all the incidents and let's add only the new/closed ones appropriately
   var gr = new GlideRecord('incident');
   gr.query();
   while (gr.next()) {
     // Only loop through new/closed incidents
     if (gr.incident_state != '1' && gr.incident_state != '7')
       continue;
     // Ok, we have a new/closed incident. Create the item and the span first.
     var item = new GlideTimelineItem(gr.getTableName(), gr.sys_id);
     var span = item.createTimelineSpan(gr.getTableName(), gr.sys_id);
     // Specific properties for a new incident
     if (gr.incident_state == '1') { // New
       item.setParent(groupNew.getSysId());
       item.setImage('../images/icons/open.gifx');
       span.setTimeSpan(gr.getElement('opened_at').getGlideObject().getNumericValue(),
                        gr.getElement('opened_at').getGlideObject().getNumericValue());
      
       // We'll show different colors based upon the priorities only for new incidents
       switch (gr.getElement('priority').toString()) {
         case '1': 
           span.setPointIconClass('red_circle');
           break;
         case '2':
           span.setPointIconClass('red_square');
           break;
         case '3': 
           span.setPointIconClass('blue_circle');
           break;          
         case '4':
           span.setPointIconClass('blue_square');
           break;
         case '5':
           span.setPointIconClass('sepia_circle');
           break;
         default: // Otherwise, the default point icon class will be used (Milestone)   
       }
     // Specific properties for a closed incident
     } else if (gr.incident_state == '7') { 
       item.setParent(groupClosed.getSysId());
       item.setImage('../images/icons/closed.gifx');
       span.setTimeSpan(gr.getElement('opened_at').getGlideObject().getNumericValue(),
                        gr.getElement('closed_at').getGlideObject().getNumericValue());
     }
    
     // Common item properties
     item.setLeftLabelText(gr.short_description);
     // Common span properties
     span.setSpanText(gr.short_description);
     span.setTooltip('' + GlideStringUtil.escapeHTML(gr.short_description) + '
' + gr.number); span.setAllowXMove(false); span.setAllowYMove(gr.canWrite() ? true : false); span.setAllowYMovePredecessor(false); span.setAllowXDragLeft(false); span.setAllowXDragRight(false); // Now we add the actual item this.add(item); } },


 //////////////////////////////////////////////////////////////////////////////////////////////////
 // ELEMENT_MOVE_Y
 //////////////////////////////////////////////////////////////////////////////////////////////////
 /**
  * This is one of the AbstractTimelineSchedulePage event handler methods that corresponds to a vertical
  * move. The arguments for this function are defined in the API section of the event handler methods.
  */
 elementMoveY: function(spanId, itemId, newItemId) {
   // Get information about the current incident
   var gr = new GlideRecord('incident');
   gr.addQuery('sys_id', spanId);
   gr.query();
   if (!gr.next())
     return this.setStatusError('Error', 'Unable to lookup the current incident.');
   // Only allow the new incidents to have their state adjusted.
   if (gr.incident_state != '1')
     return this.setStatusError('Error', 'Only new incidents can have their state adjusted.');
   // Get information about the dropped TimelineItem. If it was dropped in an item on the "New Incidents"
   // group let's do nothing. If it was dropped in the "Closed Incidents" then let's adjust the state automatically.
   var grDropped = new GlideRecord('incident');
   grDropped.addQuery('sys_id', newItemId);
   grDropped.query();
   if (!grDropped.next() || grDropped.incident_state == '7') {
     // This means the dropped item was either the 'Closed Incidents' group (which has no record or sys_id) or an
     // existing incident that is closed. The 'New Incidents' also has no sys_id; however, the default behavior for
     // items without a sysId is to be non-droppable. This is why we explicitly denoted the 'Closed Incidents' to 
     // be marked as "droppable".
     // Return a dialog prompt
     this.setStatusPrompt('Confirm', 
       'Are you sure you want to close: ' +
'
' +
         GlideStringUtil.escapeHTML(gr.short_description) + 
'

' + gr.number + '
',
       'this._elementMoveYHandler_DoClose',     // This function is for when the OK button is clicked.
       'this._elementMoveYHandler_DoNothing',   // This function is for when the Cancel button is clicked.
       'this._elementMoveYHandler_DoNothing');  // This function is for when the Close button is clicked.
   }
 },
 _elementMoveYHandler_DoClose: function(spanId, itemId, newItemId) {
   // Notice that this function takes the same function arguments as the original function for which it 
   // is a custom event handler for.
   // Update the database record from 'New' to 'Closed'.
   var gr = new GlideRecord('incident');
   gr.addQuery('sys_id', spanId);
   gr.query();
   gr.next();
   gr.setValue('incident_state', '7');
   gr.update();
   // This will re-render the timeline showing the updated item in the closed group.
   this.setDoReRenderTimeline(true);
   // Let's show a success message
   this.setStatusSuccess('Success', '' + gr.short_description + ' was successfully closed.');
 },
 // Since the user clicked cancel or close we simply do nothing.
 _elementMoveYHandler_DoNothing: function(spanId, itemId, newItemId) {}

}); </source>

Screenshots / Results

  1. Navigate to:
    http://[YOURINSTANCE]:8080/show_schedule_page.do?sysparm_page_schedule_type=incident_timeline
    Notice the bold text is the value of the schedule page Schedule type field.

  2. The page displays a timeline as specified by the schedule page and script include created. A link to this page can be created and placed as a Module or UI Action as necessary.
    TimelineExample-IncidentPreview.png

  3. Attempting to move a closed incident anywhere displays the expected error message.
    TimelineExample-ErrorMoving.png

  4. Moving the incident: I need more memory displays the following confirmation box.
    TimelineExample-ConfirmClose.png

  5. Clicking the Cancel button closes the overlay. Clicking the OK button actually updates the incident_state of the record and then displays the following success box.
    TimelineExample-CloseSuccess.png

  6. After clicking OK, it is clear the incident is now listed in the Closed Incidents group.
    TimelineExample-IncidentUpdated.png
Retrieved from ‘http://old.wiki/index.php?title=Schedule_Pages&oldid=2836