Widgets incorporés

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 2 minutes de lecture

    • Incorporez un widget dans le modèle HTML, le script serveur ou le script client.

    Incorporer un widget dans un modèle HTML

    Utilisez l’élément <widget></widget> pour intégrer un widget dans un modèle HTML. Transmettez l’ID du widget que vous essayez d’intégrer en tant que paramètre.
    <div>
    <widget id="widget-cool-clock"></widget>
</div>
    Si un widget possède un schéma d’option, vous pouvez définir les options d’instance au format JSON. 
    <widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>
    Vous pouvez également définir des options dans le script du serveur de widgets.
    Modèle HTML
    <widget id="widget-cool-clock" options='data.clockOptions'></widget>
    Script serveur
    (function() {
  data.clockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"};
})();

    Incorporer un widget dans un script client

    Utilisez spUtil.get() pour obtenir un modèle de widget dans le script client.
    spUtil.get("widget-sc-cat-item", {sys_id: "your_catalog_item_sys_id"}).then(function(response) {
    c.catalogItemWidget = response;
});

    Lorsque vous utilisez la classe spUtil dans un script client de widget, vous devez injecter la classe dans la fonction de script client. L’exemple suivant intègre le widget Cool Clock :

    Script client
    function(spUtil) {
    var c = this;
    spUtil.get("widget-cool-clock").then(function(response) {
            c.myClockWidget = response;
    });
}
    Modèle HTML
    <sp-widget widget="c.myClockWidget"></sp-widget>

    Incorporer un widget dans un script de serveur

    Utilisez $sp.getWidget() pour obtenir un modèle de widget dans le script serveur. 
    data.catalogItemWidget = $sp.getWidget("widget-sc-cat-item");

    L’exemple suivant intègre le widget Cool Clock :

    Script serveur
    (function() {
    var coolClockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"}
    data.coolClockWidget = $sp.getWidget('widget-cool-clock', coolClockOptions);
})();
    Modèle HTML
    <sp-widget widget="data.coolClockWidget"></sp-widget>

    Propriétés du modèle de widget

    Lorsqu’un modèle de widget est appelé à partir d’un autre widget, le modèle HTML, le script client et la fonction de lien sont chargés tels qu’ils sont dans l’enregistrement sp_widget. La propriété data est le résultat de l’exécution du script du serveur de widgets. Tout ce que vous mettez sur l’objet de données sur le serveur est disponible dans l’objet de données sur le client.

    Nom de la propriété Type Description
    client_script chaîne Champ de script client de widget.
    CSS chaîne Sortie CSS compilée à partir du champ SASS pour le widget.
    données objet Objet de données contenant les clés et les valeurs du script du serveur de widgets.
    dépendances tableau Toute bibliothèque tierce à charger avant l’exécution du widget.
    options objet Options utilisées pour initialiser le widget.
    modèle chaîne Champ de modèle HTML pour le widget.

    Intégrer un widget plusieurs fois avec des options personnalisées

    Intégrez le widget Cool Clock plusieurs fois à l’aide d’options personnalisées.

    Avant de commencer

    Rôle requis : admin ou sp_admin

    Pourquoi et quand exécuter cette tâche

    Créez un widget qui intègre plusieurs instances du widget Horloge cool, chacune avec un fuseau horaire et un titre différents. Ouvrez le widget Cool Clock dans l’éditeur de widget pour afficher les options de widget référencées dans le modèle HTML et le script client.

    Figure 1. Widget Horloge cool avec options en surbrillance
    Widget Cool Clock avec c.options.title, c.options.c_color et c.options.zone en surbrillance

    Procédure

    1. Clonez le widget Cool Clock avec le nom Embedded clock.
    2. Remplacez les blocs de code par ce qui suit :
      Modèle HTML
      <div class="panel panel-default">
  <div class="panel-heading">Time across the US</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-3" ng-repeat="myClock in c.data.clocks">
        <sp-widget widget="myClock"></sp-widget>
      </div>
    </div>
  </div>
</div>
      CSS
      .panel {
    margin-top: 10px;
}
      Script client
      function() {
    // nothing to do here...
}
      Script serveur
      (function() {
    var options = [
        {zone: "America/Los_Angeles", title: "San Diego"},
        {zone: "America/Denver", title: "Denver"},
        {zone: "America/Chicago", title: "Chicago"},
        {zone: "America/New_York", title: "New York"}
    ];

    data.clocks = [];
    for (var i in options) {
        data.clocks.push($sp.getWidget("widget-cool-clock", options[i]));
    }
})();

    Résultats

    Chaque instance de l’horloge dans le widget d’horloge incorporé apparaît avec un fuseau horaire différent.

    Figure 2. Options d’horloge d’exemple
    Horloge intégrée avec quatre widgets intégrés avec quatre fuseaux horaires différents