Une page de calendrier est un enregistrement qui contient une collection de scripts qui permettent de personnaliser l’affichage d’un calendrier ou d’une chronologie.
La création de pages de calendrier de chronologie nécessite une compréhension du flux de page/d’événement et la capacité d’écrire du code JavaScript côté client et serveur.
Formulaire Pages de calendrier
Pour accéder aux pages de calendrier, accédez à Planificateur système > Calendriers > Pages de calendrier.
Le formulaire fournit les champs suivants, en fonction du type de vue sélectionné :
Tableau 1. Formulaire Pages de calendrier
Champ
Type de champ
Description
Nom
Chaîne
Nom général utilisé pour identifier la page de calendrier actuelle.
Type de calendrier
Chaîne
Le type de calendrier est une chaîne qui est utilisée pour identifier de façon unique la page de calendrier via le paramètre d’URI « sysparm_page_schedule_type ». Par exemple, une page de calendrier peut être consultée comme suit :
Il est également possible d’accéder à la page de calendrier en définissant le paramètre URI «sysparm_page_sys_id » sur celui de l’identificateur système hexadécimal unique de 32 caractères de la page de calendrier.
Type de vue
Choix
Chaque type de vue affiche différentes combinaisons de champs. Deux options s’offrent à vous :
Calendriers
Chronologies
Description
Chaîne
Description générale qui fournit des informations supplémentaires sur la page de calendrier actuelle. Ce champ n’est pas nécessaire.
Nom de la fonction d’initialisation
Chaîne
Remarque :
Cette fonctionnalité n’est utilisée que par les pages de calendrier de type Calendrier .
Le nom de la fonction init spécifie le nom de la fonction JavaScript à appeler à l’intérieur de la fonction de script client pour les pages de calendrier de type calendrier.
HTML
Chaîne
Remarque :
Cette fonctionnalité n’est utilisée que par les pages de calendrier de type Calendrier .
Le champ HTML est une section scriptable qui est analysée par Jelly et injectée dans la page d’affichage avant le reste du calendrier. Il peut être utilisé pour transmettre des variables à partir du serveur et définir des champs supplémentaires si nécessaire.
Script client
Chaîne
Le script client est une section pouvant contenir des scripts qui permet de configurer les options d’affichage de la page de calendrier. L’API est différente en fonction du type de vue de page de calendrier et est décrite ci-dessous.
Processeur de serveur AJAX
Chaîne
Remarque :
Cette fonctionnalité n’est utilisée que par les pages de calendrier de type Calendrier .
Le processeur Serveur AJAX est spécifique aux pages de calendrier de type calendrier qui sont utilisées pour renvoyer un ensemble d’éléments de calendrier et de parcours à afficher.
Pages de calendrier de chronologie
Une page de planification de chronologie est un enregistrement spécifique qui contient des informations de configuration pour afficher des points et des plages basés sur le temps dans une « chronologie ».
La page de calendrier de chronologie référence un include de script qui s’étend à partir de AbstractTimelineSchedulePage pour apporter des modifications dynamiques à la chronologie en fonction de différents événements et conditions. La page de calendrier et l’include de script pour la génération de chronologie permettent une personnalisation extrême et leur interface de programmation d’application (API) correspondante est documentée ci-dessous.
Le diagramme suivant montre la série d’événements qui se produisent lors de l’accès à une page de planification de chronologie. Une fois la chronologie chargée, tous les événements suivants, tels que les événements résultant d’une interaction avec la chronologie (par exemple, le déplacement d’une plage de chronologie), suivent le même flux logique que celui affiché dans la zone grise de l’événement.Figure 1. Flux de chronologie
Applications qui utilisent des pages de calendrier pour générer des chronologies
Gestion des projets
Calendriers de maintenance
Rotation d’astreinte de groupe
Gestion des services sur site
Exemple de page de planification de chronologie
L’exemple suivant montre comment créer une page de planification de chronologie avec l’include de script correspondant en utilisant une majorité de l’API décrite ci-dessus.
Pour cet exemple, nous allons créer une chronologie récapitulative des incidents pour qu’un gestionnaire de support de projet visualise tous les nouveaux incidents. Tous les nouveaux incidents doivent être affichés sous forme de points uniques où la priorité de l’incident est distinguée par une icône de point différente. En outre, tous les incidents fermés doivent être affichés dans la chronologie dans un groupe distinct qui indique la durée de l’incident avant sa fermeture. Étant donné que le gestionnaire de projet souhaite pouvoir fermer facilement les nouveaux éléments résolus sans utiliser de listes de formulaires, nous allons gérer l’événement de déplacement vertical qui permet de glisser les nouveaux incidents dans le groupe d’incidents fermés ou les éléments qu’il contient.
Page de calendrier
Créez une page de calendrier avec les propriétés suivantes :
Nom : Incidents matériels
Type de calendrier : incident_timeline
Type de vue : chronologie
Script client :
// 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');
Script include
Maintenant que la page de calendrier a été créée, nous devons générer un include de script correspondant pour les événements qui ont été enregistrés. Créer un nouveau script include avec les propriétés suivantes :
Nom : IncidentTimelineScriptInclude
Actif : coché
Client joignable : Coché
Script :
// 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) { }
});
Notez que le texte en gras correspond à la valeur du champ de type de calendrier de la page de calendrier.
La page affiche une chronologie comme spécifié par la page de calendrier et l’include de script créé. Un lien vers cette page peut être créé et placé en tant que module ou action d’interface utilisateur si nécessaire.Figure 2. Exemple de chronologie : aperçu d’incident
Si vous tentez de déplacer un incident fermé n’importe où, le message d’erreur attendu s’affiche.Figure 3. Exemple de chronologie : erreur de déplacement
Déplacement de l’incident : J’ai besoin de plus de mémoire affiche la zone de confirmation suivante.Figure 4. Exemple de chronologie : confirmer la fermeture
Cliquez sur le bouton Annuler pour fermer la superposition. Cliquer sur le bouton OK met à jour la incident_state de l’enregistrement, puis affiche la boîte de dialogue de réussite suivante.Figure 5. Exemple de chronologie Fermer avec succès
Après avoir cliqué sur OK, il est clair que l’incident est maintenant répertorié dans le groupe Incidents fermés .Figure 6. Exemple de chronologie : incident mis à jour
