--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Adicionar um componente a Espaço do agente # Adicionar um componente a Espaço do agente {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura Use componentes personalizados para criar uma interface Espaço personalizada para atender à necessidade específica dos agentes da sua empresa. A comunicação com os clientes por meio de vários canais pode ser demorada. Para serem eficientes nessas interações omnicanal, seus agentes precisam de uma exibição única das informações do cliente para reduzir a alternância de contexto entre várias ferramentas. Ao desenvolver componentes personalizados para Espaço, sua equipe pode reunir comunicações de vários canais em uma interface. ## Como adicionar componentes a um Espaço {#workspace-component__section_m3f_dgk_qkb} Depois de implantado em sua instância, você pode adicionar componentes a Espaço dessas maneiras. Adicionar um componente a um modal Espaço : 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. Para obter mais informações, consulte Renderização de um componente em um modal. Adicionar um componente a uma página principal Espaço usando o Construtor de IU : Use o Construtor de IU para criar páginas principais personalizadas para seus agentes. Construtor de IU é uma ferramenta de arrastar e soltar que permite organizar visualmente os componentes do espaço. Para obter mais informações, consulte Criar páginas principais personalizadas para espaços. Configure as propriedades no arquivo now-ui.json para usar componentes implantados no Construtor de IU. Consulte [Adicionar um componente a Construtor de IU](https://servicenow-prod.fluidtopics.net/UxCnhfIbHuyuEf5vrsZMUg#view-in-uib "Defina as propriedades em um arquivo de configuração para adicionar seu componente ao Construtor de IU em sua instância."). Adicionar um componente a uma exibição de registro Espaço : Você pode adicionar componentes personalizados ou padrão à área de componentes na exibição de registro Espaço. Para obter mais informações, consulte Configuração da exibição de registro no espaço. ## Adicionar um componente a Construtor de IU {#ariaid-title2} Defina as propriedades em um arquivo de configuração para adicionar seu componente ao Construtor de IU em sua instância. ### Antes de Iniciar * [Configurar seu ambiente](https://servicenow-prod.fluidtopics.net/ourC0hNhETgWb0BLV0Q8jA "Prepare seu ambiente local instalando o ambiente de tempo de execução JavaScript Node.js, o gerenciador de pacotes Node (npm) e o extensão do componente iu. Essas ferramentas permitem desenvolver e criar componentes localmente e implantá-los em sua instância.") * [Configurar seu projeto](https://servicenow-prod.fluidtopics.net/Qf9laGAcmi1rtkVokT5uOQ "Crie o projeto de componente e o conjunto de arquivos necessários para desenvolver um componente. Você pode se conectar à sua instância e criar um escopo da aplicação para o seu componente ou pode reservar um escopo para verificar mais tarde.") * [Desenvolver um componente](https://servicenow-prod.fluidtopics.net/eyOObVZdwtqEOVvfiyGNyw "Adicione seu código de componente e teste-o usando um servidor de desenvolvimento local.") {#view-in-uib__ul_wb3_xbn_tkb} ### Procedimento 1. No diretório do projeto, abra now-ui.json. 2. Adicione o objeto `components.[component-name].uiBuilder` ao arquivo. Este objeto adiciona o componente ao Construtor de IU. Este objeto inclui estes pares de chave-valor:{#view-in-uib__table_spf_5sb_5kb__entry__3} | Chave | Tipo de dados | Descrição | |-|-|-| | componentes.\[component-name\].uiBuilder | Objeto | Objeto que adiciona o componente ao Construtor de IU. | | componentes.\[component-name\].uiBuilder.label | Cadeia de caracteres | Obrigatório. O nome de exibição do componente no Construtor de IU. | | componentes.\[component-name\].uiBuilder.icon | Cadeia de caracteres | Obrigatório. O nome do ícone que aparece no Construtor de IU. | | componentes.\[component-name\].uiBuilder.description | Cadeia de caracteres | Obrigatório. Uma descrição resumida da funcionalidade do componente. | [ ] {#view-in-uib__table_spf_5sb_5kb} { "components": { "card": { "uiBuilder": { "label" : "Card", "icon" : "chat-fill", "description" : "A visual card format for a record.", "associatedTypes": ["global.core"] }, 3. Se o seu componente incluir propriedades, adicione a matriz `components.[component-name].properties` ao arquivo. Isso adiciona as propriedades como opções de configuração para o componente em Construtor de IU. Este objeto inclui estes pares de chave-valor:{#view-in-uib__table_vdz_qzb_5kb__entry__3} | Chave | Tipo de dados | Descrição | |-|-|-| | componentes.\[component-name\].properties | Matriz \ | Uma matriz de objetos que inclui todas as propriedades do componente e todas as informações relevantes sobre essas propriedades. | | componentes.\[component-name\].properties\[\].name | Cadeia de caracteres | Nome da propriedade no código do seu componente. | | componentes.\[component-name\].properties\[\].label | Cadeia de caracteres | Nome de exibição da propriedade a ser exibida em Construtor de IU, se aplicável. | | componentes.\[component-name\].properties\[\].description | Cadeia de caracteres | Uma descrição resumida do que a propriedade faz ou como usá-la. | | componentes.\[component-name\].properties\[\].readOnly | Booliano | Quando verdadeiro, impede que um usuário configure a propriedade no Construtor de IU. Padrão: falso. | | components.\[component-name\].properties\[\].required | Booliano | Quando verdadeiro, o usuário deve configurar a propriedade. Padrão: falso. | | componentes.\[component-name\].properties\[\].defaultValue | Cadeia de caracteres | O valor padrão quando o usuário não fornece um. | | componentes.\[component-name\].properties\[\].associatedTypes | Matriz | Descreve onde na caixa de ferramentas do Construtor de IU o componente aparece. O valor deve ser `"global.core"`. | | componentes.\[component-name\].properties\[\].typeMetadata | Objeto | Dados de configuração extras que alguns tipos de dados exigem, como propriedades de referência e listas de seleção. | [ ] {#view-in-uib__table_vdz_qzb_5kb} { "components": { "properties": [ { "name": "backgroundColor", "label": "Background Color", "description": "Background Color", "readOnly": false, "required": false, "defaultValue": "lightgray" }, { "name": "cardType", "label": "Type of card", "description": "Type of card", "readOnly": false, "required": false, "defaultValue": "" } ] 4. Salve o arquivo. ### O que Fazer Depois [Implantar um componente em uma instância](https://servicenow-prod.fluidtopics.net/FShv4NrX1MNtp0SZ8Apwvg "Implante seu componente para ser exibido em sua instância como um plug-in de aplicação."). **Conceitos relacionados** * [Construtor de componente personalizado](https://servicenow-prod.fluidtopics.net/1fP78Qyn79GbWRJSiJ9ZaQ "Desenvolva componentes personalizados usando o Estrutura de IU do Next Experience e o extensão do componente iu.")