---
sourceDocument: Xanadu API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# GlideTimelineItem - Global

# GlideTimelineItem - Global {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes to read

The GlideTimelineItem API extends the abstract ScheduleItem class to define additional properties that are specific to the time line.

A 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).

## GlideTimelineItem - GlideTimelineItem(String tableName) {#ariaid-title2}

Create a "dummy" GlideTimelineItem object.
This 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.
{#r_TLI-TimelineItem_S__table_dpl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| tableName | String | The name of the table associated with current object. |
[Table 1. Parameters]

{#r_TLI-TimelineItem_S__table_dpl_1jm_zt} {#r_TLI-TimelineItem_S__table_epl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 2. Returns]

{#r_TLI-TimelineItem_S__table_epl_1jm_zt}

## GlideTimelineItem - GlideTimelineItem(String tableName, String sys_id) {#ariaid-title3}

Constructor that sets the required table and sys_id properties.
The 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.
{#r_TLI-TimelineItem_S_S__table_fpl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| tableName | String | The name of the table associated with current object. |
| sys_id | String | The sys ID for the object. |
[Table 3. Parameters]

{#r_TLI-TimelineItem_S_S__table_fpl_1jm_zt} {#r_TLI-TimelineItem_S_S__table_gpl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 4. Returns]

{#r_TLI-TimelineItem_S_S__table_gpl_1jm_zt}

## GlideTimelineItem - createTimelineSpan(String tableName) {#ariaid-title4}

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.
{#r_TLI-createTimelineSpan_S__table_hpl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| tableName | String | The name of the table associated with current object. |
[Table 5. Parameters]

{#r_TLI-createTimelineSpan_S__table_hpl_1jm_zt} {#r_TLI-createTimelineSpan_S__table_ipl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| Object | The newly-created span object instance. |
[Table 6. Returns]

{#r_TLI-createTimelineSpan_S__table_ipl_1jm_zt}

## GlideTimelineItem - createTimelineSpan(String tableName, String sys_id) {#ariaid-title5}

Creates a new TimelineSpan object associated with the current instance
object using the specified table and sys_id.
{#r_TLI-createTimelineSpan_S_S__table_jpl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| tableName | String | Name of the table associated with current object |
| sys_id | String | Sys_id for the object. |
[Table 7. Parameters]

{#r_TLI-createTimelineSpan_S_S__table_jpl_1jm_zt} {#r_TLI-createTimelineSpan_S_S__table_kpl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| Object | Newly-created span object instance. |
[Table 8. Returns]

{#r_TLI-createTimelineSpan_S_S__table_kpl_1jm_zt}  
The following example shows how to use createTimelineSpan() to create a
new TimelineSpan object.

    var project_id="741cc7491b6f1c5043de32231b4bcbc5"; // Project ID 
    var grUser = new GlideRecord('user_resource');
    grUser.addQuery('planned_task', project_id);
    grUser.setQueryReferences(true);
    grUser.orderBy('user.name', 'DESC');
    grUser.query();
    while (grUser.next()) {
      var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);
      /* Specify the text to display in the left pane for this item. */
      item.setLeftLabelText(grUser.user.name); 
      /* Set the name of the image file (including it's path) */
      item.setImage('../images/icons/user.gifx'); 
      /* Specify whether or not to bold the text style of the item in the left pane. */
      item.setTextBold(true); 
      /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */
      item.setIsDraggable(true);
      /* Create a new TimelineSpan object associated with the current instance object using the specified table and sys_id. */ 
      item.createTimelineSpan(grUser.getTableName(), grUser.getUniqueValue());
    }

## GlideTimelineItem - getImage( ) {#ariaid-title6}

Returns a string specifying the name of the image file associated with the current
GlideTimelineItem.
{#r_TLI-getImage__table_lpl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| none |   |   |
[Table 9. Parameters]

{#r_TLI-getImage__table_lpl_1jm_zt} {#r_TLI-getImage__table_mpl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| 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. |
[Table 10. Returns]

{#r_TLI-getImage__table_mpl_1jm_zt}

## GlideTimelineItem - getIsDroppable( ) {#ariaid-title7}

Indicates whether or not the current instance object should be allowed as a "drop zone" when moving timeline elements vertically.
{#r_TLI-getIsDroppable__table_npl_1jm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| none |   |   |
[Table 11. Parameters]

{#r_TLI-getIsDroppable__table_npl_1jm_zt} {#r_TLI-getIsDroppable__table_opl_1jm_zt__entry__2}

| Type | Description |
|-|-|
| Boolean | True if droppable; false otherwise. |
[Table 12. Returns]

{#r_TLI-getIsDroppable__table_opl_1jm_zt}

## GlideTimelineItem - getLeftLabelText( ) {#ariaid-title8}

Returns the text to be displayed in the left pane (if enabled).
{#r_TLI-getLeftLabelText__table_fmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| none |   |   |
[Table 13. Parameters]

{#r_TLI-getLeftLabelText__table_fmb_2tm_zt} {#r_TLI-getLeftLabelText__table_gmb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| String | The value of the text to be displayed in the left pane. |
[Table 14. Returns]

{#r_TLI-getLeftLabelText__table_gmb_2tm_zt}

## GlideTimelineItem - getParent( ) {#ariaid-title9}

Returns the unique sysId of the current
GlideTimelineItem's parent object.
{#r_TLI-getParent__table_hmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| none |   |   |
[Table 15. Parameters]

{#r_TLI-getParent__table_hmb_2tm_zt} {#r_TLI-getParent__table_imb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| String | The unique sysId of the current GlideTimelineItem's parent object. If the parent does not exist, this will return an empty string (""). |
[Table 16. Returns]

{#r_TLI-getParent__table_imb_2tm_zt}

## GlideTimelineItem - getTimelineSpans( ) {#ariaid-title10}

Returns all the TimelineSpan objects associated with the current
instance in an ArrayList.
{#r_TLI-getTimelineSpans__table_jmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| none |   |   |
[Table 17. Parameters]

{#r_TLI-getTimelineSpans__table_jmb_2tm_zt} {#r_TLI-getTimelineSpans__table_kmb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| Object Array | The list of TimelineSpan objects associated with the current instance. |
[Table 18. Returns]

{#r_TLI-getTimelineSpans__table_kmb_2tm_zt}

## GlideTimelineItem - isTextBold( ) {#ariaid-title11}

Indicates if the left pane text is set to display using a bold style.
{#r_TLI-isTextBold__table_lmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| None |   |   |
[Table 19. Parameters]

{#r_TLI-isTextBold__table_lmb_2tm_zt} {#r_TLI-isTextBold__table_mmb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| Boolean | Flag that indicates whether the text should be bold. Possible values: * true: Text should be bold. * false: Text should not be bold. {#r_TLI-isTextBold__ul_nrf_mzd_2sb} |
[Table 20. Returns]

{#r_TLI-isTextBold__table_mmb_2tm_zt}  
The following example checks if an incident's state is "New" and sets the item text to
bold.

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

      getItems: function() {
        // Specify the page title 
        this.setPageTitle('New Incident Timeline');

        var groupNew = new GlideTimelineItem('new');
        groupNew.setLeftLabelText('New Incidents');

        groupNew.setImage('../images/icons/all.gifx');
        this.add(groupNew);

        // Get all the new incidents and add them to a new label 
        var grIncident = new GlideRecord('incident');
        grIncident.query();
        while (grIncident.next()) {
          // Loop through all and capture new incidents 
          if (grIncident.incident_state != '1') continue;

          // Create the item and the span item. 
          var item = new GlideTimelineItem(grIncident.getTableName(), grIncident.sys_id);
          var span = item.createTimelineSpan(grIncident.getTableName(), grIncident.sys_id);

          if (grIncident.incident_state == '1') { // New
            item.setParent(groupNew.getSysId());
            // Check and set bold text
              item.setTextBold(item.isTextBold() ? false : true);
            } 
          item.setImage('../images/icons/open.gifx');
          span.setTimeSpan(grIncident.getElement('opened_at').getGlideObject().getNumericValue(),
          grIncident.getElement('opened_at').getGlideObject().getNumericValue());

          // Show different colors based upon the priorities only for new incidents 
          switch (grIncident.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)
          }

          // Common item properties 
          item.setLeftLabelText(grIncident.short_description);

          // Common span properties
          span.setSpanText(grIncident.short_description);
          span.setSpanColor('blue');
          span.setTooltip('<strong>' + GlideStringUtil.escapeHTML(grIncident.short_description) +
            '</strong><br>' + grIncident.number);
          this.add(item);
        }
      }

    });

## GlideTimelineItem - setImage(String strImageName) {#ariaid-title12}

Sets the name of the image file (including it's path) to use as the icon for the item in the left pane.
{#r_TLI-setImage_S__table_nmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| strImageName | String | Name of the image, including its path. |
[Table 21. Parameters]

{#r_TLI-setImage_S__table_nmb_2tm_zt} {#r_TLI-setImage_S__table_omb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 22. Returns]

{#r_TLI-setImage_S__table_omb_2tm_zt}  
The following example shows how to use setImage() to define the image
that should appear for the icon in the left pane.

    var project_id="741cc7491b6f1c5043de32231b4bcbc5"; // Project ID 
    var grUser = new GlideRecord('user_resource');
    grUser.addQuery('planned_task', project_id);
    grUser.setQueryReferences(true);
    grUser.orderBy('user.name', 'DESC');
    grUser.query();
    while (grUser.next()) {
      var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);
      /* Specify the text to display in the left pane for this item. */
      item.setLeftLabelText(grUser.user.name); 
      /* Set the name of the image file (including it's path) */
      item.setImage('../images/icons/user.gifx'); 
      /* Specify whether or not to bold the text style of the item in the left pane. */
      item.setTextBold(true); 
      /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */
      item.setIsDraggable(true); 
    }

## GlideTimelineItem - setIsDraggable(Boolean b) {#ariaid-title13}

Sets whether or not the current instance object can be clicked and dragged into another
GlideTimelineItem.
{#r_TLI-setIsDraggable_B__table_pmb_2tm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| b | Boolean | Flag that indicates whether the item can be moved using click and drag. Valid values: * true: Item can be moved using click and drag. * false: Item cannot be moved using click and drag. {#r_TLI-setIsDraggable_B__ul_h4z_jt1_fsb} |
[Table 23. Parameters]

{#r_TLI-setIsDraggable_B__table_pmb_2tm_zt} {#r_TLI-setIsDraggable_B__table_qmb_2tm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 24. Returns]

{#r_TLI-setIsDraggable_B__table_qmb_2tm_zt}  
The following example shows how to use setIsDraggable() to enable the
current object to be dragged into another GlideTimelineItem.

    var project_id="741cc7491b6f1c5043de32231b4bcbc5"; // Project ID 
    var grUser = new GlideRecord('user_resource');
    grUser.addQuery('planned_task', project_id);
    grUser.setQueryReferences(true);
    grUser.orderBy('user.name', 'DESC');
    grUser.query();
    while (grUser.next()) {
      var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);
      /* Specify the text to display in the left pane for this item. */
      item.setLeftLabelText(grUser.user.name); 
      /* Set the name of the image file (including it's path) */
      item.setImage('../images/icons/user.gifx'); 
      /* Specify whether or not to bold the text style of the item in the left pane. */
      item.setTextBold(true); 
      /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */
      item.setIsDraggable(true); 
    }

## GlideTimelineItem - setLeftLabelText(String strText) {#ariaid-title14}

Specifies the text to display in the left pane for this item.
{#r_TLI-setLeftLabelText_S__table_ibb_lvm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| strText | String | Text to display in the left pane for this item. |
[Table 25. Parameters]

{#r_TLI-setLeftLabelText_S__table_ibb_lvm_zt} {#r_TLI-setLeftLabelText_S__table_jbb_lvm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 26. Returns]

{#r_TLI-setLeftLabelText_S__table_jbb_lvm_zt}  
The following example shows how to use setLeftLabelText() to set the
text in the left pane.

    var project_id="741cc7491b6f1c5043de32231b4bcbc5"; // Project ID 
    var grUser = new GlideRecord('user_resource');
    grUser.addQuery('planned_task', project_id);
    grUser.setQueryReferences(true);
    grUser.orderBy('user.name', 'DESC');
    grUser.query();
    while (grUser.next()) {
      var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);
      /* Specify the text to display in the left pane for this item. */
      item.setLeftLabelText(grUser.user.name); 
      /* Set the name of the image file (including it's path) */
      item.setImage('../images/icons/user.gifx'); 
      /* Specify whether or not to bold the text style of the item in the left pane. */
      item.setTextBold(true); 
      /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */
      item.setIsDraggable(true); 
    }

## GlideTimelineItem - setParent(String sysId) {#ariaid-title15}

Sets the parent of the current GlideTimelineItem.
{#r_TLI-setParent_S__table_kbb_lvm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| sysId | String | The sysID of the GlideTimelineItem that should become the parent of the current GlideTimelineItem. |
[Table 27. Parameters]

{#r_TLI-setParent_S__table_kbb_lvm_zt} {#r_TLI-setParent_S__table_lbb_lvm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 28. Returns]

{#r_TLI-setParent_S__table_lbb_lvm_zt}

## GlideTimelineItem - setTextBold(Boolean b) {#ariaid-title16}

Specifies whether or not to bold the text style of the item in the left pane.
{#r_TLI-setTextBold_B__table_obb_lvm_zt__entry__3}

| Name | Type | Description |
|-|-|-|
| b | Boolean | Flag that indicates whether the text in left pane should be bold. Valid values: * true: Text should be bold. * false: Text should not be bold. {#r_TLI-setTextBold_B__ul_kn4_1zz_2sb} |
[Table 29. Parameters]

{#r_TLI-setTextBold_B__table_obb_lvm_zt} {#r_TLI-setTextBold_B__table_pbb_lvm_zt__entry__2}

| Type | Description |
|-|-|
| void |   |
[Table 30. Returns]

{#r_TLI-setTextBold_B__table_pbb_lvm_zt}  
The following example shows how to set the text in the left pane to bold.

    var project_id="741cc7491b6f1c5043de32231b4bcbc5"; // Project ID 
    var grUser = new GlideRecord('user_resource');
    grUser.addQuery('planned_task', project_id);
    grUser.setQueryReferences(true);
    grUser.orderBy('user.name', 'DESC');
    grUser.query();
    while (grUser.next()) {
      var item = new GlideTimelineItem(grUser.getTableName(), grUser.user);
      /* Specify the text to display in the left pane for this item. */
      item.setLeftLabelText(grUser.user.name); 
      /* Set the name of the image file (including it's path) */
      item.setImage('../images/icons/user.gifx'); 
      /* Specify whether or not to bold the text style of the item in the left pane. */
      item.setTextBold(true); 
      /* Set whether or not the current instance object can be clicked and dragged into another GlideTimelineItem */
      item.setIsDraggable(true); 
    }