Eine Zeitplanseite ist ein Datensatz, der eine Sammlung von Skripts enthält, die die benutzerdefinierte Erstellung einer Kalender- oder Zeitleistenanzeige ermöglichen.
Die Erstellung von Zeitplanseiten mit Zeitleiste erfordert das Verständnis des Seiten-/Event-Flusses und die Möglichkeit, JavaScript auf Client- und Serverseite zu schreiben.
Zeitplanseitenformular
Um auf Zeitplanseiten zuzugreifen, navigieren Sie zu Systemzeitplaner > Zeitpläne > Zeitplanseiten.
Das Formular enthält die folgenden Felder, abhängig von der ausgewählten Option Typ anzeigen:
Tabelle : 1. Zeitplanseitenformular
Feld
Feldtyp
Beschreibung
Name
Zeichenfolge
Allgemeiner Name, der zur Identifizierung der aktuellen Zeitplanseite verwendet wird.
Zeitplantyp
Zeichenfolge
Der Zeitplantyp ist eine Zeichenfolge, mit der die Zeitplanseite über den URI-Parameter „sysparm_page_schedule_type“ eindeutig identifiziert wird. Beispielsweise kann auf eine Zeitplanseite wie folgt zugegriffen werden:
Alternativ kann auf die Zeitplanseite auch zugegriffen werden, indem der URI-Parameter „sysparm_page_sys_id“ auf den Wert des eindeutigen 32-stelligen hexadezimalen Systembezeichners der Zeitplanseite festgelegt wird.
Anzeigetyp
Auswahl
Jeder Ansichtstyp zeigt verschiedene Feldkombinationen an. Es stehen zwei Optionen zur Verfügung:
Kalender
Zeitachsen
Beschreibung
Zeichenfolge
Allgemeine Beschreibung mit zusätzlichen Informationen zur aktuellen Zeitplanseite. Dieses Feld ist nicht erforderlich.
Init-Funktionsname
Zeichenfolge
Hinweis:
Diese Funktionalität wird nur von Kalender-Zeitplanseiten verwendet.
Der Name der Init-Funktion gibt den Namen der JavaScript-Funktion an, die in der Client-Skript-Funktion für Kalenderzeitplanseiten aufgerufen werden soll.
HTML
Zeichenfolge
Hinweis:
Diese Funktionalität wird nur von Kalender-Zeitplanseiten verwendet.
Das HTML-Feld ist ein skriptfähiger Abschnitt, der von Jelly analysiert und vor dem Rest des Kalenders in die Anzeigeseite eingefügt wird. Es kann verwendet werden, um Variablen vom Server zu übergeben und es müssen zusätzliche Felder definiert werden.
Client-Skript
Zeichenfolge
Das Client-Skript ist ein skriptfähiger Abschnitt, in dem Optionen für die Anzeige der Zeitplanseite konfiguriert werden können. Die API unterscheidet sich je nach Typ der Zeitplanseitenansicht und wird im Folgenden beschrieben.
AJAX-Prozessor des Servers
Zeichenfolge
Hinweis:
Diese Funktionalität wird nur von Kalender-Zeitplanseiten verwendet.
Der Server-AJAX-Prozessor ist spezifisch für Zeitplanseiten des Kalendertyps, auf denen ein Satz von Zeitplanelementen und Spannweiten zurückgegeben wird, die angezeigt werden sollen.
Zeitplanseiten mit Zeitleiste
Eine Zeitplanseite mit Zeitleiste ist ein bestimmter Datensatz, der Konfigurationsinformationen enthält, um zeitbasierte Punkte und Zeitspannen in einer Zeitleistendarstellung anzuzeigen.
Die Zeitplanseite mit Zeitleiste verweist auf ein Skript, das sich von AbstractTimelineSchedulePage erstreckt, um dynamische Änderungen an der Zeitleiste basierend auf verschiedenen Events und Bedingungen vorzunehmen. Sowohl die Zeitplanseite als auch die Skripteinbindung für die Zeitleistengenerierung ermöglichen weitreichende Anpassungen. Die entsprechende Anwendungsprogrammierschnittstelle (API) ist im Folgenden dokumentiert.
Das folgende Diagramm zeigt die Reihe von Events, die beim Zugriff auf eine Zeitplanseite mit Zeitleiste auftreten. Nachdem die Zeitleiste geladen wurde, folgen alle nachfolgenden Events, z. B. Events, die aus einer Zeitleisteninteraktion resultieren (z. B. Verschieben einer Zeitleistenspanne), dem gleichen Logikfluss, der im grauen Ereignisfeld angezeigt wird.Abbildung : 1. Zeitleistenfluss
Anwendungen, die Zeitplanseiten verwenden, um Zeitachsen zu generieren
Projektmanagement
Wartungspläne
Rufbereitschaftsrotation
Field Service Management
Beispiel für Zeitplanseite mit Zeitleiste
Im folgenden Beispiel wird veranschaulicht, wie eine Zeitplanseite mit Zeitleiste mit den entsprechenden Skriptinhalten erstellt wird, wobei ein Großteil der oben beschriebenen API verwendet wird.
In diesem Beispiel wird eine Zeitleiste mit einer Incident-Zusammenfassung erstellt, über die ein Projekt-Support-Manager alle neuen Incidents visualisieren kann. 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, in der die Dauer des Incident vor dem Schließen angegeben wird. Da der Projektmanager in der Lage sein soll, neue Elemente, die aufgelöst werden, ohne Verwendung von Formularlisten einfach schließen zu können, behandeln wir das vertikale Verschiebungsereignis, sodass die neuen Incidents in die geschlossene Incident-Gruppe oder die darin enthaltenen Elemente 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, muss eine übereinstimmende Skripteinbindung für die registrierten Incidents erstellt werden. Erstellen Sie eine neue Skripteinbindung mit den folgenden Eigenschaften:
Name: IncidentTimelineScriptInclude
Aktiv: Aktiviert
Aufrufbares Client-Element: 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) { }
});
Beachten Sie, dass der Fettdruck der Wert des Zeitplanseitenfelds Zeitplantyp ist.
Die Seite zeigt eine Zeitleiste an, gemäß den Angaben der Zeitplanseite und der erstellten Skripteinbindung. Ein Link zu dieser Seite kann erstellt und bei Bedarf als Modul- oder UI Action platziert werden.Abbildung : 2. Zeitleistenbeispiel: Incident-Vorschau
Wenn Sie versuchen, einen geschlossenen Incident zu verschieben, wird die erwartete Fehlermeldung angezeigt.Abbildung : 3. Zeitleistenbeispiel: Fehlermeldung beim Verschieben
Den Incident verschieben: Ich brauche mehr Speicher zeigt das folgende Bestätigungsfeld an.Abbildung : 4. Zeitleistenbeispiel: Bestätigung des Schließvorgangs
Durch Klicken auf die Schaltfläche Abbrechen wird das Overlay geschlossen. Durch Klicken auf die Schaltfläche OK wird der incident_state des Datensatzes aktualisiert und anschließend das folgende Erfolgsfeld angezeigt.Abbildung : 5. Zeitleistenbeispiel: Schließen erfolgreich
Nach dem Klicken auf OK ist der Incident jetzt in der Gruppe Geschlossene Incidents aufgeführt.Abbildung : 6. Zeitleistenbeispiel: Incident aktualisiert
