Widgets incorporés

Incorporer 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 comme paramètre.

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

Si un widget possède un schéma d’options, 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 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 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 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 de 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 du widget.
données	objet	Objet de données contenant les clés et les valeurs du script du 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

Intégrez 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 d’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 options en surbrillance

Procédure

1. Clonez le widget Cool Clock avec le nom Horloge intégrée.
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 intégré apparaît avec un fuseau horaire différent.

Figure 2. Exemples d’options d’horloge