--- 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 --- # Desenvolvendo widgets personalizados # Desenvolvendo widgets personalizados {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura Desenvolva widgets personalizados para portais usando AngularJS, Bootstrap e o. ServiceNowAPI. ## Antes de começar {#widget-dev-guide__section_xrx_qf2_kz} Para desenvolver widgets, você precisa ServiceNowExperiência de API para: * Execute consultas de registro no servidor. * Crie e atualize registros. {#widget-dev-guide__ul_bs4_rch_j1b} Você precisa do AngularJS Experience para: * Vincular variáveis a controladores de cliente. * Objetos do servidor de acesso em um widget. * Reúna entrada do usuário. {#widget-dev-guide__ul_hmf_5ch_j1b} Como opção, você pode criar no modelo do Bootstrap acessando Componentes do Bootstrap. ## Partes de um widget {#widget-dev-guide__section_gpd_lkw_h1b} Como as diretivas Angular, os widgets executam um comportamento especificado em um Portal de serviçospá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 script do cliente à sua marcação. * Reúna dados do usuário final. {#widget-dev-guide__ul_chb_mdh_j1b} Client script : Um componente de widget obrigatório. Um client script requer conhecimento de ambos ServiceNowAngularJS 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. * Passe dados para o modelo HTML. * Passe a entrada e os dados do usuário de volta para o servidor para processamento. {#widget-dev-guide__ul_elh_d2h_j1b} Script do servidor : Um componente de widget obrigatório. Um script de servidor requer conhecimento do ServiceNowAPI para trabalhar com dados de registro. Use o script do servidor para: * Defina o estado inicial do widget. * Envie dados de registro para o script do cliente do widget usando dados variável. * Execute consultas no lado do servidor. {#widget-dev-guide__ul_n5p_42h_j1b} 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çosadministrador para configurar um widget. Use o esquema de opção para: * Especifique os parâmetros de 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. {#widget-dev-guide__ul_cmx_w3h_j1b} 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. {#widget-dev-guide__ul_mm2_2zq_yz} 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 {#widget-dev-guide__section_rsq_g1h_j1b} Quando um widget começa a renderizar pela primeira vez em uma página, o script do servidor é executado primeiro e acessa três objetos globais: entrada , opções e. dados . Porque 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. 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 o. opções objeto com todos os dados usados para inicializar o widget. 3. Envia o. dados Objeto para o controlador do cliente como JSON. {#widget-dev-guide__ol_sh3_btw_xz} O script do cliente: 1. Acessa o servidor dados objeto usando `c.dados `. Nota: Por padrão, os widgets usam o. 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 o. entrada objeto. Nota: Depois de ligar `server.update() `, o script do cliente 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. {#widget-dev-guide__ol_mjs_jtw_xz} ## Usando o Editor de widgets {#widget-dev-guide__section_dsy_kch_j1b} Quando você cria um widget, um registro é criado na tabela sp_widget. No entanto, você pode usar o Editor de widgets em Portal de serviçosConfiguração 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 sua aplicação usar o modo de padrões ES5 ou o modo de compatibilidade. Os 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](https://www.servicenow.com/docs/access?context=set-es12-mode-scripts&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US).
* **[Diretrizes gerais para desenvolver widgets](https://servicenow-prod.fluidtopics.net/aw961zJMWdx7Hx1M47C9fA)** Ao desenvolver widgets personalizados, lembre-se dessas diretrizes gerais para obter desempenho ideal, desenvolvimento escalável e uma boa experiência do usuário. * **[Tutorial: Criar um widget personalizado](https://servicenow-prod.fluidtopics.net/5~EXHWos209mD9iEeCw7Jg#adv-widget-tutorial)** Siga este tutorial para criar um widget personalizado que é exibido Catálogo de serviçositens. Use este tutorial como um modelo para ajudar você a entender o poder de script avançado do Portal de serviços. * **[Clone um widget](https://servicenow-prod.fluidtopics.net/M1xLK~1NlVn7RPA~cbwRzA)** Aproveite o código existente clonando e editando um widget existente. * **[Criar um novo widget](https://servicenow-prod.fluidtopics.net/lmwUFmhUvYDoXW97L~rVNQ)** Crie um novo widget para criar um widget personalizado do zero. * **[Esquema de opção de widget](https://servicenow-prod.fluidtopics.net/RaM0IqnQwGAg55uu_H1cQg#c_WidgetInstanceOptions)** As instâncias de widget permitem que os usuários configurem exclusivamente cada widget que adicionam a uma página. Use o esquema de opção para definir os parâmetros do widget. * **[Referência da API do widget](https://servicenow-prod.fluidtopics.net/M61OENqAdLDkpT60iVEIWw#widget-api-reference)** Portal de serviços Inclui APIs do lado do cliente e do servidor para usar nos scripts do cliente e do servidor do widget. * **[Reutilize componentes com provedores Angular](https://servicenow-prod.fluidtopics.net/kltsVUivsEdkbQZM0_jy9Q)** Os provedores Angular são componentes reutilizáveis que podem ser injetados em vários widgets. Para garantir o carregamento rápido de widgets e um portal de alto desempenho, crie provedores Angular em vez de sobrecarregar seus controladores de cliente com dados persistentes e lógica adicional. Com os provedores Angular, você pode manter dados durante toda a vida útil do seu Portal de serviçose reutilize componentes e objetos de dados em vários widgets. * **[Widgets incorporados](https://servicenow-prod.fluidtopics.net/m8K4pfKgefl6Nni9IuYg_w#c_NestedWidgets)** Incorpore um widget no modelo HTML, script do servidor ou script do cliente. * **[Crie uma dependência de widget](https://servicenow-prod.fluidtopics.net/rGsyGwWVxVZ4BbO85YkcOQ)** No Portal de serviços, você pode vincular arquivos JavaScript e CSS a widgets para criar dependências entre widgets e bibliotecas de terceiros, folhas de estilo externas e módulos Angular. * **[Internacionalize um widget](https://servicenow-prod.fluidtopics.net/59C9pJPQ~BTMjnXwPShAwA)** Use o. `. `ou `gs.getMessage() `sintaxe no Modelo HTML , Script do cliente , ou Script do servidor campos de um widget para marcar cadeias de caracteres para tradução para que você possa localizar seu Portal de serviçosconteúdo. * **[Substitua um Catálogo de serviçosscript de formulário com um widget](https://servicenow-prod.fluidtopics.net/g3tUO~JO8qc4EnPbOxY9kA)** 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. * **[Guia de solução de problemas do widget](https://servicenow-prod.fluidtopics.net/rlwYe~ooOpdvU2z~7xwYpw)** Use as ferramentas a seguir para investigar e resolver comportamento inesperado em seu personalizado Portal de serviçoswidgets.