Widgets incorporados

Incorporar um widget no modelo HTML, script de servidor ou client script.

Incorporar um widget em um modelo HTML

Use <widget> </widget> Elemento para incorporar um widget em um modelo HTML. Passe o ID do widget que você está tentando incorporar como parâmetro.

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

Se um widget tiver um esquema de opção, você poderá definir opções de instância no formato JSON.

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

Como alternativa, você pode definir opções no script do servidor de widget.

Modelo HTML

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

Script do servidor

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

Incorporar um widget em um client script

Usar SpUtil.get() para obter um modelo de widget no script do cliente.

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

Ao usar o. SpUtil em um client script de widget, você deve injetar a classe na função client script. O exemplo a seguir incorpora o widget Relógio frio:

Client script

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

Modelo HTML

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

Incorporar um widget em um script de servidor

Usar Sp.getWidget() para obter um modelo de widget no script do servidor.

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

O exemplo a seguir incorpora o widget Relógio frio:

Script do servidor

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

Modelo HTML

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

Propriedades do modelo de widget

Quando um modelo de widget é chamado de dentro de outro widget, o modelo HTML, o script do cliente e a função de link são carregados exatamente como estão no registro sp_widget. A propriedade de dados é o resultado da execução do script do servidor de widget. Qualquer coisa que você colocar no objeto de dados no servidor estará disponível no objeto de dados no cliente.

Nome da propriedade	Tipo	Descrição
client_script	cadeia de caracteres	Campo de script do cliente do widget.
css	cadeia de caracteres	Saída CSS compilada do campo SASS para o widget.
dados	objeto	Objeto de dados que contém chaves e valores do script do servidor de widget.
dependências	matriz	Bibliotecas de terceiros a serem carregadas antes da execução do widget.
opções	objeto	Opções usadas para inicializar o widget.
modelo	cadeia de caracteres	Campo de modelo HTML para o widget.

Incorporar um widget várias vezes com opções personalizadas

Incorporar o widget de relógio legal várias vezes usando opções personalizadas.

Antes de Iniciar

Função necessária: administrador ou sp_admin

Por Que e Quando Desempenhar Esta Tarefa

Crie um widget que incorpore várias instâncias do widget de relógio legal, cada uma com um fuso horário e título diferentes. Abra o widget de relógio legal no Editor de widgets para ver as opções de widget referenciadas no modelo HTML e no Client Script.

Figura 1. Widget de Relógio legal com Opções realçadas

Procedimento

1. Clone o widget Relógio fresco com o nome Relógio integrado .
2. Substitua os blocos de código pelo seguinte:
   Modelo 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;
   }

   Client script

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

   Script do Servidor

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

Resultado

Cada instância do relógio no widget de relógio incorporado aparece com um fuso horário diferente.

Figura 2. Opções de relógio de amostra