---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Remplacer un script de Catalogue de services formulaire par un widget

# Remplacer un script de Catalogue de services formulaire par un widget {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Vous pouvez utiliser des widgets pour Portail de services remplacer les macros d'interface utilisateur. Si votre Catalogue de services formulaire inclut une macro d'interface utilisateur qui fait référence à d'autres champs ou variables du formulaire, vous pouvez créer un widget contenant du code réutilisable et l'intégrer au Catalogue de services formulaire. Utilisez une syntaxe spéciale pour accéder à tous les champs de variables du formulaire.

## Avant de commencer

Rôle requis : admin ou sp_admin

## Procédure

1. Créez un widget qui effectue l'action que vous souhaitez utiliser dans les formulaires d'éléments de catalogue.  
   Reportez-vous à l'étape 7 pour obtenir un exemple simple de widget qui accède à une autre variable du formulaire.
2. Ouvrez un élément de catalogue qui utilisait auparavant une macro d'interface utilisateur ou un autre composant réutilisable non pris en charge dans Portail de services.
3. Dans les listes connexes, ajoutez une nouvelle variable à l'élément de catalogue.
4. Configurez le formulaire de variable pour ajouter le champ Widget .
5. Dans le champ Type , sélectionnez Macro.
6. Dans le champ Widget , sélectionnez un widget qui effectue l'action souhaitée.
7. **Facultatif :** Utilisez la syntaxe `$scope.page.g_form()` ou `$scope.page.field` dans le widget incorporé pour accéder aux valeurs des éléments de catalogue.  
   Cet exemple montre comment modifier la valeur d'une variable de texte sur ligne unique dont la couleur de nom est associée à l'élément de catalogue.

   Modèle HTML de widget
   :

           <div>  
             Data from catalog variable:  
             <h1>{{ c.data.message }}</h1>  
           </div>

   Script client de widget
   :

           function($scope) {  
                var c = this;  
             
                //Watch for changes in the color variable  
                $scope.$watch(function () {  
                     return $scope.page.g_form.getValue('color');  
                }, function (value) {  
                //Update local data object with data from variable  
                c.data.message = value ? 'Content of color variable: ' + value : '';  
           });  
           }  

   Vous pouvez utiliser les éléments suivants pour accéder aux champs de variable ou d'élément de catalogue :
   * `$scope.page.g_form()` : l'instance g_form sur le formulaire. Vous pouvez utiliser toutes les méthodes de g_form prises en charge décrites à la section [Scripts clients et Portail de services](https://servicenow-prod.fluidtopics.net/iHqhkJd51gEcYnK~LA9mrg "Vous pouvez utiliser des scripts clients et des scripts clients de catalogue dans le Portail de services champ Si le type d’interface utilisateur est défini sur Mobile/Portail de services ou Tous. Les scripts clients et les scripts clients de catalogue sont utilisés avec le widget de formulaire et le widget d’élément de catalogue SC, par opposition à un contrôleur client de widget."). Par exemple, `g_form.setValue('variable_name', 'new value') ;`.
   * `$scope.page.field()` : objet qui représente la variable.
   {#ui-macro-widget__ul_h44_j5x_cbb}  
   Lorsque vous ouvrez l'élément de catalogue dans le Portail de services, le widget incorporé accède aux champs de variable associés à l'élément de catalogue.