Widgets integrados

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

Incorporar um widget em um modelo HTML

Usar o<widget></widget> elemento para incorporar um widget em um modelo HTML. Passe o ID do widget que você está tentando incorporar como um 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

Use 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 a classe spUtil em um client script do widget, você deve injetar a classe na função do client script. O exemplo a seguir incorpora o widget Relógio legal:

Client scripts

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

Use $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 legal:

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 client script do widget.
css	Cadeia de caracteres	Saída de 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	Quaisquer 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

Incorpore 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 integre várias instâncias do widget de relógio legal, cada uma com um fuso horário e um título diferentes. Abra o widget de relógio legal no Editor de widget 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 de relógio legal 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 exemplo