Diretrizes gerais para desenvolver widgets

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

    • Ao desenvolver widgets personalizados, lembre-se dessas diretrizes gerais para obter desempenho ideal, desenvolvimento escaloná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.

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

    Saiba mais: Tutorial: Criar um widget personalizado.

    Incorporar um widget em vez de clonar quando possível

    Incorporar um widget existente em seu 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

    Evite usar grandes conjuntos de dados para melhorar o desempenho

    Consultar dados, avaliar ACLs, executar regras de negócios e processamento de dados levam tempo e podem reduzir o desempenho. Determine de quanto 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 conjuntos de dados grandes:

    • 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 Anexos [sys_attachment].
    • Widgets de atualização automática. Sempre que o controlador do cliente de um widget chama server.update() , SPUtil.update() , server.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. Adicionar filtros para campos específicos a serem observados reduz o número de chamadas que um widget faz para o 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 ConfiguLimit função. Usando o. ConfiguLimit 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) ).
    Saiba mais:
    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 reutilizável e leve de um widget.
    • Compartilhe um recurso de IU comum, como uma lista ou um avatar.
    • Aumentar o comportamento do widget.

    Saiba mais: Reutilize componentes com provedores Angular.

    Use um serviço ou fábrica para compartilhar dados e persistir o estado

    Os serviços de dados e as fábricas 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 mais eficientes.

    Saiba mais: Reutilize componentes com provedores Angular.

    Manipule eventos com um serviço de publicação/assinatura

    Evite usar taxa de transmissão No DOM. taxa de transmissão expede o nome do evento para todos os escopos secundários notificando ouvintes registrados, o que pode ser uma chamada cara que requer o uso do RootScope objeto global.

    Em vez disso, use um serviço de publicação/assinatura para lidar com 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.get 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 poderão afetar o desempenho. Como regra, use o script do servidor para configurar o estado inicial do widget. Para atualizações subsequentes, use REST APIs 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.
    Você também pode usar server.get 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 e outros eventos que não sejam traduzidos em um dispositivo móvel.
    • Use variáveis SCSS para reutilizar itens. Consulte Variáveis de SCSS.
    • Use nomes de variáveis ao usar cores.
    • Encapsular cadeias de caracteres para tradução em APIs de localização. Consulte Internacionalização de um widget.
    Remova provedores Angular não utilizados do client script
    Para facilitar a manutenção, remova todos os provedores Angular não utilizados que foram injetados na instrução de função client script.
    Evite usar <script> tags in HTML templates
    Para diminuir a probabilidade de problemas de produção em Portal de serviços evite usar modelos em linha usando <script> tags in a widget's HTML template. Instead, create a related Angular ng-template record for the widget.