Na construção de aplicações no ServiceNow, é comum surgirem necessidades que vão além dos botões padrão (Salvar, Atualizar, Submeter). Em diversos casos, o desenvolvedor precisa adicionar botões customizados em formulários para executar ações específicas, como gerar relatórios, acionar integrações, manipular registros relacionados ou iniciar fluxos automatizados.
Neste artigo, explico como adicionar botões personalizados de forma adequada, apresentando as diferentes abordagens disponíveis, suas boas práticas e exemplos de uso real.
1. Por que usar botões customizados?
Os botões personalizados permitem:
- Executar scripts server-side ou client-side sob demanda;
- Iniciar Workflows ou Flows específicos;
- Invocar Script Includes, REST APIs ou PDF generators;
- Melhorar a usabilidade, oferecendo ações contextuais para o usuário.
Eles são particularmente úteis quando é necessário encapsular ações de negócio sem alterar a lógica de submissão do formulário.
2. Como criar um botão customizado
Abordagem 1: UI Action
A maneira mais robusta e recomendada de adicionar um botão é por meio de uma UI Action. Essa abordagem permite executar scripts no client, server ou ambos.
Exemplo: Criar botão “Gerar PDF”
Configuração:
- Table:
incident - Action name:
generate_pdf - Show insert: false
- Show update: true
- Form button: true
- Condition:
current.active == true
Script (Client-side com g_form):
function onClickGeneratePDF() {
GlideAjax.generatePDF(current.sys_id);
}
Script (Server-side):
(function executeAction(current) {
var pdfUtil = new x_custom_app.GeneratePDFUtils();
pdfUtil.generateFromIncident(current.sys_id);
})(current);
Dica: Use a opção “Client” apenas quando for necessário interagir com o formulário ou coletar dados antes de executar uma lógica no servidor.
Abordagem 2: Botão em Catalog Client Script ou UI Script
Quando estamos lidando com um item de catálogo (catálogo de serviços), é possível criar um botão diretamente via HTML e manipulá-lo com Catalog Client Script.
Exemplo:
<button onclick="abrirModal()">Ver Detalhes</button>
function abrirModal() {
alert('Exibir informações detalhadas');
}
Essa abordagem é ideal para exibir modais, painéis de ajuda ou caixas de confirmação no Service Portal.
3. Boas práticas ao adicionar botões
- Use nomes claros e ações descritivas: “Gerar Relatório”, “Aprovar Solicitação”, “Atualizar Status”.
- Evite lógica complexa no Client Script: Scripts longos devem ser abstraídos para Script Includes ou Flows.
- Controle a visibilidade por função: Utilize
gs.hasRole()para limitar quem vê ou pode usar o botão. - Evite clonar lógica existente: Reutilize código centralizado para facilitar manutenção.
- Documente a ação: Sempre use o campo Description da UI Action para explicar o propósito.
4. Alternativas avançadas
Além das UI Actions, também é possível adicionar botões dinamicamente via:
- Form Layouts (Form Sections + UI Macros)
- Service Portal Widgets com AngularJS ou Now Experience Components
- Next UI Components (para Workspaces e App Engine Studio)
Cada uma dessas opções depende do contexto do formulário (clássico, portal, workspace) e do tipo de experiência que você deseja entregar.
5. Conclusão
Botões customizados são elementos fundamentais para construir experiências ricas e orientadas a processos dentro do ServiceNow. Saber quando e como utilizá-los corretamente garante não apenas a funcionalidade necessária, mas também uma aplicação mais profissional, organizada e fácil de manter.
Use UI Actions sempre que a ação estiver relacionada ao comportamento do formulário ou do registro. Use Service Portal e Widgets quando a ação fizer parte de uma interface personalizada.
No responses yet