Cloner un widget

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 1 minute de lecture

    • Tirez parti du code existant en clonant et en modifiant un widget existant.

    Avant de commencer

    Rôle requis : admin ou sp_admin

    Pourquoi et quand exécuter cette tâche

    Remarque :
    Les widgets du système de base sont en lecture seule afin que vous puissiez profiter des futures mises à jour. Pour apporter des modifications, vous pouvez cloner des widgets du système de base. Cependant, les widgets clonés sont considérés comme des widgets personnalisés et ne bénéficient pas des futures mises à jour apportées aux widgets à partir desquels ils ont été clonés.

    Procédure

    1. Ouvrez l’éditeur de widget dans la page de configuration de Service Portal, puis sélectionnez un widget existant dans la liste Sélectionner un widget .
      Par exemple, sélectionnez Hello World 2.
    2. Dans le menu de liste dans l’en-tête du widget, cliquez sur Cloner « Hello World 2 ».
      Figure 1. Cloner un widget
      Cloner un formulaire Widget
    3. Saisissez un nom pour le widget cloné.
      L’ID du widget est créé automatiquement en fonction du nom du widget.
    4. Facultatif : Sélectionnez Créer une page de test pour créer automatiquement une page contenant le widget.
    5. Utilisez les cases à cocher pour afficher ou masquer les différents composants de l’éditeur de widget selon vos besoins.

      Apportez des modifications au modèle HTML, au CSS, au script client, au script serveur ou à la fonction de lien.

      Figure 2. Clone de Hello World 2
      Widget Hello World 2 cloné et modifié pour dire « Hola, mundo »
    6. Pour activer un aperçu de votre widget, utilisez l’option Activer l’aperçu dans le menu.
      Utilisez l’icône en forme dœil qui apparaît pour afficher ou masquer un aperçu de votre widget.

    Que faire ensuite

    Si vous clonez un widget qui utilise le modèle Angular ng-template, vous devez cloner manuellement le modèle et modifier le nom de la référence du modèle dans le widget.

    Par exemple, le widget de menu d’en-tête utilise le menuTemplate ng-template angulaire. Si vous clonez le widget de menu d’en-tête, vous devez également cloner le menuTemplate et lui attribuer un nom unique. Lorsque vous ouvrez le clone du widget de menu d’en-tête, vous pouvez voir une référence au menuTemplate dans le code HTML.

    Figure 3. menuTemplate dans le widget d’en-tête HTML
    ng-template appelé menuTemplate mis en surbrillance et remplacé par menuTemplateCopy dans le widget de menu d’en-tête HTML