Widgets incorporés

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

    • Incorporez un widget dans un modèle HTML, un script serveur ou un 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 dispose d’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;
});

    Lors de l’utilisation de 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 sp_widget. La propriété de données 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 de script client de widget.
    CSS chaîne Compilation de la sortie CSS à partir du champ SASS pour le widget.
    données objet Objet de données contenant des clés et des valeurs provenant du script du serveur de widgets.
    dépendances tableau Toutes les bibliothèques tierces à charger avant que le widget ne s’exécute.
    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 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 d’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 Horloge cool avec le nom Horloge incorporé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 incorporé apparaît avec un fuseau horaire différent.

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