Eingebettete Widgets

Betten Sie ein Widget in die HTML-Vorlage, das Serverskript oder das Clientskript ein.

Betten Sie ein Widget in eine HTML-Vorlage ein

Verwenden Sie das Element <widget></widget>, um ein Widget in eine HTML-Vorlage einzubetten. Übergeben Sie die ID des Widgets, das Sie als Parameter einbetten möchten.

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

Wenn ein Widget über ein Optionsschema verfügt, können Sie Instanzoptionen im JSON-Format definieren.

<widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>

Alternativ können Sie Optionen im Widget-Serverskript definieren.

HTML-Vorlage

<widget id="widget-cool-clock" options='data.clockOptions'></widget>

Serverskript

(function() {
  data.clockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"};
})();

Betten Sie ein Widget in ein Clientskript ein

Verwenden SpUtil.get() Um ein Widget-Modell im Client-Skript abzurufen.

spUtil.get("widget-sc-cat-item", {sys_id: "your_catalog_item_sys_id"}).then(function(response) {
    c.catalogItemWidget = response;
});

Bei Verwendung der Klasse spUtil in einem Widget-Clientskript müssen Sie die Klasse in die Clientskriptfunktion einfügen. Im folgenden Beispiel wird das Cool Clock-Widget eingebettet:

Clientskript

function(spUtil) {
    var c = this;
    spUtil.get("widget-cool-clock").then(function(response) {
            c.myClockWidget = response;
    });
}

HTML-Vorlage

<sp-widget widget="c.myClockWidget"></sp-widget>

Betten Sie ein Widget in ein Serverskript ein

Verwenden $sp.getWidget() Um ein Widget-Modell im Serverskript abzurufen.

data.catalogItemWidget = $sp.getWidget("widget-sc-cat-item");

Im folgenden Beispiel wird das Cool Clock-Widget eingebettet:

Serverskript

(function() {
    var coolClockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"}
    data.coolClockWidget = $sp.getWidget('widget-cool-clock', coolClockOptions);
})();

HTML-Vorlage

<sp-widget widget="data.coolClockWidget"></sp-widget>

Widget-Modelleigenschaften

Wenn ein Widget-Modell von einem anderen Widget aus aufgerufen wird, werden die HTML-Vorlage, das Clientskript und die Verknüpfungsfunktion genauso wie im Datensatz sp_widget geladen. Die Dateneigenschaft ist das Ergebnis der Ausführung des Widget-Serverskripts. Alles, was Sie dem Datenobjekt auf dem Server hinzufügen, ist im Datenobjekt des Clients verfügbar.

Eigenschaftsname	Typ	Beschreibung
client_script	String	Widget-Clientskriptfeld.
css	String	Kompilierte CSS-Ausgabe aus dem SASS-Feld für das Widget.
Daten	Objekt	Datenobjekt, das Schlüssel und Werte aus dem Widget-Serverskript enthält.
Abhängigkeiten	array	Alle Bibliotheken von Drittanbietern, die geladen werden sollen, bevor das Widget ausgeführt wird.
Optionen	Objekt	Optionen zum Initialisieren des Widgets.
Vorlage	String	HTML-Vorlagenfeld für das Widget.

Betten Sie ein Widget mehrmals mit benutzerdefinierten Optionen ein

Betten Sie das Cool Clock-Widget mehrmals mit benutzerdefinierten Optionen ein.

Vorbereitungen

Erforderliche Rolle: admin oder sp_admin

Warum und wann dieser Vorgang ausgeführt wird

Erstellen Sie ein Widget, das mehrere Instanzen des Cool Clock-Widget mit unterschiedlichen Zeitzonen und Titeln enthält. Öffnen Sie das Widget „Cool Clock“ im Widget-Editor, um Widget-Optionen anzuzeigen, auf die in der HTML-Vorlage und im Clientskript verwiesen wird.

Abbildung : 1. Cool Clock-Widget mit hervorgehobenen Optionen

Prozedur

1. Klonen Sie das Cool Clock-Widget mit dem Namen Eingebettete Uhr.
2. Ersetzen Sie die Codeblöcke durch Folgendes:
   HTML-Vorlage

   <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;
   }

   Clientskript

   function() {
       // nothing to do here...
   }

   Serverskript

   (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]));
       }
   })();

Ergebnisse

Jede Instanz der Uhr im eingebetteten Uhr-Widget wird mit einer anderen Zeitzone angezeigt.

Abbildung : 2. Beispiel für Uhroptionen