Introduction

Les indicateurs de chargement améliorent l’expérience utilisateur en signalant visuellement qu’une action est en cours. Dans ServiceNow, il est possible d’ajouter un indicateur de chargement personnalisé pour les transitions entre les pages du portail de service, en exploitant les événements AngularJS $locationChangeStart et $locationChangeSuccess.

Principe de fonctionnement

ServiceNow utilise AngularJS pour gérer les changements de route dans le portail de service. Les événements $locationChangeStart et $locationChangeSuccess permettent de détecter respectivement le début et la fin d’un chargement de page.

• $locationChangeStart : Déclenché quand l’utilisateur navigue vers une nouvelle page.

• $locationChangeSuccess : Déclenché quand la nouvelle page est complètement chargée.

Code de base pour détecter le chargement

Voici le code que vous pouvez utiliser pour détecter les changements de page :

$scope.$on("$locationChangeStart", function(event, data) {
    $scope.locationChanged = true;
    updateActiveItem();
});

$scope.$on("$locationChangeSuccess", function(event, data) {
    $timeout(function(){
        $scope.locationChanged = false;
    }, 100);
});

Explications :

• $scope.locationChanged : Variable booléenne qui indique si une page est en cours de chargement.

• updateActiveItem() : Fonction personnalisée pour mettre à jour l’interface (optionnel).

• $timeout : Permet de retarder légèrement la désactivation de l’indicateur pour éviter un clignotement visuel.

Ajouter un indicateur visuel

Pour rendre l’indicateur visible, ajoutez un élément HTML/CSS dans votre Client Script ou UI Page :

HTML (exemple)

<div ng-if="locationChanged" class="loading-indicator">
    <span class="spinner"></span>
    <p>Chargement en cours...</p>
</div>

CSS (exemple)

.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Intégration dans ServiceNow

1. Créer un Client Script :

   • Allez dans System Definition > Client Scripts.

   • Sélectionnez la table sp_portal ou la table cible.

   • Collez le code JavaScript dans l’éditeur.

2. Ajouter le HTML/CSS :

   • Utilisez une UI Page ou un Widget pour intégrer le HTML/CSS.

   • Assurez-vous que le scope AngularJS est correctement défini.

3. Tester :

   • Naviguez entre les pages du portail pour vérifier que l’indicateur s’affiche et disparaît comme prévu.

Personnalisation avancée

• Durée du délai : Ajustez le délai dans $timeout pour correspondre à la latence de votre instance.

• Style de l’indicateur : Utilisez des bibliothèques comme SpinKit pour des animations plus sophistiquées.

• Gestion des erreurs : Ajoutez un événement $locationChangeError pour gérer les erreurs de chargement.

Conclusion

Un indicateur de chargement personnalisé améliore la perception de la réactivité de votre portail ServiceNow. En combinant les événements AngularJS et un peu de CSS, vous pouvez créer une expérience utilisateur plus fluide et professionnelle.