{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":1042,"path":"api-reference/server-api-reference/c_GlideTimelineItemAPI.md","title":"GlideTimelineItem - Global","bundle":null,"doc_type":null,"release":"australia","body":"\n# GlideTimelineItem- Global\n\nThe GlideTimelineItem API extends the abstract ScheduleItem class to define additional properties that are specific to the time line.\n\nA time line item is essentially any item that displays in a singular row across the time line. A GlideTimelineItem has zero or more associated spans \\(TimelineSpan objects\\).\n\n**Parent Topic:**[Server API reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/server-api-reference/api-server.md)\n\n## GlideTimelineItem - GlideTimelineItem\\(String tableName\\)\n\nCreate a \"dummy\" GlideTimelineItem object.\n\nThis is 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.\n\n|Name|Type|Description|\n|----|----|-----------|\n|tableName|String|The name of the table associated with current object.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\n## GlideTimelineItem - GlideTimelineItem\\(String tableName, String sys\\_id\\)\n\nConstructor that sets the required table and **sys\\_id**properties.\n\nThe rest of this object's properties should be set by the caller. By default, this object instance is \"droppable\" since a table name is specified.\n\n|Name|Type|Description|\n|----|----|-----------|\n|tableName|String|The name of the table associated with current object.|\n|sys\\_id|String|The sys ID for the object.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\n## GlideTimelineItem - createTimelineSpan\\(String tableName\\)\n\nCreates a new TimelineSpan object associated with the current instance object.\n\nIf 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.\n\n|Name|Type|Description|\n|----|----|-----------|\n|tableName|String|The name of the table associated with current object.|\n\n|Type|Description|\n|----|-----------|\n|Object|The newly-created span object instance.|\n\n## GlideTimelineItem - createTimelineSpan\\(String tableName, String sys\\_id\\)\n\nCreates a new TimelineSpan object associated with the current instance object using the specified table and sys\\_id.\n\n|Name|Type|Description|\n|----|----|-----------|\n|tableName|String|Name of the table associated with current object|\n|sys\\_id|String|Sys\\_id for the object.|\n\n|Type|Description|\n|----|-----------|\n|Object|Newly-created span object instance.|\n\nThe following example shows how to use createTimelineSpan\\(\\) to create a new TimelineSpan object.\n\n```\nvar project_id=\"741cc7491b6f1c5043de32231b4bcbc5\"; // Project ID \nvar grUser = new GlideRecord('user_resource');\ngrUser.addQuery('planned_task', project_id);\ngrUser.setQueryReferences(true);\ngrUser.orderBy('user.name', 'DESC');\ngrUser.query();\nwhile (grUser.next()) {\n  var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);\n  /* Specify the text to display in the left pane for this item. */\n  item.setLeftLabelText(grUser.user.name); \n  /* Set the name of the image file (including it's path) */\n  item.setImage('../images/icons/user.gifx'); \n  /* Specify whether or not to bold the text style of the item in the left pane. */\n  item.setTextBold(true); \n  /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */\n  item.setIsDraggable(true);\n  /* Create a new TimelineSpan object associated with the current instance object using the specified table and sys_id. */ \n  item.createTimelineSpan(grUser.getTableName(), grUser.getUniqueValue());\n}\n```\n\n## GlideTimelineItem - getImage\\( \\)\n\nReturns a string specifying the name of the image file associated with the current GlideTimelineItem.\n\n|Name|Type|Description|\n|----|----|-----------|\n|none| | |\n\n|Type|Description|\n|----|-----------|\n|String|The name of the image file associated with the current GlideTimelineItem. If no image is associated with the current item, an empty string \\(\"\"\\) is returned.|\n\n## GlideTimelineItem - getIsDroppable\\( \\)\n\nIndicates whether or not the current instance object should be allowed as a \"drop zone\" when moving timeline elements vertically.\n\n|Name|Type|Description|\n|----|----|-----------|\n|none| | |\n\n|Type|Description|\n|----|-----------|\n|Boolean|True if droppable; false otherwise.|\n\n## GlideTimelineItem - getLeftLabelText\\( \\)\n\nReturns the text to be displayed in the left pane \\(if enabled\\).\n\n|Name|Type|Description|\n|----|----|-----------|\n|none| | |\n\n|Type|Description|\n|----|-----------|\n|String|The value of the text to be displayed in the left pane.|\n\n## GlideTimelineItem - getParent\\( \\)\n\nReturns the unique **sysId** of the current GlideTimelineItem's parent object.\n\n|Name|Type|Description|\n|----|----|-----------|\n|none| | |\n\n|Type|Description|\n|----|-----------|\n|String|The unique sysId of the current GlideTimelineItem's parent object. If the parent does not exist, this will return an empty string \\(\"\"\\).|\n\n## GlideTimelineItem - getTimelineSpans\\( \\)\n\nReturns all the TimelineSpan objects associated with the current instance in an ArrayList.\n\n|Name|Type|Description|\n|----|----|-----------|\n|none| | |\n\n|Type|Description|\n|----|-----------|\n|Object Array|The list of TimelineSpan objects associated with the current instance.|\n\n## GlideTimelineItem - isTextBold\\( \\)\n\nIndicates if the left pane text is set to display using a bold style.\n\n|Name|Type|Description|\n|----|----|-----------|\n|None| | |\n\n<table id=\"table_mmb_2tm_zt\" class=\"returns\"><thead><tr><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether the text should be bold.Possible values:\n\n-   true: Text should be bold.\n-   false: Text should not be bold.\n\n</td></tr></tbody>\n</table>The following example checks if an incident's state is \"New\" and sets the item text to bold.\n\n```\nvar NewIncidentTimelineScriptInclude = Class.create();\nNewIncidentTimelineScriptInclude.prototype = Object.extendsObject(AbstractTimelineSchedulePage, {\n\n  getItems: function() {\n    // Specify the page title \n    this.setPageTitle('New Incident Timeline');\n\n    var groupNew = new GlideTimelineItem('new');\n    groupNew.setLeftLabelText('New Incidents');\n\n    groupNew.setImage('../images/icons/all.gifx');\n    this.add(groupNew);\n\n    // Get all the new incidents and add them to a new label \n    var grIncident = new GlideRecord('incident');\n    grIncident.query();\n    while (grIncident.next()) {\n      // Loop through all and capture new incidents \n      if (grIncident.incident_state != '1') continue;\n\n      // Create the item and the span item. \n      var item = new GlideTimelineItem(grIncident.getTableName(), grIncident.sys_id);\n      var span = item.createTimelineSpan(grIncident.getTableName(), grIncident.sys_id);\n\n      if (grIncident.incident_state == '1') { // New\n        item.setParent(groupNew.getSysId());\n        // Check and set bold text\n          item.setTextBold(item.isTextBold() ? false : true);\n        } \n      item.setImage('../images/icons/open.gifx');\n      span.setTimeSpan(grIncident.getElement('opened_at').getGlideObject().getNumericValue(),\n      grIncident.getElement('opened_at').getGlideObject().getNumericValue());\n\n      // Show different colors based upon the priorities only for new incidents \n      switch (grIncident.getElement('priority').toString()) {\n        case '1':\n          span.setPointIconClass('red_circle');\n          break;\n        case '2':\n          span.setPointIconClass('red_square');\n          break;\n        case '3':\n          span.setPointIconClass('blue_circle');\n          break;\n        case '4':\n          span.setPointIconClass('blue_square');\n          break;\n        case '5':\n          span.setPointIconClass('sepia_circle');\n          break;\n\n          default: // Otherwise, the default point icon class will be used (Milestone)\n      }\n\n      // Common item properties \n      item.setLeftLabelText(grIncident.short_description);\n\n      // Common span properties\n      span.setSpanText(grIncident.short_description);\n      span.setSpanColor('blue');\n      span.setTooltip('<strong>' + GlideStringUtil.escapeHTML(grIncident.short_description) +\n        '</strong><br>' + grIncident.number);\n      this.add(item);\n    }\n  }\n\n});\n```\n\n## GlideTimelineItem - setImage\\(String strImageName\\)\n\nSets the name of the image file \\(including it's path\\) to use as the icon for the item in the left pane.\n\n|Name|Type|Description|\n|----|----|-----------|\n|strImageName|String|Name of the image, including its path.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThe following example shows how to use setImage\\(\\) to define the image that should appear for the icon in the left pane.\n\n```\nvar project_id=\"741cc7491b6f1c5043de32231b4bcbc5\"; // Project ID \nvar grUser = new GlideRecord('user_resource');\ngrUser.addQuery('planned_task', project_id);\ngrUser.setQueryReferences(true);\ngrUser.orderBy('user.name', 'DESC');\ngrUser.query();\nwhile (grUser.next()) {\n  var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);\n  /* Specify the text to display in the left pane for this item. */\n  item.setLeftLabelText(grUser.user.name); \n  /* Set the name of the image file (including it's path) */\n  item.setImage('../images/icons/user.gifx'); \n  /* Specify whether or not to bold the text style of the item in the left pane. */\n  item.setTextBold(true); \n  /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */\n  item.setIsDraggable(true); \n}\n```\n\n## GlideTimelineItem - setIsDraggable\\(Boolean b\\)\n\nSets whether or not the current instance object can be clicked and dragged into another GlideTimelineItem.\n\n<table id=\"table_pmb_2tm_zt\" class=\"parameters\"><thead><tr><th>\n\nName\n\n</th><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nb\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether the item can be moved using click and drag. Valid values:\n\n-   true: Item can be moved using click and drag.\n-   false: Item cannot be moved using click and drag.\n\n</td></tr></tbody>\n</table>|Type|Description|\n|----|-----------|\n|void| |\n\nThe following example shows how to use setIsDraggable\\(\\) to enable the current object to be dragged into another GlideTimelineItem.\n\n```\nvar project_id=\"741cc7491b6f1c5043de32231b4bcbc5\"; // Project ID \nvar grUser = new GlideRecord('user_resource');\ngrUser.addQuery('planned_task', project_id);\ngrUser.setQueryReferences(true);\ngrUser.orderBy('user.name', 'DESC');\ngrUser.query();\nwhile (grUser.next()) {\n  var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);\n  /* Specify the text to display in the left pane for this item. */\n  item.setLeftLabelText(grUser.user.name); \n  /* Set the name of the image file (including it's path) */\n  item.setImage('../images/icons/user.gifx'); \n  /* Specify whether or not to bold the text style of the item in the left pane. */\n  item.setTextBold(true); \n  /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */\n  item.setIsDraggable(true); \n}\n```\n\n## GlideTimelineItem - setLeftLabelText\\(String strText\\)\n\nSpecifies the text to display in the left pane for this item.\n\n|Name|Type|Description|\n|----|----|-----------|\n|strText|String|Text to display in the left pane for this item.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThe following example shows how to use setLeftLabelText\\(\\) to set the text in the left pane.\n\n```\nvar project_id=\"741cc7491b6f1c5043de32231b4bcbc5\"; // Project ID \nvar grUser = new GlideRecord('user_resource');\ngrUser.addQuery('planned_task', project_id);\ngrUser.setQueryReferences(true);\ngrUser.orderBy('user.name', 'DESC');\ngrUser.query();\nwhile (grUser.next()) {\n  var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);\n  /* Specify the text to display in the left pane for this item. */\n  item.setLeftLabelText(grUser.user.name); \n  /* Set the name of the image file (including it's path) */\n  item.setImage('../images/icons/user.gifx'); \n  /* Specify whether or not to bold the text style of the item in the left pane. */\n  item.setTextBold(true); \n  /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */\n  item.setIsDraggable(true); \n}\n```\n\n## GlideTimelineItem - setParent\\(String sysId\\)\n\nSets the parent of the current GlideTimelineItem.\n\n|Name|Type|Description|\n|----|----|-----------|\n|sysId|String|The sysID of the GlideTimelineItem that should become the parent of the current GlideTimelineItem.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\n## GlideTimelineItem - setTextBold\\(Boolean b\\)\n\nSpecifies whether or not to bold the text style of the item in the left pane.\n\n<table id=\"table_obb_lvm_zt\" class=\"parameters\"><thead><tr><th>\n\nName\n\n</th><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nb\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether the text in left pane should be bold.Valid values:\n\n-   true: Text should be bold.\n-   false: Text should not be bold.\n\n</td></tr></tbody>\n</table>|Type|Description|\n|----|-----------|\n|void| |\n\nThe following example shows how to set the text in the left pane to bold.\n\n```\nvar project_id=\"741cc7491b6f1c5043de32231b4bcbc5\"; // Project ID \nvar grUser = new GlideRecord('user_resource');\ngrUser.addQuery('planned_task', project_id);\ngrUser.setQueryReferences(true);\ngrUser.orderBy('user.name', 'DESC');\ngrUser.query();\nwhile (grUser.next()) {\n  var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);\n  /* Specify the text to display in the left pane for this item. */\n  item.setLeftLabelText(grUser.user.name); \n  /* Set the name of the image file (including it's path) */\n  item.setImage('../images/icons/user.gifx'); \n  /* Specify whether or not to bold the text style of the item in the left pane. */\n  item.setTextBold(true); \n  /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */\n  item.setIsDraggable(true); \n}\n```\n\n"}}