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


---

# Substitua um Catálogo de serviçosscript de formulário com um widget

# Substitua um Catálogo de serviçosscript de formulário com um widget {#ariaid-title1}

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

Você pode usar widgets em Portal de serviçosPara substituir macros de IU. . Catálogo de serviçosO formulário inclui uma macro de IU que faz referência a outros campos ou variáveis no formulário. Você pode criar um widget para armazenar código reutilizável e incorporá-lo no Catálogo de serviçosformulário. Use uma sintaxe especial para acessar todos os campos de variáveis no formulário.

## Antes de Iniciar

Função necessária: administrador ou sp_admin

## Procedimento

1. Crie um widget que execute a ação que você deseja usar nos formulários de item do catálogo.  
   Consulte a etapa 7 para obter um widget de exemplo simples que acessa outra variável no formulário.
2. Abra um item do catálogo que usou anteriormente uma macro de IU ou outro componente reutilizável não compatível com Portal de serviços.
3. Nas listas relacionadas, adicione uma nova variável ao item do catálogo.
4. Configure o formulário de variável para adicionar o. Widget campo.
5. Em Tipo campo, selecione Macro .
6. Em Widget selecione um widget que executa a ação desejada.
7. **Opcional:** Use o. `escopo.page.g_form() `ou `scope.page.field `sintaxe no widget incorporado para acessar os valores do item do catálogo.  
   Este exemplo mostra como modificar o valor de uma variável de texto de linha única com o nome cor associado ao item do catálogo.

   Modelo HTML do widget
   :

           <div>  
             Data from catalog variable:  
             <h1>{{ c.data.message }}</h1>  
           </div>

   Script do cliente do widget
   :

           function($scope) {  
                var c = this;  
             
                //Watch for changes in the color variable  
                $scope.$watch(function () {  
                     return $scope.page.g_form.getValue('color');  
                }, function (value) {  
                //Update local data object with data from variable  
                c.data.message = value ? 'Content of color variable: ' + value : '';  
           });  
           }  

   Você pode usar o seguinte para acessar campos de variável ou item do catálogo:
   * `escopo.page.g_form() `: A instância g_form no formulário. Você pode usar todos os métodos g_form compatíveis descritos em [Scripts do cliente e do portal de serviços](https://servicenow-prod.fluidtopics.net/hMuc1rgqgxIbDlSJ_HSxGg "Você pode usar scripts de cliente e scripts de cliente de catálogo no Portal de serviçosSe o Tipo de IU estiver definido como Portal de serviços/celular ou Todos . Scripts de cliente e scripts de cliente de catálogo são usados com o widget de formulário e o widget de item do catálogo SC, em vez de um controlador de cliente de widget."). Por exemplo, `g_form.setValue('variable_name', "novo valor"); `.
   * `escopo.page.field() `: O objeto que representa a variável.
   {#ui-macro-widget__ul_h44_j5x_cbb}  
   Quando você abre o item do catálogo no Portal de serviços, o widget incorporado acessa os campos de variáveis associados ao item do catálogo.