--- 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 --- # Diretrizes gerais para desenvolver widgets # Diretrizes gerais para desenvolver widgets {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 min. de leitura Ao desenvolver widgets personalizados, lembre-se dessas diretrizes gerais para obter desempenho ideal, desenvolvimento escalável e uma boa experiência do usuário. Crie um estado padrão que forneça um exemplo para o usuário final : Um widget não tem opções de instância definidas quando adicionado inicialmente a uma página. Um widget neste estado vazio pode aparecer em branco e causar confusão. Em situações em que um widget requer alguma configuração inicial, certifique-se de que o widget tenha um estado padrão que comunique ao administrador qual configuração é necessária. Os widgets também podem ser criados com dados de demonstração. Os dados de demonstração também podem ser usados para: * Demonstre claramente a funcionalidade do widget para o usuário. * Forneça dados ao visualizar o widget no editor de widgets. (Os dados de demonstração não estão visíveis no designer). {#general-guidelines-developing-widgets__ul_r3c_nsh_l1c} Saiba mais: [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."). Incorporar um widget em vez de clonar quando possível : A incorporação de um widget existente ao widget personalizado aproveita a funcionalidade pré-existente sem clonar ou duplicar código. Você ainda pode passar parâmetros para o widget incorporado para controlar seu comportamento. Saiba mais: [Incorporar um widget existente](https://servicenow-prod.fluidtopics.net/5~EXHWos209mD9iEeCw7Jg#embed-widget "Permita que o usuário exiba e compre Catálogo de serviçosItens no widget Pedido rápido incorporando o widget Item do catálogo SC.") Evite usar grandes conjuntos de dados para melhorar o desempenho : A consulta de dados, a avaliação de ACLs, a execução de regras de negócios e o processamento de dados levam tempo e podem reduzir o desempenho. Determine a quantidade de que os usuários do portal de dados precisam e aplique os limites e filtros apropriados aos scripts e consultas. Isole widgets que exigem dados significativos ou processamento em suas próprias páginas separadas no portal. Evite implementar os seguintes itens que usam grandes conjuntos de dados: * Itens de menu com script que carregam grandes quantidades de dados, o que pode fazer com que todas as páginas do portal sejam carregadas lentamente. * Arquivos e anexos grandes, como arquivos de mídia de alta definição ou fontes da tabela de anexos \[sys_attachment\]. * Widgets de atualização automática. Sempre que o controlador do cliente de um widget chama server.update() , SPUtil.update() , servidor.refresh() , ou SPUtil.refresh() , a aplicação executa o script do servidor do widget e envia um objeto de dados de volta para o cliente. * Observadores de registros não filtrados. . RecordWatch() a função verifica se há atualizações em uma tabela ou filtro e retorna o valor da função de retorno de chamada. A adição de filtros para campos específicos a serem observados reduz o número de chamadas que um widget faz ao servidor. Especificar quando atualizar widgets em resposta a um produtor de registro que notifica o cliente de que há uma atualização na função de retorno de chamada também pode melhorar o desempenho. * Scripts do lado do servidor com consultas GlideRecord sem `Definir Limit `função. Usando o. `Definir Limit `a função pode restringir o número de registros retornados e melhorar o tempo de resposta nas consultas. Para maior flexibilidade, você pode vincular esse limite a uma opção de instância em vez de atribuir um valor codificado (por exemplo: `gr.setLimit(options.limit || 100) `). {#general-guidelines-developing-widgets__ul_s3c_nsh_l1c} Saiba mais: * [Seis armadilhas comuns de desempenho no Portal de serviços e como evitá-las \[KB0634588\]](https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0634588) * [SPUtil - recordWatch](https://www.servicenow.com/docs/access?context=spUtilAPI&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US) * [Função GlideRecord setLimit](https://www.servicenow.com/docs/access?context=c_GlideRecordAPI&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US) {#general-guidelines-developing-widgets__ul_t3c_nsh_l1c} Crie uma diretiva em vez de incorporar um widget complexo : Quando um widget incorporado é chamado do servidor, todos os scripts associados a esse widget são retornados. Se você precisar apenas de uma subseção de um widget, incorporar o widget inteiro criará sobrecarga desnecessária. Em vez disso, use diretivas para compartilhar código leve entre widgets. As diretivas são úteis, por exemplo, ao criar componentes de IU. Componentes complexos com funcionalidade do lado do servidor e do lado do cliente são melhor deixados como widgets. Use uma diretiva em vez de um widget incorporado para: * Compartilhe o escopo ou o comportamento do escopo personalizado com vários widgets. * Compartilhe uma subseção leve reutilizável de um widget. * Compartilhe um recurso de IU comum, como uma lista ou um avatar. * Aumentar o comportamento do widget. {#general-guidelines-developing-widgets__ul_u3c_nsh_l1c} Saiba mais: [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."). Use um serviço ou fábrica para compartilhar dados e persistir o estado : As fábricas e os serviços de dados mantêm e persistem o estado em um widget sem exigir várias chamadas para o servidor, permitindo que você: * Mantenha widgets sincronizados ao mudar registros ou filtros. * Compartilhe dados entre widgets. * Desenvolva widgets com mais desempenho. {#general-guidelines-developing-widgets__ul_v3c_nsh_l1c} Saiba mais: [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."). Manipule eventos com um serviço de publicação/assinatura : Evite usar [transmissão](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast)No DOM. transmissão envia o nome do evento para todos os escopos secundários notificando ouvintes registrados, o que pode ser uma chamada cara que requer o uso de RootScope objeto global. Em vez disso, use um serviço de publicação/assinatura para processar eventos. Ao usar um serviço de publicação/assinatura, um relacionamento claro é formado entre seus widgets por meio de manipuladores de retorno de chamada. Neste modelo, você pode controlar melhor o estado de seus eventos. Use chamadas REST ou `server.obter `para buscar dados do servidor : Quando você liga `server.update() `, todo o widget é retornado do servidor. Se o widget incluir caminhos de código divergentes, várias chamadas para atualizar o servidor podem afetar o desempenho. Como regra, use o script do servidor para configurar o estado inicial do widget. Para atualizações subsequentes, use APIs REST com script que chamam inclusões de script em sua instância. Esta prática: * Separa a lógica de negócios dos elementos de IU. * Centraliza seu código, permitindo que mudanças sejam feitas em um só lugar. {#general-guidelines-developing-widgets__ul_w3c_nsh_l1c} : Você também pode usar `server.obter `para passar informações para o servidor. Use esta função junto com `input.action `para executar partes específicas do script do servidor. Desenvolva com localização, acessibilidade e IU em mente : Para criar a melhor experiência para seus usuários, siga estas diretrizes: * Considere o impacto do seu widget em um ambiente móvel. Por exemplo, evite usar o mouse sobre o mouse e outros eventos que não sejam traduzidos em um dispositivo móvel. * Use variáveis de SCSS para reutilizar itens. Consulte [Variáveis de SCSS](https://servicenow-prod.fluidtopics.net/vMNifhF201mImWZY_UWzqw#css-variables "As variáveis de SCSS são uma maneira de armazenar informações que você deseja reutilizar em toda a folha de estilos. Você pode armazenar itens como cores, pilhas de fontes ou qualquer valor CSS que você achar que deseja reutilizar. O SCSS usa o símbolo"). * Use nomes de variáveis ao usar cores. * Encapsular cadeias de caracteres para tradução em APIs de localização. Consulte [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."). {#general-guidelines-developing-widgets__ul_x3c_nsh_l1c} Remova provedores Angular não usados do script do cliente : Para facilitar a manutenção, remova todos os provedores Angular não utilizados que foram injetados na instrução de função de script do cliente. Evite usar \ tags in HTML templates : Para diminuir a probabilidade de problemas de produção em Portal de serviços, evite usar modelos em linha usando \ tags in a widget's HTML template. Instead, create a related Angular ng-template record for the widget.