---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Widgets incorporados

# Widgets incorporados {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Incorpore um widget no modelo HTML, script do servidor ou script do cliente.

## Incorporar um widget em um modelo HTML {#c_NestedWidgets__section_bwv_nqw_q1b}

Use o. `<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 widgets.

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 script de cliente {#c_NestedWidgets__section_txc_xjd_k1b}

Uso [SPUtil.get()](https://www.servicenow.com/docs/access?context=spUtilAPI&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US)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 script de cliente de widget, você deve injetar a classe na função de script do cliente. 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 {#c_NestedWidgets__section_s1k_xjd_k1b}

Uso [.GetWidget()](https://www.servicenow.com/docs/access?context=c_GlideSPScriptableScopedAPI&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US)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 {#c_NestedWidgets__section_x3x_dkd_k1b}

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.  
{#c_NestedWidgets__table_jr3_vhp_jw__entry__3}

| 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 | Todas as 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. |
[ ]

{#c_NestedWidgets__table_jr3_vhp_jw}

## Incorpore um widget várias vezes com opções personalizadas {#ariaid-title2}

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 incorpore várias instâncias do widget de relógio legal, cada um 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 script do cliente.  
Figura 1. Widget de relógio legal com opções destacadas

### Procedimento

1. Clone o widget Relógio frio com o nome <kbd class="ph userinput">Relógio integrado </kbd>.
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]));
           }
       })();

{#embed-widgets-custom-options__steps_vr2_vb4_q1b}

### 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 ![Relógio incorporado com quatro widgets incorporados com quatro fusos horários diferentes]()