Cloner un widget

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 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 sur la page Configuration de Portail de services, puis sélectionnez un widget existant dans la liste Sélectionner un widget .
      Par exemple, sélectionnez Hello World 2.
    2. Dans le menu Liste de l’en-tête du widget, cliquez sur Cloner « Hello World 2 ».
      Figure 1. Cloner un widget
      Formulaire Cloner un widget
    3. Saisissez un nom pour le widget cloné.
      L’ID de 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.

      Remarque :
      Pour les scripts côté serveur, vous pouvez activer le mode JavaScript ECMAScript 2021 (ES12) si votre application utilise le mode ES5 Standards ou le mode Compatibilité. Les scripts dans les applications dont le mode JavaScript est défini sur ECMAScript 2021 (ES12) utilisent ECMAScript 2021 (ES12) par défaut. Pour plus d'informations, consultez Turn on ECMAScript 2021 (ES12) mode for a script.
      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 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 modèle Angular ng-template menuTemplate. Si vous clonez le widget Menu d’en-tête, vous devez également cloner 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 changé en menuTemplateCopy dans le widget de menu d’en-tête HTML