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


---

# Renderize um componente em um modal

# Renderize um componente em um modal {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Use uma Ação de IU para iniciar um componente personalizado em um modal para que um agente não precise navegar para uma tela diferente para realizar uma tarefa.

## Antes de Iniciar

Função necessária: Workspace_admin

## Por Que e Quando Desempenhar Esta Tarefa

Inicie um componente personalizado em um modal para que um agente não precise sair da tela atual. Por exemplo, você pode iniciar um modal que contém informações de contato sobre o cliente nomeado em um registro aberto para que um agente possa solicitar que os chamadores confirmem sua identidade. O exemplo a seguir mostra uma lista em um modal.

## Procedimento

1. Desenvolva e implante um componente personalizado em sua instância.  
   Para obter mais informações, consulte [Componentes personalizados](https://www.servicenow.com/docs/access?context=custom-components&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).
2. Crie uma entrada no modal de script registrado.
   1. No Navegador de filtros, insira sys_aw_registered_scripting_modal.list para abrir essa tabela.
   2. Clique em Novo.
   3. Use o ícone de pesquisa ( ![ícone de pesquisa]()) para selecionar um componente, neste caso, use sn-workspace-header .
   4. Insira o nome do API , neste caso ShowHeader .
   5. API pública preenchido automaticamente:  
   6. Clique em Salvar.
   {#set-up-ui-action-render-custom-component__substeps_t2h_fk5_pjb}
3. Crie sua ação de IU para renderizar seu componente em um modal.
   1. Crie uma nova Ação de IU para a tabela apropriada e no Espaço selecione uma das duas opções Botão de formulário do espaço ou Botão de menu do espaço Dependendo de como e onde você deseja que a Ação de IU apareça.  
      Para obter informações sobre como criar uma ação de IU, consulte [Configure ações de IU personalizadas em espaço legado](https://servicenow-prod.fluidtopics.net/IhhVp9MuX~ihypohkL4YPg "Configure ações de IU para personalizar espaço legadopara sua organização. As ações de IU incluem botões personalizados, itens de menu e limitação de acesso a formulários com base na função de um usuário.").

      ![Botão ou menu do formulário do espaço]()  
      Quando você marca uma das caixas de seleção, o. Script do cliente do espaço a caixa de texto é exibida.
   2. Insira o seguinte código em Script do cliente do espaço caixa de texto:  

          function onClick(g_form) {
            g_modal.global.showHeader({
              title: 'Test custom modal',
              confirmTitle:'YES',
              params: {
                primaryValue: 'THIS IS A PRIMARY VALUE',
                secondaryItems:{}
              }
            }).then(function(result){
              alert('confirm:'+result);
            }, function(error) {
              alert('cancel:'+error);
            });
          }

   {#set-up-ui-action-render-custom-component__substeps_i5y_fp5_pjb}
4. Agora, teste a ação de IU abrindo um registro em EspaçoNa tabela selecionada ao criar esta Ação de IU.  
   A Ação de IU deve aparecer no painel de formulário.