Como desenvolver widgets personalizados

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 4 min. de leitura

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

    Antes de começar

    Para desenvolver widgets, você precisa de ServiceNow experiência em API para:
    • Executar consultas de registro no servidor.
    • Criar e atualizar registros.
    Você precisa de experiência em AngularJS para:
    • Vincule variáveis a controladores de cliente.
    • Acessar objetos do servidor em um widget.
    • Reúna a entrada do usuário.

    Opcionalmente, você pode criar no modelo de inicialização acessando os componentes de inicialização.

    Partes de um widget

    Como as diretivas angulares, os widgets executam um comportamento especificado em uma página Portal de serviços. 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.
    • Reúna dados do usuário final.
    Client script

    Um componente de widget obrigatório.

    Um client script requer conhecimento da API ServiceNow e do AngularJS para criar um controlador de cliente. Use o client script para:

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

    Um componente de widget obrigatório.

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

    • Defina o estado inicial do widget.
    • Envie dados de registro para o client script do widget usando a variável de dados.
    • Executar consultas do lado do servidor.
    Função de link

    Um componente de widget opcional.

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

    Esquema de opções

    Um componente de widget opcional.

    Permite que um administrador Portal de serviços configure um widget. Use o esquema de opções para:

    • Especifique os parâmetros para um widget.
    • Permita que 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 angulares exigem conhecimento do AngularJS. Use provedores angulares para:

    • Mantenha os widgets sincronizados ao alterar registros ou filtros.
    • Compartilhar contexto entre widgets.
    • Manter e persistir o estado.
    • Crie comportamentos reutilizáveis e componentes de IU e os injete 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çõese dados. Como a variável de entrada é um objeto de dados enviado do script do cliente, essa variável é indefinida quando inicializada pela primeira vez.

    Variáveis disponíveis no script global do servidor e do cliente

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

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

    O client script:

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

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

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

      Nota:
      Depois de chamar server.update(), o objeto de dados do script do cliente é substituído automaticamente pelo objeto de dados do script do servidor.
    3. Usa c.options para acessar os valores usados para invocar o widget no servidor. Este objeto é somente leitura.

    Como usar o Editor de widgets

    Quando você cria um widget, um registro é criado na tabela sp_widget. No entanto, você pode usar o Editor de widget na configuração Portal de serviços como seu ambiente de script. O Editor de widgets é 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 a sua aplicação usar o modo ES5 Standards ou o modo Compatibility. 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.

    IDE do editor de widgets