L’exemple suivant montre comment utiliser createTimelineSpan() pour créer un nouvel objet TimelineSpan.

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());
}

L’exemple suivant vérifie si l’état d’un incident est « Nouveau » et définit le texte de l’élément en gras.

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);
    }
  }

});

L’exemple suivant montre comment utiliser setImage() pour définir l’image qui doit apparaître pour l’icône dans le volet gauche.

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); 
}

L’exemple suivant montre comment utiliser setIsDraggable() pour permettre à l’objet actuel d’être glissé dans un autre 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); 
}

L’exemple suivant montre comment utiliser setLeftLabelText() pour définir le texte dans le volet gauche.

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); 
}

L’exemple suivant montre comment mettre le texte du volet gauche en gras.

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); 
}