ServiceNow, c’est avant tout un outil de collaboration et le principal canal de communication entre les opérateurs (équipe de support IT par exemple) et les utilisateurs reste le portail d’entreprise.


Depuis l’arrivée de la dernière version du portail, plus de 40% des incidents créés chez nos clients sont faits depuis le service portal.

La principale richesse du portail de ServiceNow est amenée grâce à son côté très modulaire. En effet ServiceNow permet de réaliser une page du portail grâce à plusieurs briques que sont les widgets.

Nous nous sommes récemment heurtés à un souci dans l’élaboration d’une page spécifique pour un client fournisseur de matériels télécom.

Dans la mise en place de cette page, nous avions besoin de synchroniser plusieurs widgets. Suivant le principe de Séparation des préocupations1, les widgets sont encapsulés, ainsi leur communication nécessaires dans beaucoup de cas ne pourra se faire qu’en faisant appel à des fonction de communication qu’on vous présent ci-après.

Cette communication peut être fait via les méthodes AngularJS suivantes :

$broadcast
$emit
$on

Dans cet article nous prendrons comme exemple la communication entre deux widgets custom que nous avons développés :

  • Un widget d’approbation
  • Un widget de devis

L’objectif dans ce cas précis est de faire approuver, rejeter ou revoir un devis générer pour un client sur le portail ServiceNow.

La nécessité de faire communiquer ces deux widgets, vient du besoin de vérifier si le champ « Notes de travail » est bien rempli avant le rejet d’un devis.

Ainsi au clic sur l’un des boutons du widget d’approbation, un événement est créé grâce à la méthode $broadcast et le type d’approbation envoyé comme donnée : approved, rejected, review.

Dans le cas du review, le champs « notes de travail » est vérifié, pour savoir si celui-ci est vide ou non.

Comment avons-nous procédé ?

  1. Widget 1 : Approval Task widget
    • Coté visuel

    • Coté Script

Une fonction est créée : mafonction, qui prend comme paramétre le type d’approbation.

Sur la premiére ligne, la méthode angularJs $broadcast est appelée pour déclencher un événement.

Cette méthode prend deux parametres :

  • Le premier, le nom de l’évenement
  • Le second, les données à transmettre

Cette fonction est appelée sur au clic sur un bouton, l’évenement définit, dans notre cas « reviewEvent » est déclenché.

Pour intercepter l’évenement et recupérer le message envoyer, nous allons utiliser le widget form.

  1. Widget 2 : Form
    • Coté visuel

Dans ce cas si, la méthode AngularJS $on est utilisée pour intercepter l’évènement.

Il reçoit en paramètre le nom de l’evènement et une fonction pour traiter les données recues.

Avec la méthode $scope.data.f._fields, nous pouvons récupérer la valeur de du champ « notes de travail » et voir s’il est vide ou non.

Dans le cas ou le champ est vide et que le message reçu par l’evenement est « review », un message d’erreur est affiché et le formulaire n’est pas soumis, sinon on sauvegarde le formulaire.

Leave Comment

Your email address will not be published. Required fields are marked *