Adicionar e configurar componentes

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 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

    Os componentes são os blocos de construção usados para criar páginas personalizadas no 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 Documentação do componente em ServiceNowSite do desenvolvedor.

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Abra ou crie uma página.
      Se você abrir uma página existente, certifique-se de estar no mesmo escopo da página original. Caso contrário, mude 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 dados e arquivos da aplicação. Consulte Saiba mais sobre segurança e funçõespara 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.
    5. Adicione componentes à sua página.
      Construtor de IU vem com uma biblioteca de componentes para escolher. Você adiciona componentes como 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 Em sua página, selecione E e escolha um componente na caixa de ferramentas. Você pode pesquisar um componente ou rolar pela lista.Adicionar ícone de conteúdo selecionado na fase que mostra a janela da caixa de ferramentas com a guia Componentes selecionada.
      Menu flutuante acima da página Selecione o menu flutuante acima do seu componente.
      • Selecione Adicionar antes ou Adicionar após .
      • Escolha um componente na caixa de ferramentas.
      Seta que aponta para o menu flutuante que aparece depois de selecionar o ícone de menu.
      Á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 dispositivo do mouse sobre um contêiner na árvore de conteúdo e selecione Menu e selecione Adicionar componente . Em seguida, escolha um componente na caixa de ferramentas.
      Seta preta apontando para adicionar a opção de conteúdo na árvore de conteúdo ao lado da janela da caixa de ferramentas com a guia Componentes selecionada.
    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.
      1. Selecione o componente que você deseja configurar.
      2. Selecione Configurar no painel de configuração em Construtor de IU.
      3. Personalize o. propriedades do componentepara 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, o. Botão a configuração do componente é simples, enquanto um Lista o componente requer mais configuração.
      4. Para componentes com propriedades JSON configuráveis, você pode usar Construtor de IUEditor JSON de código baixo do para editar propriedades do componente sem precisar editar o código JSON.

        A IU do editor JSON exibe todas as propriedades disponíveis, mesmo propriedades não definidas nos dados fictícios ou valores definidos. Você pode atualizar 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).

        Nota:
        O editor JSON low-code só está disponível para propriedades que têm um esquema e cuja entrada JSON corresponde ao esquema mencionado.

        O editor JSON low-code oferece suporte a objetos simples, propriedades de matriz simples, matrizes complexas, matrizes de objetos e parcialmente oferece suporte 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.

        Editor JSON low-code do Construtor de IU.
      5. Ao trabalhar com um componente de contêiner, você pode editar alguns estilos usando os painéis flutuantes.

        Selecione Menu para exibir um menu.

        Seta apontando para o ícone do menu com o menu flutuante expandido.

        Selecione Layout , Dimensionamento , ou Espaçamento opção para abrir um painel flutuante com as opções mais comuns exibidas. Arraste o painel flutuante para outro local, conforme necessário. Apenas um painel flutuante pode ser aberto por vez.

        Opções de layout exibidas em um painel flutuante.
      Para obter mais informações sobre como configurar componentes, consulte Next Experience Componentes.
    7. Opcional: Selecione Eventos para adicionar um manipulador de eventos ao seu componente.
      Adicione um manipulador de eventos para adicionar ações aos componentes na 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 seu componente para realmente fazer com que ele execute uma ação. Consulte Vincular um evento a um componentepara obter mais informações sobre como adicionar manipuladores de eventos ao seu componente.
    8. Opcional: Você pode substituir todos os estilos de um componente adicionando estilo CSS em Estilos .
      Para obter mais informações, consulte Mude a aparência padrão dos componentes.
      Nota:
      As mudanças de estilo afetam apenas um único componente de cada vez. Para mudar o estilo visual de todos os componentes da 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.
    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 E na parte superior do contêiner para adicionar um componente de contêiner antes do componente existente e selecionar E na parte inferior de um componente para inserir um componente de contêiner após ele.
      2. Arraste um componente de contêiner da lista de componentes para o contêiner existente na página; segure 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.
    10. Opcional: Para adicionar mais componentes à sua página, selecione E na parte superior ou inferior dos componentes na página (o. E mudanças para E Adicionar ).
      Sinais de adição na parte superior e inferior de um componente para adicionar componentes adicionais.
      1. Selecione E na parte superior do seu componente para adicionar um componente antes do componente existente ou selecionar E na parte inferior de um componente para inserir um componente após ele.
      2. Arraste um componente da lista de componentes para inserir o componente antes ou depois de um componente existente.
    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 que deseja excluir o registro. Para obter mais informações, consulte Criar modais em Construtor de IU.
    12. Selecione Salvar em sua página enquanto você trabalha.
    13. Para exibir e testar sua página, selecione Visualização botão.

    O que Fazer Depois

    Você adicionou e configurou componentes em sua página. Para obter mais informações, consulte Expor dados dinamicamente nas páginas do Construtor de IU (recurso avançado). Um recurso de dados em Construtor de IUsão os dados que uma página busca para exibir conteúdo em componentes. Os componentes usam recursos de dados como uma forma 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 Construtor de IUeditor de fórmulas de componente

    Saiba mais sobre as várias funções compatíveis com Construtor de IUeditor de fórmulas de componente.

    A tabela a seguir lista as funções que você pode usar no Construtor de IUeditor de fórmulas de componente. Para obter mais informações sobre o editor de fórmulas de componente, consulte Personalize Construtor de IUpáginas que usam componentes.

    Tabela 1. Operadores disponíveis para construtores de condições
    Rótulo do operador Condição de exemplo Operador de consulta equivalente Consulta de exemplo Saída de exemplo
    Todos vazios [Descrição resumida][ALL_EMPTY] ALL_EMPTY Short_descriptionALL_EMPTY Todos os registros em que não há valor no Descrição resumida campo.
    Todos iguais [Descrição resumida][ALL_EQ][Armazenamento de rede indisponível] ALL_EQ armazenamento de rede indisponível Todos os registros em que o valor para Descrição resumida O campo é igual a "Armazenamento de rede indisponível".
    Todos maiores que [Impact][ALL_GT][2 - Médio] > impacto>2 Todos os registros em que Impacto o campo tem um valor de 3 - Baixo
    Todos maiores ou iguais [Impact][ALL_GTE][2 - Médio] >= impacto>: 2 Todos os registros em que Impacto o campo tem um valor de 2 - Médio ou 3 - Baixo .
    Tudo menor que [Contagem de reatribuições][ALL_LT][2] < reassignment_count menor que 2 Todos os registros nos quais o valor está em Contagem de reatribuições o campo é qualquer número menor que (mas não igual a) 2 .
    Todos menores ou iguais [Contagem de reatribuições][ALL_LTE][2] <= reassignment_count menor que 2 Todos os registros nos quais o valor está em Contagem de reatribuições o campo é um dos seguintes:
    • um número menor que 2
    • 2
    Nem todos iguais a. [Impact][ALL_NEQ][1 - Alto] != impact!: 1 Todos os registros nos quais o valor está em Impacto o campo é tudo menos 1 - Alto .
    Nem todos estão vazios [Impact][ALL_NOTEMPTY] ALL_NOTEMPTY ImpactALL_NOTEMPTY Todos os registros em que Impacto o campo tem qualquer valor.
    Nem todos são um [Impact][ALL_NOTONEOF][1 - Alto, 2 - Médio] ALL_NOTONEOF ImpactALL_NOTONEOF1,2 Todos os registros em que Impacto o campo é preenchido por qualquer coisa, exceto os seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)
    Todos um de [Impact][ALL_ONEOF][1 - Alto, 2 - Médio] ALL_ONEOF ImpactALL_ONeoF1,2 Todos os registros em que Impacto o campo é preenchido por um dos seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)
    Qualquer vazio [Descrição resumida][ANY_EMPTY] ANY_EMPTY Short_descriptionANY_EMPTY Qualquer registro no qual não há valor no Descrição resumida campo.
    Qualquer igual [Descrição resumida][ANY_EQ][Armazenamento de rede indisponível] ANY_EQ armazenamento de rede indisponível Qualquer registro no qual o valor de Descrição resumida O campo é igual a "Armazenamento de rede indisponível".
    Maior que [Impact][ANY_GT][2 - Médio] QUALQUER_GT ImpactANY_GT2 Todos os registros em que Impacto o campo tem um valor de 3 - Baixo
    Qualquer maior que ou igual [Impact][ANY_GTE][2 - Médio] ANY_GTE ImpactANY_GTE2 Qualquer registro no qual Impacto o campo tem um valor de 2 - Médio ou 3 - Baixo .
    Menos de [Contagem de reatribuições][ANY_LT][2] QUALQUER_LT Reassignment_countANY_LT2 Qualquer registro no qual o valor em Contagem de reatribuições o campo é qualquer número menor que (mas não igual a) 2 .
    Menor ou igual a [Contagem de reatribuições][ANY_LTE][2] QUALQUER_LTE Reassignment_countANY_LTE2 Qualquer registro no qual o valor em Contagem de reatribuições o campo é um dos seguintes:
    • um número menor que 2
    • 2
    Qualquer diferente [Impact][ANY_NEQ][1 - Alto] ANY_NEQ ImpactANY_NEQ1 Qualquer registro no qual o valor em Impacto o campo é tudo menos 1 - Alto .
    Nenhum está vazio [Impact][ANY_NOTEMPTY] ANY_NOTEMPTY ImpactANY_NOTEMPTY Qualquer registro no qual Impacto o campo tem qualquer valor.
    Nenhum de [Impact][ANY_NOTONEOF][1 - Alto, 2 - Médio] ANY_NOTONEOF ImpactANY_NOTONEAF1,2 Qualquer registro no qual Impacto o campo é preenchido por qualquer coisa, exceto os seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)
    Qualquer um de [Impact][ANY_ONEOF][1 - Alto, 2 - Médio] ANY_ONEOF ImpactANY_ONeoF1,2 Qualquer registro no qual Impacto o campo é preenchido por um dos seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)
    CONCAT CONCAT(valor) CONCAT CONCAT("Bem-vindo, ", em context.session.user.firstName) Crie uma nova cadeia de caracteres que combine todas as cadeias de caracteres fornecidas em uma
    VAZIO VAZY(valor) VAZIO VAZIO (a context.session.user.roles) Retorna verdadeiro se o valor for nulo ou indefinido
    SE SE(if, então, else) SE SE (na página context.props.bare,"bare","Página não vazia") Se a condição for verdadeira, retorne o valor em seguida. Se a condição for falsa, retorne o valor Else.
    LEN LEN (lista) LEN LEN([1,2,3]) Retorna o número de itens na matriz
    Selecionar ESCOLHA (matriz, campo) Selecionar ESCOLHA (a context.session.user.preferences,"name") Cria uma nova matriz em que cada item é selecionado do campo em cada item na matriz. Se o campo não existir, o item na nova matriz estará VAZIO
    Intervalo INTERVALO (de, a) Intervalo INTERVALO(1,10) Cria uma matriz de números, começando com de, até, incrementando por etapa
    Soma SOMA (matriz) Soma SOMA([1,2,3]) A partir de 0, adicione o valor numérico de cada item na matriz e retorne a soma resultante
    Traduzir TRADUÇÃO (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 traduzidos nos caracteres especificados no terceiro argumento.
    Vazio [Descrição resumida][WHERE_EMPTY] WHERE_EMPTY Short_descriptionWHERE_EMPTY Extraia registros em que não há valor no Descrição resumida campo.
    Igual [Descrição resumida][WHERE_EQ][Armazenamento de rede indisponível] WHERE_EQ Armazenamento short_descriptionWHERE_EQnetwork indisponível Extraia registros em que Descrição resumida O campo é igual a "Armazenamento de rede indisponível".
    Maior que [Impacto][WHERE_GT][2 - Médio] WHERE_GT ImpactWHERE_GT2 Extraia registros em que Impacto o campo tem um valor de 3 - Baixo
    Quando maior que ou igual [Impact][WHERE_GTE][2 - Médio] WHERE_GTE ImpactWHERE_GTE2 Extraia registros em que Impacto o campo tem um valor de 2 - Médio ou 3 - Baixo .
    Menor que [Contagem de reatribuições][WHERE_LT][2] WHERE_LT Reassignment_countWHERE_LT2 Extraia registros em que o valor está em Contagem de reatribuições o campo é qualquer número menor que (mas não igual a) 2 .
    Menor que ou igual [Contagem de reatribuições][WHERE_lte][2] ONDE_LTE Reassignment_countWHERE_LTE2 Extraia registros em que o valor está em Contagem de reatribuições o campo é um dos seguintes:
    • um número menor que 2
    • 2
    Em que não é igual [Impacto][WHERE_NEQ][1 - Alto] WHERE_NEQ ImpactWHERE_NEQ1 Extraia registros em que o valor está em Impacto o campo é tudo menos 1 - Alto .
    Em que não está vazio [Impact][WHERE_NOTEMPTY] WHERE_NOTEMPTY ImpactWHERE_NOTEMPTY Extraia registros em que Impacto o campo tem qualquer valor.
    Em que nem um de [Impacto][WHERE_NOTONEOF][1 - Alto, 2 - Médio] WHERE_NOTONEOF ImpactWHERE_NOTONEAF1,2 Extraia registros em que Impacto o campo é preenchido por qualquer coisa, exceto os seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)
    Em que um de [Impact][WHERE_ONEOF][1 - Alto, 2 - Médio] WHERE_ONEOF ImpactWHERE_ONeoF1,2 Extraia registros em que Impacto o campo é preenchido por um dos seguintes valores:
    • 1 - Alto(a)
    • 2 - Médio(a)