Créer un widget qui affiche une page de l’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 pas une liste ou 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 Créer 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 de l’interface utilisateur ServiceNow que vous souhaitez afficher sous forme de widget.
   Notez le nom de cette page de l’interface utilisateur, à utiliser à l’étape 4. Le nom de page d’interface utilisateur est la valeur du champ de nom dans le formulaire dans lequel 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égorie de widget, 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	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 spécifiés.
   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 apparaît également sur l’en-tête du widget. Cette valeur est le nom que vous configurez à l’étape 3.
   UI_page_name	Le 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