--- 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 --- # Construtor de componente personalizado # Construtor de componente personalizado {#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 Desenvolva componentes personalizados usando o Estrutura de IU do Next Experience e o extensão do componente iu. Componentes são blocos de construção reutilizáveis que você usa para criar uma interface do usuário personalizada. O Next Experience Design System vem com um conjunto de componentes personalizáveis que você pode arrastar para a IU personalizada. Desenvolva seus próprios componentes se não encontrar o que precisa na biblioteca Next Experience Design System. Para ver a biblioteca Next Experience Design System, visite [ServiceNow® Site do desenvolvedor](https://developer.servicenow.com/dev.do#!/reference/libraries/sandiego/now-components). ## Benefícios da criação de componentes personalizados {#custom-components__section_vc3_rrj_xkb} O desenvolvimento de componentes personalizados permite: * Personalize uma IU de acordo com as necessidades do seu agente, cliente e empresa. * Torne seus funcionários mais eficazes e reduza a alternância de contexto com acesso rápido a dados e informações importantes. * Acomode o ambiente omnicanal exclusivo da sua empresa usando APIs para consolidar seus dados. {#custom-components__ul_n3w_trj_xkb} Por exemplo, você pode criar um componente que exibe os casos associados a um ANS ou que rastreia os bate-papos ativos em uma fila específica. Você pode usar o Estrutura de IU do Next Experience e o extensão do componente iu para desenvolver o componente necessário e acessar dados da sua plataforma usando a [API de efeito Http](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-http). Você também pode consultar dados da plataforma usando a GraphQL criando um esquema personalizado. Para obter mais informações, consulte [GraphQL com script](https://www.servicenow.com/docs/access?context=scripted-graph-ql&version=xanadu&pubname=xanadu-api-reference&ft:locale=en-US). ## O que saber antes de começar {#custom-components__section_xjb_y5h_3kb} Antes de começar a projetar e criar seu componente, certifique-se de ter: * Algum conhecimento geral de conceitos, desenvolvimento e design de componentes da Web. * Conhecimento JavaScript para definir o comportamento do componente. * Conhecimento do Node Package Manager (npm). * A versão mais recente do Node.js instalada na máquina local. Para obter mais informações, consulte [Node.js.](https://nodejs.org) * O ServiceNow CLI instalado em sua máquina. {#custom-components__ul_ozv_4d3_3kb} ## Estrutura de IU do Next Experience {#custom-components__section_gc4_2cw_pkb} O Estrutura de IU do Next Experience é uma estrutura JavaScript que permite estender suas aplicações e criar componentes da Web que são reutilizáveis em todas as suas aplicações. Usar o Estrutura de IU do Next Experience permite que você: * Crie um único componente para usar em vários locais em suas aplicações. * Encapsule o escopo do componente para evitar conflitos com outro código. * Adicione propriedades, slots e ações ao seu componente, permitindo que os usuários personalizem o componente sempre que o usarem em um Espaço. {#custom-components__ul_ujt_xk5_rkb} Para obter mais informações, consulte [ServiceNow® Site do desenvolvedor](https://developer.servicenow.com/dev.do#!/guides/sandiego/now-experience/ui-framework/getting-started/introduction). ## extensão do componente iu e fluxo de desenvolvimento {#custom-components__section_wdv_hsv_pkb} O extensão do componente iu é uma extensão do ServiceNow CLI que permite desenvolver componentes personalizados usando o Estrutura de IU do Next Experience. Com o extensão do componente iu, você pode: * Crie o conjunto de arquivos necessários para desenvolver um componente ou andaime de projeto. * Inicie um servidor de desenvolvimento local para testar seu componente. * Crie um projeto de componente e implante-o em uma instância ServiceNow. {#custom-components__ul_dfn_wb4_rkb} ## Escopo da aplicação {#custom-components__section_qjj_w4t_tkb} Quando você implanta um componente Estrutura de IU do Next Experience, ele é implantado em uma aplicação com escopo na instância. Você pode fornecer um escopo da aplicação para o componente usar como um identificador de namespace. Use as diretrizes de identificador de namespace para desenvolvimento de aplicações na instância. Para obter mais informações, consulte [Escopo da aplicação](https://servicenow-prod.fluidtopics.net/zY3iadmCCTWsdfoZF9kneg "O escopo da aplicação protege as aplicações identificando e restringindo o acesso a dados e arquivos de aplicações."). Ao reservar um escopo da aplicação, siga estes requisitos: * Máximo: 18 caracteres. * Caso: caso de cobra. * Formato: `x_customerprefix_componentname`, em que: * `customerprefix` é o valor na propriedade do sistema glide.appcreator.company.code em sua instância. * `componentsname` é o valor fornecido no parâmetro de `nome` do componente quando você criou o projeto. {#custom-components__ul_vbz_5rt_tkb} {#custom-components__ul_c2x_jrt_tkb} Se você não fornecer um escopo da aplicação ao criar seu projeto de componente, a Now CLI criará um para você. Como alternativa, você pode adicionar um valor ao parâmetro `scopeName` no arquivo now-ui.json. Para obter mais informações, consulte [Alterar o escopo da aplicação de um componente](https://servicenow-prod.fluidtopics.net/vVwMD6ND242Ycr9arZ9RFg "Altere o escopo da aplicação de um componente se você encontrar problemas de escopo ao implantar seu componente em uma instância. Por exemplo, você pode ter definido um escopo da aplicação que já está em uso ou é inválido ao criar um componente no modo off-line."). ## Guia de referência {#custom-components__section_zjs_lyz_xkb} Para ver o guia de referência da Now CLI, visite o [Site do desenvolvedor](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/cli/getting-started/). * **[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. * **[Use um servidor proxy com extensão do componente iu](https://servicenow-prod.fluidtopics.net/R60H6lbfwwbgm38jK~wEGQ)** Use um servidor proxy com a Now CLI para definir uma fonte de dados separada para o seu componente. Ao usar um servidor proxy, a instância encaminha as solicitações da Now CLI para o servidor proxy. * **[Desenvolver um componente](https://servicenow-prod.fluidtopics.net/eyOObVZdwtqEOVvfiyGNyw)** Adicione seu código de componente e teste-o usando um servidor de desenvolvimento local. * **[Desenvolver um componente para Virtual Agent](https://servicenow-prod.fluidtopics.net/TpFAaC2Mvc7drIJFesgaBg)** Crie um componente Virtual Agent personalizado para coletar informações de entrada ou exibir na interface do cliente Virtual Agent. * **[Adicionar um componente a Espaço do agente](https://servicenow-prod.fluidtopics.net/UxCnhfIbHuyuEf5vrsZMUg#workspace-component)** Use componentes personalizados para criar uma interface Espaço personalizada para atender à necessidade específica dos agentes da sua empresa. * **[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. * **[Alterar o escopo da aplicação de um componente](https://servicenow-prod.fluidtopics.net/vVwMD6ND242Ycr9arZ9RFg)** Altere o escopo da aplicação de um componente se você encontrar problemas de escopo ao implantar seu componente em uma instância. Por exemplo, você pode ter definido um escopo da aplicação que já está em uso ou é inválido ao criar um componente no modo off-line.