--- 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 e configurar componentes # Adicionar e configurar componentes {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 11 min. de leitura Saiba como adicionar componentes à sua página em Construtor de IU. Uma página é criada adicionando componentes. ## Antes de Iniciar Função necessária: ui_builder_admin ## Por Que e Quando Desempenhar Esta Tarefa Componentes são os blocos de construção usados para criar páginas personalizadas em Construtor de IU. Saiba como adicionar um componente a uma página. Depois de adicionar um componente a uma página, você deve configurar o componente. Para obter mais informações sobre como configurar componentes, consulte a [documentação do componente](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades) no site do desenvolvedor ServiceNow. ## Procedimento 1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. Abra ou crie uma página. Se você abrir uma página existente, verifique se está no mesmo escopo da página original. Caso contrário, altere o escopo antes de começar a editar a página. O escopo da aplicação protege as aplicações identificando e restringindo o acesso a dados e arquivos de aplicações. Os administradores definem o escopo para especificar quais partes de uma aplicação podem ser acessadas por outras aplicações. O escopo da aplicação protege os dados e os arquivos de aplicações. Consulte [Saiba mais sobre segurança e funções](https://servicenow-prod.fluidtopics.net/9Jsyh_1H~dn221ndkZFSJw "Configure a segurança e as funções para sua instância Construtor de IU.") para obter mais informações sobre o escopo da aplicação. 4. Selecione um contêiner existente ou crie um layout de coluna. Para obter mais informações, consulte [Organizar componentes nas páginas do Construtor de IU](https://servicenow-prod.fluidtopics.net/W5Y8aZAAxPm3_iU~bzWHkw "Os layouts de coluna organizam os componentes em uma página Construtor de IU. Saiba como os layouts de coluna são usados em Construtor de IU."). 5. Adicione componentes à sua página. Construtor de IU vem com uma biblioteca de componentes para você escolher. Você adiciona componentes como os blocos de construção da sua página. Por exemplo, você pode adicionar um título, visualizações de dados e assim por diante. A tabela a seguir mostra as diferentes maneiras de adicionar um componente a uma página. | Para adicionar um componente | Faça o seguinte | | Diretamente da sua página | Na página, selecione + e escolha um componente na caixa de ferramentas. Você pode pesquisar um componente ou rolar pela lista. | | Menu flutuante acima da página | Selecione o menu flutuante acima do seu componente. * Selecione Adicionar antes ou Adicionar depois de. * Escolha um componente na caixa de ferramentas. {#add-components__ul_br4_qds_24b} | | Árvore de conteúdo | Você pode adicionar um componente da árvore de conteúdo das duas maneiras a seguir. * Selecione +Adicionar conteúdo abaixo de um contêiner na árvore de conteúdo. Em seguida, escolha um componente na caixa de ferramentas. * Mova o mouse sobre um contêiner na árvore de conteúdo, selecione o ícone Menu e selecione Adicionar componente. Em seguida, escolha um componente na caixa de ferramentas. {#add-components__ul_pkc_l52_14b} | |-|-| {#add-components__choicetable_dzv_llh_wnb} {#add-components__addcomponents} {#add-components__addcomponents} 6. Agora configure as propriedades dos componentes que você acabou de adicionar. Configurar componentes significa personalizá-los de acordo com as suas necessidades. Para obter mais informações sobre como configurar componentes, consulte [Next Experience Componentes](https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/components). 1. Selecione o componente que você deseja configurar. 2. Selecione a guia Configurar no painel de configuração em Construtor de IU. 3. Personalize as [propriedades do componente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-properties-ui-builder "Disponível no painel Configuração e usado para configurar um componente. Cada componente tem propriedades exclusivas. As propriedades do componente são especificadas em cada guia no painel Configuração: Configuração, Estilo e Evento. Alguns componentes têm predefinições disponíveis. Use as predefinições de componente para definir as propriedades do componente automaticamente.") para o componente. Por exemplo, você pode adicionar um nome para um componente de botão. Alguns componentes, como visualizações de dados, exigem uma fonte de dados antes que você possa configurar as propriedades. Cada componente tem propriedades de configuração diferentes com base nos requisitos e opções de cada componente. Por exemplo, a configuração do componente Botão é simples, enquanto um componente de Lista requer mais configuração. 4. Para componentes com propriedades JSON configuráveis, você pode usar o editor JSON de low-code Construtor de IUpara editar as propriedades do componente sem precisar editar o código JSON. A IU do editor JSON exibe todas as propriedades disponíveis, até mesmo as propriedades não definidas nos dados fictícios ou nos valores definidos. Você pode atualizar as propriedades ou adicionar suas próprias propriedades personalizadas no editor JSON. Para obter mais informações sobre como configurar componentes, consulte [Editar código com o Now Code Editor (recurso avançado)](https://servicenow-prod.fluidtopics.net/_rhj0KrwrdivFBFEcoelJA "O Now Code Editor é um editor de rich text como interface que suporta folhas de estilos em cascata (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML) e JavaScript Object Notation (JSON). Use o Editor de código Now para modificar a configuração de IU, configuração de recursos de dados, estilos, eventos, scripts do lado do cliente e do lado do servidor em Next Experience componentes do Construtor de IU."). Nota: O editor JSON low-code só está disponível para propriedades que têm um esquema e cuja entrada JSON corresponde a esse esquema. O editor JSON low-code oferece suporte a objetos simples, propriedades de matriz simples, matrizes complexas, matrizes de objetos e oferece suporte parcial a objetos complexos. Para matrizes complexas, você pode adicionar, excluir ou mover a posição dos itens da matriz. Você também pode selecionar Ocultar itens não definidos para ocultar objetos com valores vazios ou nulos para uma experiência de edição simplificada. 5. Ao trabalhar com um componente de contêiner, você pode editar alguns estilos usando os painéis flutuantes. Selecione o ícone Menu para exibir um menu. Selecione a opção Layout, Dimensionamentoou Espaçamento para abrir um painel flutuante com as opções mais comuns exibidas. Arraste o painel flutuante para outro local conforme necessário. Somente um painel flutuante pode ser aberto por vez. {#add-components__substeps_gh5_lt2_14b} Para obter mais informações sobre como configurar componentes, consulte [Next Experience Componentes](https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/components). 7. **Opcional:** Selecione a guia Eventos para adicionar um manipulador de eventos ao seu componente. Adicione um manipulador de eventos para adicionar ações aos componentes da sua página. Por exemplo, um componente de botão é estático e não faz nada até que você vincule uma ação de evento a ele, como salvar um registro. Alguns componentes não têm uma ação de evento aplicada a eles, como um componente de título. Mas muitos componentes exigem que você mapeie um evento para o componente para que ele execute uma ação. Consulte [Vincular um evento a um componente](https://servicenow-prod.fluidtopics.net/_zqpwUAxTRqOEfz8zdJbJA "Vincule elementos de dados em Construtor de IU para que você possa adicionar ações de evento aos seus componentes.") para obter mais informações sobre como adicionar manipuladores de eventos ao seu componente. 8. **Opcional:** Você pode substituir qualquer estilo de um componente adicionando estilo CSS na guia Estilos. Para obter mais informações, consulte [Alterar a aparência padrão dos componentes](https://servicenow-prod.fluidtopics.net/QWNyu_ceLHhT70tNgR5rPw#add-styling-to-component "Defina os estilos dos componentes e wrappers para mudar a aparência padrão."). Nota: As mudanças de estilo afetam somente um único componente de cada vez. Para mudar o estilo visual de todos os componentes em sua experiência, você deve aplicar um tema à sua experiência. Para obter mais informações, consulte [Gerenciar o estilo visual das experiências do Construtor de IU](https://servicenow-prod.fluidtopics.net/5RwY2KWxG_TE~iBs0te6fQ "Os temas permitem que você mude o estilo visual de suas experiências Construtor de IU para que elas expressem a aparência da sua marca"). 9. **Opcional:** Adicione contêineres adicionais à sua página para exibir seus componentes de forma organizada. Por exemplo, um contêiner pode ter um componente de título. Outro contêiner abaixo dele pode incluir um componente de lista, um componente de botão e assim por diante. 1. Selecione + na parte superior do contêiner para adicionar um componente de contêiner antes do componente existente e selecione + na parte inferior de um componente para inserir um componente de contêiner depois dele. 2. Arraste um componente de contêiner da lista Componentes para o contêiner existente na página; Mantenha o controle sobre a linha superior do contêiner para inserir o novo contêiner antes do contêiner existente ou sobre a linha inferior do contêiner existente para adicioná-lo depois. {#add-components__substeps_x3m_qsw_nnb} 10. **Opcional:** Adicione mais componentes à sua página selecionando + na parte superior ou inferior dos componentes da página (o + muda para + Adicionar). 1. Selecione + na parte superior do componente para adicionar um componente antes do componente existente ou selecione + na parte inferior de um componente para inserir um componente depois dele. 2. Arraste um componente da lista de componentes para inserir o componente antes ou depois de um componente existente. {#add-components__substeps_cj4_grw_nnb} 11. **Opcional:** Para fazer um modal aparecer quando você seleciona um componente, como um botão, você deve adicionar o modal ao componente primeiro. Um modal é um pop-up de confirmação que aparece quando você seleciona o componente. Por exemplo, se você adicionar um componente de botão que exclui um registro, adicione um modal para solicitar que o usuário confirme se deseja excluir o registro. Para obter mais informações, consulte [Criar modais em Construtor de IU](https://servicenow-prod.fluidtopics.net/pJuIhY6fWu1eS90PEx6cyQ "Use modais em Construtor de IU com componentes para fornecer alertas ou chamadas para ação para um usuário. Construtor de IU vem com modais para economizar tempo e esforço."). 12. Selecione Salvar com frequência na sua página enquanto trabalha. 13. Exiba e teste sua página selecionando o botão Visualizar. ## O que Fazer Depois Você adicionou e configurou componentes em sua página. Para obter mais informações, consulte [Expor dados dinamicamente em páginas do Construtor de IU (recurso avançado)](https://servicenow-prod.fluidtopics.net/BDUmENQY96OSsVG1qIX2QQ "Sincronize dados entre ServiceNow tabelas e dados com as páginas que você cria com Construtor de IU. As páginas exibem dados sincronizados em tempo real e atualizam dados/tabelas quando um usuário insere informações."). Um recurso de dados em Construtor de IU são os dados que uma página busca para exibir conteúdo em componentes. Os componentes usam recursos de dados como uma maneira de reutilizar dados e configurações em diferentes experiências e tornar os componentes dinâmicos em uma página. ## Funções compatíveis no editor de fórmulas do componente Construtor de IU {#ariaid-title2} Saiba mais sobre as várias funções compatíveis com o editor de fórmulas do componente Construtor de IU. A tabela a seguir lista as funções que você pode usar no editor de fórmulas do componente Construtor de IU. Para obter mais informações sobre o editor de fórmulas do componente, consulte [Personalizar Construtor de IU páginas usando componentes](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA "Saiba o que é um componente em Construtor de IU. Veja também como os componentes funcionam no Construtor de IU."). {#uib_supported_functions__table_jb1_r21_ft__entry__5} | Rótulo do operador | Exemplo de condição | Operador de consulta equivalente | Consulta de exemplo | Exemplo de saída | |-|-|-|-|-| | Tudo vazio | \[Descrição resumida\]\[ALL_EMPTY\] | TUDO_VAZIO | short_descriptionALL_EMPTY | Todos os registros em que não há valor no campo Descrição resumida. | | Tudo igual | \[Descrição resumida\]\[ALL_EQ\]\[Armazenamento na rede indisponível\] | ALL_EQ | short_description=armazenamento de rede indisponível | Todos os registros em que o valor do campo Descrição resumida é igual a "Armazenamento de rede indisponível". | | Todos maiores que | \[Impacto\]\[ALL_GT\]\[2 - Médio\] | \> | impacto\>2 | Todos os registros em que o campo Impacto tem um valor de 3 - Baixo | | Todos maiores ou iguais | \[Impacto\]\[ALL_GTE\]\[2 - Médio\] | \>= | impacto\>=2 | Todos os registros nos quais o campo Impacto tem um valor de 2 - Médio ou 3 - Baixo. | | Todos menores que | \[Contagem de reatribuições\]\[ALL_LT\]\[2\] | \< | reatribuição_contagem\<2 | Todos os registros nos quais o valor no campo Contagem de reatribuições é qualquer número menor que (mas não igual a) 2. | | Todos menores ou iguais | \[Contagem de reatribuições\]\[ALL_LTE\]\[2\] | \<= | reatribuição_contagem\<=2 | Todos os registros em que o valor no campo Contagem de reatribuições é um dos seguintes: * um número menor que 2 * 2 {#uib_supported_functions__ul_jcp_ttp_lgb} | | Todos diferentes de | \[Impacto\]\[ALL_NEQ\]\[1 - Alto\] | != | impacto!=1 | Todos os registros nos quais o valor no campo Impacto é qualquer coisa menos 1 - Alto. | | Nem tudo vazio | \[Impacto\]\[ALL_NOTEMPTY\] | TODOS_NOTEMPTY | impactALL_NOTEMPTY | Todos os registros nos quais o campo Impacto tem algum valor. | | Todos, não um de | \[Impacto\]\[ALL_NOTONEOF\]\[1 - Alto, 2 - Médio\] | ALL_NOTONEOF | impactoALL_NOTONEOF1,2 | Todos os registros nos quais o campo Impacto é preenchido por qualquer coisa, exceto os seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_t53_jdh_kgb} | | Todos um de | \[Impacto\]\[ALL_ONEOF\]\[1 - Alto, 2 - Médio\] | ALL_ONEOF | impactoTODOS_ONEOF1,2 | Todos os registros nos quais o campo Impacto é preenchido por um dos seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_s4b_gdh_kgb} | | Qualquer vazio | \[Descrição resumida\]\[ANY_EMPTY\] | QUALQUER_VAZIO | short_descriptionANY_EMPTY | Qualquer registro em que não haja valor no campo Descrição resumida. | | Qualquer igual | \[Descrição resumida\]\[ANY_EQ\]\[Armazenamento na rede indisponível\] | QUALQUER_EQ | short_description=armazenamento de rede indisponível | Qualquer registro em que o valor do campo Descrição resumida seja igual a "Armazenamento de rede indisponível". | | Qualquer maior que | \[Impacto\]\[ANY_GT\]\[2 - Médio\] | QUALQUER_GT | impactoANY_GT2 | Todos os registros em que o campo Impacto tem um valor de 3 - Baixo | | Qualquer maior ou igual a | \[Impacto\]\[ANY_GTE\]\[2 - Médio\] | QUALQUER_GTE | impactoANY_GTE2 | Qualquer registro no qual o campo Impacto tenha um valor de 2 - Médio ou 3 - Baixo. | | Qualquer valor menor que | \[Contagem de reatribuições\]\[ANY_LT\]\[2\] | QUALQUER_LT | reatribuição_countANY_LT2 | Qualquer registro em que o valor no campo Contagem de reatribuição seja qualquer número menor que (mas não igual a) 2. | | Qualquer valor menor ou igual a | \[Contagem de reatribuições\]\[ANY_LTE\]\[2\] | QUALQUER_LTE | reatribuição_countANY_LTE2 | Qualquer registro em que o valor no campo Contagem de reatribuições seja um dos seguintes: * um número menor que 2 * 2 {#uib_supported_functions__ul_jl4_nyx_3sb} | | Qualquer diferente | \[Impacto\]\[ANY_NEQ\]\[1 - Alto\] | QUALQUER_NEQ | impactoANY_NEQ1 | Qualquer registro em que o valor no campo Impacto seja qualquer coisa menos 1 - Alto. | | Qualquer não está vazio | \[Impacto\]\[ANY_NOTEMPTY\] | QUALQUER_NOTEMPTY | impactANY_NOTEMPTY | Qualquer registro no qual o campo Impacto tenha algum valor. | | Qualquer não um de | \[Impacto\]\[ANY_NOTONEOF\]\[1 - Alto, 2 - Médio\] | QUALQUER_NOTONEOF | impactANY_NOTONEOF1,2 | Qualquer registro no qual o campo Impacto seja preenchido por qualquer coisa, exceto os seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_z51_dzx_3sb} | | Qualquer um de | \[Impacto\]\[ANY_ONEOF\]\[1 - Alto, 2 - Médio\] | QUALQUER UM | impactoANY_ONEOF1,2 | Qualquer registro no qual o campo Impacto seja preenchido por um dos seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_grh_szx_3sb} | | CONCAT | CONCAT(valor) | CONCAT | CONCAT("Bem-vindo(a), ",@context.session.user.firstName) | Criar uma nova cadeia de caracteres que combina todas as cadeias de caracteres fornecidas em uma só | | VAZIO | VAZIO (valor) | VAZIO | EMPTY(@context.session.user.roles) | Retorna verdadeiro se o valor for nulo ou indefinido | | SE | IF (se, então, caso contrário) | SE | IF(@context.props.bare,"página simples","página não simples") | Se a condição for verdadeira, retorne o valor. Se a condição for falsa, retorna o valor else. | | LEN | LEN(lista) | LEN | LEN(\[1,2,3\]) | Retorna o número de itens na matriz | | Selecionar | PICK(matriz, campo) | Selecionar | PICK(@context.session.user.preferences, "name") | Cria uma nova matriz em que cada item é selecionado do campo em cada item da matriz. Se o campo não existir, o item na nova matriz será VAZIO | | Intervalo | RANGE(de, até) | Intervalo | INTERVALO (1,10) | Cria uma matriz de números, começando com de, até, incrementando por etapa | | Soma | SUM(matriz) | Soma | SOMA(\[1,2,3\]) | Começando em 0, adicione o valor numérico de cada item na matriz e retorne o somatório resultante | | Traduzir | TRANSLATE (texto) | Traduzir | TRANSLATE("Bem-vindo de volta") | Retorna a cadeia de caracteres do primeiro argumento depois que os caracteres especificados no segundo argumento são convertidos para os caracteres especificados no terceiro argumento. | | Onde vazio | \[Descrição resumida\]\[WHERE_EMPTY\] | ONDE_VAZIO | short_descriptionWHERE_EMPTY | Extraia registros onde não há valor no campo Descrição resumida. | | Onde igual a | \[Descrição resumida\]\[WHERE_EQ\]\[Armazenamento de rede indisponível\] | WHERE_EQ | short_descriptionWHERE_EQarmazenamento na rede indisponível | Extrair registros em que o campo Descrição resumida é igual a "Armazenamento de rede indisponível". | | Onde maior que | \[Impacto\]\[WHERE_GT\]\[2 - Médio\] | ONDE_GT | impactoWHERE_GT2 | Extrair registros em que o campo Impacto tem um valor de 3 - Baixo | | Quando maior que ou igual a | \[Impacto\]\[WHERE_GTE\]\[2 - Médio\] | ONDE_GTE | impactoWHERE_GTE2 | Extraia registros em que o campo Impacto tenha um valor de 2 - Médio ou 3 - Baixo. | | Onde menor que | \[Contagem de reatribuições\]\[WHERE_LT\]\[2\] | WHERE_LT | reatribuição_contagemWHERE_LT2 | Extraia registros em que o valor no campo Contagem de reatribuições for qualquer número menor que (mas não igual a) 2. | | Onde menor ou igual a | \[Contagem de reatribuições\]\[WHERE_LTE\]\[2\] | ONDE_LTE | reatribuição_contagemWHERE_LTE2 | Extraia registros em que o valor no campo Contagem de reatribuições for um dos seguintes: * um número menor que 2 * 2 {#uib_supported_functions__ul_wpv_jhy_3sb} | | Onde não é igual | \[Impacto\]\[WHERE_NEQ\]\[1 - Alto\] | WHERE_NEQ | impactoWHERE_NEQ1 | Extraia registros em que o valor no campo Impacto seja qualquer coisa menos 1 - Alto. | | Onde não está vazio | \[Impacto\]\[WHERE_NOTEMPTY\] | WHERE_NOTEMPTY | impactoWHERE_NOTEMPTY | Extraia registros em que o campo Impacto tenha algum valor. | | Onde não é um de | \[Impacto\]\[WHERE_NOTONEOF\]\[1 - Alto, 2 - Médio\] | WHERE_NOTONEOF | impactoWHERE_NOTONEOF1,2 | Extrair registros em que o campo Impacto é preenchido por qualquer coisa, exceto os seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_prv_jhy_3sb} | | Onde um de | \[Impacto\]\[WHERE_ONEOF\]\[1 - Alto, 2 - Médio\] | WHERE_ONEOF | impactoWHERE_ONEOF1,2 | Extrair registros em que o campo Impacto é preenchido por um dos seguintes valores: * 1 - Alto * 2 - Médio {#uib_supported_functions__ul_msv_jhy_3sb} | [Tabela 1. Operadores disponíveis para construtores de condição] {#uib_supported_functions__table_jb1_r21_ft}