Desenvolvimento de widgets personalizados

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 4 min. de leitura

    • Desenvolva widgets personalizados para portais usando AngularJS, Bootstrap e ServiceNow API.

    Antes de começar

    Para desenvolver widgets, você precisa ServiceNow Experiência de API para:
    • Execute consultas de registro no servidor.
    • Criar e atualizar registros.
    AngularJS Experience para:
    • Vincular variáveis a controladores de cliente.
    • Acesse objetos do servidor em um widget.
    • Colete entrada do usuário.

    Como opção, você pode criar no modelo de inicialização acessando Componentes de inicialização.

    Partes de um widget

    Como as diretivas Angular, os widgets executam um comportamento especificado em um Portal de serviços página. Um widget inclui componentes de script obrigatórios e opcionais.

    Modelo HTML

    Um componente de widget obrigatório.

    O modelo HTML requer conhecimento de AngularJS para exibir e coletar dados. Use o modelo HTML para:

    • Renderize a exibição dinâmica que um usuário vê no navegador usando informações do modelo e do controlador.
    • Vincule variáveis de client script à sua marcação.
    • Colete dados do usuário final.
    Client script

    Um componente de widget obrigatório.

    Um client script requer conhecimento de ambos ServiceNow AngularJS para criar um controlador de cliente. Use o client script para:

    • Mapeie dados do servidor de objetos JavaScript e JSON para objetos de cliente.
    • Processe dados antes de renderizá-los.
    • Passar dados para o modelo HTML.
    • Repasse a entrada do usuário e os dados de volta para o servidor para processamento.
    Script do servidor

    Um componente de widget obrigatório.

    Um script de servidor requer conhecimento do ServiceNow API para trabalhar com dados de registro. Use o script do servidor para:

    • Defina o estado inicial do widget.
    • Enviar dados do registro para o script do cliente do widget usando dados variável.
    • Execute consultas do lado do servidor.
    Função de link

    Um componente de widget opcional.

    A função de link requer conhecimento de AngularJS. Use uma função de link para manipular diretamente o DOM.

    Esquema de opções

    Um componente de widget opcional.

    Permite um Portal de serviços administrador para configurar um widget. Use o esquema de opção para:

    • Especifique os parâmetros para um widget.
    • Permita que os usuários administradores definam opções de instância para uma instância de widget.
    • Desenvolva widgets flexíveis e reutilizáveis.
    Provedores em angular

    Um componente de widget opcional.

    Os provedores Angular exigem conhecimento de AngularJS. Use provedores Angular para:

    • Mantenha widgets sincronizados ao mudar registros ou filtros.
    • Compartilhar contexto entre widgets.
    • Manter e persistir estado.
    • Crie comportamentos reutilizáveis e componentes de IU e injete-os em vários widgets.
    Dependências

    Um componente de widget opcional.

    Uma dependência de widget é um recurso externo usado pelo widget, como arquivos JavaScript ou CSS.

    Objetos globais em widgets

    Quando um widget começa a ser renderizado pela primeira vez em uma página, o script do servidor é executado primeiro e acessa três objetos globais: entrada , opções e dados . . entrada a variável é um objeto de dados enviado do script do cliente. esta variável não está definida quando inicializada pela primeira vez.

    Variáveis disponíveis no server e client script global

    Quando um widget é instanciado pela primeira vez, o script do servidor:

    1. Inicializa um vazio dados objeto.
    2. Inicializa o. entrada objeto com todos os dados enviados do controlador do cliente ou do opções objeto com todos os dados usados para inicializar o widget.
    3. Envia o. dados Objeto para o controlador do cliente como JSON.

    O client script:

    1. Acessa o servidor dados objeto usando c.data .

      Nota:
      Por padrão, os widgets usam c variável para representar a instância do controlador usando controlador sintaxe. Você pode mudar esta variável ao criar ou clonar widgets.

    2. Usos server.update() para publicar mudanças no modelo de dados. Este método atualiza o script do servidor usando entrada objeto.

      Nota:
      Depois de ligar server.update() , o client script dados o objeto é substituído automaticamente pelo script do servidor dados objeto.
    3. Usos c.opções para acessar os valores usados para invocar o widget no servidor. Este objeto é somente leitura.

    Usando o Editor de widgets

    Quando você cria um widget, um registro é criado na tabela sp_widget. No entanto, você pode usar o Editor de widgets no Portal de serviços Configuração como seu ambiente de script. O Editor de Widget é uma aplicação de página inteira semelhante a um IDE. Você pode mostrar as partes do widget que deseja editar e ocultar o restante, enquanto visualiza suas mudanças em tempo real.

    Nota:
    Para scripts do lado do servidor, você pode ativar usando o modo JavaScript ECMAScript 2021 (ES12) se sua aplicação usar o modo de padrões ES5 ou o modo de compatibilidade. Scripts em aplicações com o modo JavaScript definido como ECMAScript 2021 (ES12) usam ECMAScript 2021 (ES12) por padrão. Para obter mais informações, consulte Turn on ECMAScript 2021 (ES12) mode for a script.

    Editor de widgets IDE