Widgets incorporés

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 incorporer un widget dans un modèle HTML. Transmettez l’ID du widget que vous essayez d’incorporer en tant que paramètre.

<div>
    <widget id="widget-cool-clock"></widget>
</div>

Si un widget dispose d’un schéma d’option, vous pouvez définir des 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 incorpore le widget Horloge cool :

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 incorpore le widget Horloge cool :

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 comme 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 placez 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 Script client de widget.
Css	chaîne	Sortie CSS compilée à partir du champ SASS du widget.
données	objet	Objet de données contenant des clés et des valeurs du script de serveur de widgets.
dépendances	tableau	Toutes les bibliothèques tierces à 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.

Incorporer un widget plusieurs fois avec des options personnalisées

Incorporez le widget d’horloge cool 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 d’horloge cool 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 les options mises en surbrillance

Procédure

1. Clonez le widget Horloge cool avec le nom Horloge intégrée.
2. Remplacez les blocs de code par les éléments suivants :
   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ée s’affiche avec un fuseau horaire différent.

Figure 2. Options d’exemple d’horloge