Créer un widget qui affiche une page d’interface utilisateur ServiceNow

Vous pouvez créer une page d’interface utilisateur ServiceNow qui affiche une page Web. Vous pouvez ensuite ajouter cette page d’interface utilisateur à un widget qui peut être ajouté aux tableaux de bord.

Avant de commencer

Rôle requis : administrateur

Pourquoi et quand exécuter cette tâche

Une page d’interface utilisateur est une ServiceNow page qui n’est pas une liste ou un formulaire. Toutes les pages de l’interface utilisateur ne rentrent pas dans un widget. Certaines pages de l’interface utilisateur, telles que les widgets ou les gadgets de site externe, ne s’affichent pas correctement lorsqu’elles sont placées dans un tableau de bord.

Pour en savoir plus sur la création d’une page d’interface utilisateur sans utiliser de modèle de page de cadre de travail, consultez le billet de blog Création d’une page d’interface utilisateur sans utiliser le modèle de page de cadre de travail publié par un développeur de la ServiceNow communauté.

Remarque :

Cette fonctionnalité nécessite une connaissance de JavaScript.

Procédure

1. Créez ou recherchez une page d’interface utilisateur ServiceNow que vous souhaitez afficher sous forme de widget.
   Notez le nom de cette page d’interface utilisateur, à utiliser à l’étape 4. Le nom de la page d’interface utilisateur est la valeur du champ de nom dans le formulaire où vous définissez le contenu de la page d’interface utilisateur.
2. Accédez à la Interface utilisateur du système > Widgets et cliquez sur Nouveau.
   Les enregistrements de widgets sont des enregistrements de catégories de widgets, et non des enregistrements pour des widgets individuels. Lors de l’ajout d’un widget au tableau de bord, sélectionnez d’abord la catégorie, puis le widget. Le JavaScript que vous spécifiez à l’étape 4 inclut la liste des widgets à inclure dans cette catégorie.
3. Renseignez les champs suivants.

   Champ	Description
   Nom	Nom de cette catégorie de widget. Sélectionnez cette catégorie lors de l’ajout de ses widgets à un tableau de bord.
   Type de rendu	Sélectionnez JavaScript.
   Actif	Désactivez ce champ pour rendre le widget indisponible pour un ajout aux tableaux de bord.
   Rôles	Sélectionnez les rôles pouvant voir cette catégorie lors de l’ajout de widgets aux tableaux de bord. Si vous ne sélectionnez aucun rôle, tous les rôles peuvent voir la catégorie.

4. Ajoutez le JavaScript suivant dans le champ Script , en effectuant les remplacements comme spécifié.
   L’instruction de retour contient les widgets répertoriés dans cette catégorie de widget.

   Remarque :

   L’extrait de code de cette étape fonctionne dans les applications non incluses dans le périmètre. Utilisez l’extrait de code de l’étape 5 pour les applications incluses dans le périmètre.

   widget_name	Nom du widget que l’utilisateur sélectionne dans le sélecteur de widget lors de l’ajout du widget à un tableau de bord. Cette chaîne apparaît également dans l’en-tête du widget. Cette valeur est le nom que vous configurez à l’étape 3.
   UI_page_name	Nom de la page d’interface utilisateur de l’étape 1 à afficher dans le widget.

   function sections() {
       return {
           'widget_name': { 'uiPageName' : 'UI_page_name'},
           'widget_name2': {'uiPageName': 'UI_page_name_2'}
       };
   }
   
   function render() {
       var uiPageName = renderer.getPreferences().get("uiPageName");
       return renderer.getRenderedPage(uiPageName);
   }
   
   function getEditLink() {
       var uiPageName = renderer.getPreference('uiPageName');
       return 'sys_ui_page.do?sysparm_query=' + encodeURIComponent('name=' + uiPageName);
   }

5. Facultatif : Utilisez cet exemple de code pour les applications incluses dans le périmètre :

   function sections() {
       return {
       'Widget': {
       'type': 'widgetname'
       }
       };
   }
   
   function render() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return renderer.getRenderedPage(scope + page);
   }
   
   function getEditLink() {
       var scope = gs.getCurrentScopeName();
       scope = (scope == "rhino.global" ? "" : scope + "_");
       var page = renderer.getPreference('type');
       return "sys_ui_page.do?sysparm_query=name=" + scope + page;
   }

6. Cliquez sur Envoyer.

Que faire ensuite

Modifier un tableau de bord réactif