Zeitplanseiten

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 7 Minuten Lesedauer
  • Eine Zeitplanseite ist ein Datensatz, der eine Sammlung von Skripts enthält, die die anwenderdefinierte Generierung einer Kalender- oder Zeitleistenanzeige ermöglichen.

    Die Erstellung von Zeitleisten-Zeitplanseiten erfordert Kenntnisse des Seiten-/Ereignis-Flows und die Fähigkeit, Client- und serverseitiges JavaScript zu schreiben.

    Formular „Zeitplanseiten“

    Um auf Zeitplanseiten zuzugreifen, navigieren Sie zu Systemzeitplaner > Zeitpläne > Zeitplanseitenan.

    Das Formular enthält je nach die folgenden Felder Ansichtstyp Ausgewählt:
    Tabelle : 1. Formular „Zeitplanseiten“
    Feld Feldtyp Beschreibung
    Name Zeichenfolge Allgemeiner Name, der zur Identifizierung der aktuellen Zeitplanseite verwendet wird.
    Zeitplantyp Zeichenfolge Der Zeitplantyp ist eine Zeichenfolge, die verwendet wird, um die Zeitplanseite über den URI-Parameter „sysparm_page_schedule_type“ eindeutig zu identifizieren. Beispielsweise kann auf eine Zeitplanseite wie folgt zugegriffen werden:

    /Show_schedule_page.do?sysparm_type=gantt_Chart&sysparm_timeline_task_id=d530bf907f0000015ce594fd929cf6a4

    Alternativ kann auch auf die Zeitplanseite zugegriffen werden, indem Sie „ sysparm_page_sys_id„ URI-Parameter zum eindeutigen 32-stelligen Hexadezimalsystembezeichner der Zeitplanseite.

    Anzeigetyp Auswahl Jeder Ansichtstyp zeigt verschiedene Feldkombinationen an. Es sind zwei Optionen verfügbar:
    • Kalender
    • Zeitleisten
    Beschreibung Zeichenfolge Allgemeine Beschreibung, die zusätzliche Informationen zur aktuellen Zeitplanseite enthält. Dieses Feld ist nicht erforderlich.
    Name der init-Funktion Zeichenfolge
    Hinweis:
    Diese Funktionalität wird nur von verwendet Kalender Geben Sie Zeitplanseiten ein.
    Der Name der init-Funktion gibt den Namen der JavaScript-Funktion an, die innerhalb von aufgerufen werden soll Client-Skript Funktion für Kalendertyp-Zeitplanseiten.
    HTML Zeichenfolge
    Hinweis:
    Diese Funktionalität wird nur von verwendet Kalender Geben Sie Zeitplanseiten ein.
    Das HTML-Feld ist ein skriptfähiger Abschnitt, der von Jelly analysiert und vor dem Rest des Kalenders in die Anzeigeseite injiziert wird. Es kann verwendet werden, um Variablen vom Server zu übergeben und zusätzliche Felder zu definieren.
    Client-Skript Zeichenfolge Das Clientskript ist ein skriptfähiger Abschnitt, der die Konfiguration von Optionen für die Anzeige der Zeitplanseite ermöglicht. Die API unterscheidet sich je nach Ansichtstyp der Zeitplanseite und wird unten besprochen.
    AJAX-Prozessor des Servers Zeichenfolge
    Hinweis:
    Diese Funktionalität wird nur von verwendet Kalender Geben Sie Zeitplanseiten ein.
    Der Server-AJAX-Prozessor ist spezifisch für Zeitplanseiten vom Kalendertyp, die verwendet werden, um eine Reihe von Zeitplanelementen und -Bereichen zurückzugeben, die angezeigt werden sollen.

    Zeitleistenzeitplanseiten

    Eine Zeitleistenzeitplanseite ist ein bestimmter Datensatz, der Konfigurationsinformationen für die Anzeige zeitbasierter Punkte und Bereiche in einer „Zeitleiste“-ähnlichen Form enthält.

    Die Zeitleistenzeitplanseite verweist auf eine Skripteinbindung, die sich von AbstractTimelineSchedulePage erstreckt, um dynamische Änderungen an der Zeitleiste basierend auf verschiedenen Ereignissen und Bedingungen durchzuführen. Sowohl die Zeitplanseite als auch die Skripteinbindung für die Zeitleistengenerierung ermöglichen extreme Anpassungen, und die entsprechende Anwendungsprogrammierschnittstelle (API) ist unten dokumentiert.

    Das folgende Diagramm zeigt die Reihe von Ereignissen, die auftreten, wenn auf eine Zeitleisten-Zeitplanseite zugegriffen wird. Sobald die Zeitleiste geladen wurde, folgen alle nachfolgenden Ereignisse, z. B. Ereignisse, die aus einer Zeitleisteninteraktion resultieren (z. B. Verschieben einer Zeitleistenspanne), demselben Logik-Flow, der im grauen Ereignisfeld angezeigt wird.
    Abbildung : 1. Zeitleisten-Flow

    Anwendungen, die Zeitplanseiten zum Generieren von Zeitlinien verwenden

    • Projektmanagement
    • Wartungszeitpläne
    • Gruppe Der Rufbereitschaftsrotation
    • Außendienst-Management

    Beispiel für Zeitleistenzeitplanseite

    Das folgende Beispiel demonstriert, wie Sie eine Zeitleisten-Zeitplanseite mit entsprechender Skripteinbindung erstellen, die eine Mehrheit der oben beschriebenen API verwendet.

    In diesem Beispiel erstellen wir eine Zeitleiste für die Incident-Zusammenfassung für einen Projektsupport-Manager, um alle neuen Incidents zu visualisieren. Alle neuen Incidents sollten als einzelne Punkte angezeigt werden, bei denen die Priorität des Incidents durch ein anderes Punktsymbol gekennzeichnet ist. Darüber hinaus sollten alle geschlossenen Incidents auf der Zeitleiste in einer separaten Gruppe angezeigt werden, die die Dauer des Incidents vor dem Schließen anzeigt. Da der Projektmanager in der Lage sein möchte, neue Elemente, die ohne Verwendung von Formularlisten gelöst werden, einfach zu schließen, bearbeiten wir das vertikale Verschiebungsereignis, mit dem die neuen Incidents in die geschlossene Incident-Gruppe oder Elemente innerhalb gezogen werden können.

    Zeitplanseite

    Erstellen Sie eine neue Zeitplanseite mit den folgenden Eigenschaften:
    • Name : Hardware-Incidents
    • Zeitplantyp : Incident_Timeline
    • Ansichtstyp : Zeitleiste
    • Client-Skript :
    // 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');

    Skripteinbindung

    Nachdem die Zeitplanseite erstellt wurde, müssen wir eine übereinstimmende Skripteinbindung für die registrierten Ereignisse generieren. Erstellen Sie eine neue Skripteinbindung mit den folgenden Eigenschaften:
    • Name : IncidentTimelineScriptInclude
    • Aktiv : Aktiviert
    • Vom Client aufrufbar : Aktiviert
    • Skript :
    // 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 now_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 will 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('<strong>' + GlideStringUtil.escapeHTML(gr.short_description) + '</strong><br>' + 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 now_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 GlideTimelineItem. 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: ' + 
                  '<div style="margin:10px 0 10px 14px;padding:4px;background-color:#EBEBEB;"><strong>' +
                   GlideStringUtil.escapeHTML(gr.short_description) + 
                   '</strong><br/><div class="font_smaller">' + now_GR. number + '</div></div>', 
                   '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 now_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', '<strong>' + gr.short_description + '</strong> was successfully closed.'); } ,
     
      // Since the user clicked cancel or close we simply do nothing.
      _elementMoveYHandler_DoNothing: function(spanId, itemId, newItemId) { }
     
     });

    Screenshots/Ergebnisse

    1. Navigieren Sie zu:

      http://[YOURINSTANCE]:8080/show_schedule_page.do?sysparm_page_schedule_type=Incident_Timeline

      Beachten Sie, dass der fett formatierte Text der Wert der Zeitplanseite ist Zeitplantyp Feld.

    2. Auf der Seite wird eine Zeitleiste angezeigt, wie von der Zeitplanseite und der erstellten Skripteinbindung angegeben. Ein Link zu dieser Seite kann nach Bedarf als Modul oder UI-Aktion erstellt und platziert werden.
      Abbildung : 2. Zeitleistenbeispiel-Incident-Vorschau
    3. Beim Versuch, einen geschlossenen Incident an eine beliebige Stelle zu verschieben, wird die erwartete Fehlermeldung angezeigt.
      Abbildung : 3. Zeitleistenbeispiel – Fehler Beim Verschieben
    4. Verschieben des Incidents: Ich benötige mehr Arbeitsspeicher Zeigt das folgende Bestätigungsfeld an.
      Abbildung : 4. Zeitleistenbeispiel „Schließen Bestätigen“
    5. Klicken Sie auf Abbrechen Schaltfläche schließt die Überlagerung. Klicken Sie auf OK Schaltfläche aktualisiert den Incident_State des Datensatzes und zeigt dann das folgende Erfolgsfeld an.
      Abbildung : 5. Zeitleistenbeispiel – Abschluss Erfolgreich
    6. Nach dem Klicken OK , Es ist klar, dass der Incident jetzt in aufgeführt ist Geschlossene Incidents Gruppe.
      Abbildung : 6. Zeitleistenbeispiel-Incident Aktualisiert
      Zeitleiste eines Beispiel-Incidents