Introduction

Les notifications en temps réel sont essentielles pour informer les utilisateurs des actions effectuées dans un portail ServiceNow (ajout aux favoris, validation de formulaire, etc.). Elles améliorent l’expérience utilisateur en fournissant un retour visuel immédiat.

Cet article explique comment implémenter un système de notifications personnalisées avec un client script utilisant $rootScope pour une gestion centralisée.

Pourquoi les notifications améliorent-elles l’expérience utilisateur (UX) ?

Les notifications en temps réel sont un pilier de l’expérience utilisateur (UX) dans un portail ServiceNow. Voici pourquoi elles sont indispensables :

• Feedback immédiat et rassurant : Les utilisateurs ont besoin de savoir que leurs actions (comme l’ajout d’un favoris ou la soumission d’un formulaire) ont bien été prises en compte. Une notification visuelle élimine les doutes et réduit la frustration liée à l’incertitude ("Est-ce que ça a marché ?").

• Guidage intuitif : En cas de succès ou d’erreur, une notification claire et concise guide l’utilisateur vers la prochaine étape. Par exemple, un message comme "Votre demande a été enregistrée" ou "Veuillez corriger les champs en rouge" évite les blocages et améliore la fluidité de la navigation.

• Réduction de la charge cognitive : Les utilisateurs n’ont pas à se souvenir de leurs actions ou à vérifier manuellement leur statut. Les notifications agissent comme un système de confirmation automatique, libérant leur attention pour d’autres tâches.

• Renforcement de la confiance : Un portail qui communique activement avec ses utilisateurs crée un sentiment de transparence et de fiabilité. Les utilisateurs se sentent accompagnés, ce qui augmente leur satisfaction et leur engagement.

• Expérience cohérente et moderne : Les notifications dynamiques, comme celles utilisées dans les applications mobiles ou les sites web modernes, répondent aux attentes des utilisateurs en matière d’interactivité et de réactivité.

Comment implémenter des notifications dans votre portail ?

1. Code HTML du widget

<div ng-if="notifications.length > 0" class="tw-fixed tw-bottom-8 tw-right-8">
  <div class="tw-flex tw-flex-col tw-space-y-2 tw-justify-end">
    <div class="tw-text-[16px] tw-rounded-md tw-bg-black tw-px-5 tw-py-3 tw-text-white tw-inline-flex tw-items-center tw-justify-center tw-space-x-2"
         ng-repeat="notification in notifications">
      <div>
        <span ng-if="notification.type == 'success'" class="tw-text-[20px] tw-mt-2 tw-text-green-500 material-icons-outlined">check</span>
      </div>
      <div class="tw-flex-1 tw-min-w-96">
        {{ notification.message }}
      </div>
      <div>
        <button ng-click="onHideMessage(notification.id)">
          <span class="material-icons-outlined tw-text-[20px] tw-mt-2 tw-text-white/90 hover:tw-text-white">close</span>
        </button>
      </div>
    </div>
  </div>
</div>

• ng-if="notifications.length > 0" : Affiche le conteneur uniquement s’il y a des notifications.

• ng-repeat="notification in notifications" : Parcourt la liste des notifications.

• Bouton de fermeture : Appelle onHideMessage(notification.id) pour supprimer une notification.

Note: le code html utilise la librairie Tailwind CSS pour le style

2. Client Script pour gérer les notifications

Le client script écoute l'évènement snowlab.notification.push envoyé au $rootScope pour ajouter des notifications.

api.controller=function($scope, $timeout, $rootScope) {
  // Initialisation du tableau de notifications
  $scope.notifications = [];
  
  // Écoute l'événement 'snowlab.notification.push'
  $rootScope.$on('snowlab.notification.push', function(event, data) {
      data['id'] = new Date().toISOString();
      $scope.notifications.push(data);
      
      // Supprime automatiquement la notification après 3 secondes
      if ($scope.notifications.length > 0) {
          $timeout(function() {
              $scope.notifications.splice(0, 1);
          }, 3000);
      }
  });
  
  // Fonction pour supprimer une notification
  $scope.onHideMessage = function(id) {
      $scope.notifications = $scope.notifications.filter(function(notification) {
          return notification.id !== id;
      });
  };
};

Explications :

• $rootScope.$on('snowlab.notification.push', ...) : Écoute les événements de notification émis depuis d’autres widgets.

• data['id'] = new Date().toISOString() : Ajoute un identifiant unique à chaque notification.

• $timeout : Supprime automatiquement la notification après 3 secondes.

• $scope.onHideMessage(id) : Supprime une notification manuellement.

Exemple : déclencher une notification

Pour envoyer une notification depuis un autre widget, utilisez ce code dans la partie client script :

$rootScope.$broadcast('snowlab.notification.push', {
    message: 'Favori sauvegardé',
    type: 'success'
});

Explications :

• $rootScope.$broadcast : Émet un événement global que le client script écoute.

• message : Texte affiché dans la notification.

• type : Définit le style (ex: success, error).