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 : admin

Pourquoi et quand exécuter cette tâche

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

Pour savoir comment créer une page d’interface utilisateur sans utiliser de modèle de page de cadre de travail, consultez le billet de blog d’un développeur de la communauté sur la création d’une page d’interface utilisateur sans utiliser leServiceNow modèle de page de cadre de travail.

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 en tant que widget.
   Notez le nom de cette page de l’interface utilisateur, à utiliser à l’étape 4. Le nom de la page de l’interface utilisateur est la valeur du champ de nom dans le formulaire où vous définissez le contenu de la page de l’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égorie de widget, et non des enregistrements de 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	Effacez ce champ pour rendre le widget indisponible à ajouter aux tableaux de bord.
   Rôles	Sélectionnez les rôles qui peuvent voir cette catégorie lors de l’ajout de widgets à des 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 return contient les widgets répertoriés dans cette catégorie de widgets.

   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.

   Tableau 1.

   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 s’affiche également sur 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