Desenvolver widgets personalizados

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 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 de API para:
    • Execute 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 de servidor em um widget.
    • Reúna as entradas do usuário.

    Opcionalmente, você pode criar no modelo de inicialização acessando os componentes de inicialização. Portal de serviços usa o Bootstrap versão 3.3.6.

    Partes de um widget

    Como as diretivas Angular, 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 scripts

    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 funcionar 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.
    • 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 que um administrador Portal de serviços configure um widget. Use o esquema de opção para:

    • Especifique os parâmetros de 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 em angular exigem conhecimento de AngularJS. Use provedores em angular para:

    • Mantenha os widgets em sincronia 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 servidor e no client script global

    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 quaisquer dados enviados do controlador do cliente ou o objeto de opções com quaisquer dados usados para inicializar o widget.
    3. Envia o objeto de dados para o controlador do cliente como JSON.

    O script do cliente:

    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.

    Usando o Editor de widget

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

    Editor de widget com o widget de calculadora mostrando exemplos de script para o modelo HTML, CSS, Client script e o script do servidor