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 rentrent 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 d’infrastructure, consultez l’article de blog Créer une page d’interface utilisateur sans utiliser le modèle de page d’infrastructure 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 en tant que 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 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égorie 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 fichier 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 à l’ajout 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 script 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 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 de l’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