Gerenciar Construtor de IUpáginas e variantes de página

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 11 min. de leitura
  • Saiba em que está uma página Construtor de IU. Entenda os blocos de construção de um Construtor de IU, como layouts de coluna e componentes.

    Construtor de IU início rápido

    Crie páginas em Construtor de IUcomo parte de um espaço ou experiência de portal personalizado. Construtor de IUas páginas consistem em layouts e. componentes. Você cria uma página usando layouts de coluna e componentes para orientar um usuário por uma experiência. Por exemplo, você pode criar uma página para gerenciar solicitações de viagem para seus funcionários. A página pode ter layouts de coluna com componentes que contêm listas de todas as solicitações de viagem enviadas e aprovadas. Você pode adicionar botões que permitem que os usuários adicionem e enviem solicitações de viagem. A maneira como você constrói sua página é ilimitada.
    Nota:
    Um desenvolvedor deve trabalhar em qualquer um variantede cada vez.

    Layouts de coluna e componentes em Construtor de IU

    Os layouts de coluna e componentes são os blocos de construção do Construtor de IUpágina. Adicione layouts de coluna e componentes à sua página para criar ou personalizar sua experiência de espaço ou portal. Por exemplo, adicione um layout de coluna e, em uma coluna, coloque um componente de botão que permita que os usuários enviem solicitações.

    Você pode adicionar layouts de coluna, colunas e componentes, bem como navegar entre eles, da fase ou da árvore de conteúdo.

    Um layout de coluna pode conter uma ou mais colunas. As colunas podem conter componentes. Mude o estilo visual dos layouts de coluna, colunas e componentes para torná-lo sua própria experiência.

    Tabela 1. Tipos de elementos de layout de página
    Tipo Descrição
    Layout de coluna Um contêiner flexível com uma a seis colunas. Adicione layouts de coluna para fornecer estrutura e uma estrutura para uma página.
    Coluna Preencha colunas com componentes.
    Componente Elementos-base de uma página, como botões, listas e formulários.
    Modal Use um modal para criar um tipo de página no Construtor de IUque renderiza na parte superior da página e requer ação.
    Popover Um popover é um tipo de contêiner que aparece acima de A. Construtor de IUquando acionado por um evento. Use o componente popover para exibir informações ou ações adicionais relacionadas à página.
    Para obter mais informações, consulte Personalize Construtor de IUpáginas que usam componentes.

    Crie uma página do Construtor de IU

    Crie um Construtor de IUpágina para criar uma experiência de página do zero ou usar um modelo de página. Crie uma página, um componente de cada vez. Se você usar um dos modelos de página predefinidos, começará a partir de uma estrutura base e poderá personalizá-la para atender às suas necessidades.

    Nomeie seu Construtor de IUpágina. Defina o caminho (ou mantenha o caminho padrão que é adicionado automaticamente com base no nome da sua página). Um caminho padrão é adicionado com base no nome da sua página. Você também pode criar seu próprio caminho, mas o caminho deve ser exclusivo. . Visualização de URL mostra o caminho da sua página. Defina o tipo de URL da página. Os tipos de URL ajudam você a categorizar e encontrar páginas importantes na exibição de experiência.

    O escopo da aplicação protege as aplicações identificando e restringindo o acesso a arquivos e dados da aplicação. O escopo da aplicação é padronizado para o escopo em que o usuário está atualmente no ServiceNow AI Platform®. Para obter mais informações sobre o escopo da aplicação, consulte Saiba mais sobre segurança e funções.

    Use um Construtor de IUmodelo de página para criar uma página com base em um modelo de página predefinido e personalizar a página de acordo com suas necessidades. Você pode fazer referência ou copiar um modelo de página. Para obter mais informações, consulte Criar uma página a partir de modelo.

    Criar tela de página onde você insere um nome e caminho de página. Também mostra a configuração do escopo da aplicação.

    Criar uma página do Construtor de IU: Configurações avançadas

    Adicione os parâmetros necessários ao Construtor de IUpágina. Um parâmetro obrigatório é um pedaço de dados que sua página requer, como sys_id, tabela ou consulta. Os parâmetros obrigatórios são úteis para componentes, pois eles podem se vincular ao valor do parâmetro necessário. Por exemplo, você pode adicionar um parâmetro de tabela ao campo de URL e vincular dados a essa tabela. Quando a tabela é referenciada, ela expõe os dados da tabela a todos os componentes na página. Os parâmetros obrigatórios ficam visíveis no URL quando você os adiciona à sua página. No exemplo a seguir, um parâmetro obrigatório chamado tabela foi adicionado. Observe que ele foi anexado ao URL.

    Parâmetro chamado tabela adicionado à página. A URL é anexada com a tabela.

    Adicione parâmetros opcionais ao Construtor de IUpágina. Os parâmetros opcionais são partes opcionais de dados que você pode adicionar ao URL da sua página. Ao contrário dos parâmetros obrigatórios, os parâmetros opcionais são sempre pares de nome e valor que funcionam independentemente da ordem em que são fornecidos.

    Opção Editar parâmetros opcionais.

    Defina as configurações de público e condições para Construtor de IUvariantes de página. Quando você cria uma página, Construtor de IUpor padrão, também cria uma variante da página para você. R a variante de página é uma variação da sua página no mesmo caminho que permite segmentar experiências para públicos diferentes usando critérios de usuário. Por exemplo, uma página para gerentes e uma variante dessa página para os subordinados diretos do gerente. Para obter mais informações sobre como criar uma variante, consulte Criar uma variante de página.

    Página de configurações de variante padrão no Construtor de IU.

    Para obter mais informações sobre públicos, consulte Saiba mais sobre públicos.

    Valores de teste em Construtor de IU

    Adicione um valor de teste ao seu Construtor de IUcomo uma forma de trazer dados de teste para a página para fins de teste. Por exemplo, se você adicionar uma tabela como um parâmetro obrigatório, poderá adicionar um valor de teste de incidente e vincular um recurso de dados a ele para trazer dados de teste sobre o incidente para essa tabela.

    Formulário de valor de teste para páginas do Construtor de IU.

    Para obter valores de teste para mostrar dados, adicione um recurso de dados e configure o recurso de dados para vincular um registro ao valor de teste na URL. Por exemplo, você pode adicionar incidente como um valor de teste. Em seguida, adicione um recurso de dados chamado PESQUISE um único registro . Em Campo de tabela , vincule dinamicamente o valor de teste de incidente a um context.props.table conforme mostrado na imagem a seguir.

    Vincular incidente à tabela.

    Exiba uma página do Construtor de IU existente

    Você pode trabalhar em qualquer Construtor de IUem sua experiência com base nas configurações de sua função. Clique no nome da página na qual você deseja trabalhar enquanto estiver na exibição de experiência da sua experiência.

    Exibição da experiência da experiência da Central de administração.

    No editor de páginas, abra uma variante de página diferente selecionando o menu suspenso no cabeçalho.

    Opção suspensa ao lado de Página onde você pode abrir outra página.

    Crie uma variante de página do Construtor de IU

    Uma variante permite segmentar públicos diferentes com conteúdo diferente, usando critérios de usuário. Por exemplo, você pode criar uma página inicial para agentes e uma variante da página para gerentes que existe no mesmo caminho de URL.

    Você define o público para cada um Construtor de IUvariante de página. O público determina quem usa a variante de página. Por exemplo, se você criar uma página de solicitação de viagem, crie uma variante dessa página para que os gerentes gerenciem as solicitações de viagem do funcionário. Você define o público da página de gerente para qualquer pessoa na função de gerente. Os funcionários não podem exibir essa variante. Para obter mais informações sobre públicos, consulte Saiba mais sobre públicos.

    Para obter mais informações, consulte Criar uma variante de página.

    Edite as configurações da página do Construtor de IU

    Altere as configurações do Construtor de IUA qualquer momento, selecionando o ícone Mais ações Ícone de mais ações de três pontosem seguida Configurações de exibição em Construtor de IUexibição da experiência. Você pode mudar o nome, o caminho e os parâmetros da sua página depois de criar uma página.

    Link de configurações selecionado no menu Mais ações para editar as configurações da página.

    Para obter mais informações, consulte Edite uma página.

    Construtor de IU Árvore de conteúdo

    A árvore de conteúdo no painel de gestão de páginas é importante. Ele não mostra apenas todos os layouts de coluna, colunas e componentes no Construtor de IU, ele permite que você encontre facilmente seus componentes e trabalhe com eles. A árvore de conteúdo é especialmente importante quando você tem vários componentes em sua página. Você seleciona o componente na árvore de conteúdo para destacar o componente na página, facilitando a criação da página.
    Figura 1. Árvore de conteúdo com componentes
    Árvore de conteúdo com componentes.

    Quando você clica em um componente na árvore de conteúdo, ele destaca o componente na fase para que você possa configurar, adicionar estilo, eventos, dados e assim por diante. Você pode arrastar itens na árvore de conteúdo para reorganizar sua página.

    É importante adicionar um rótulo de componente ao adicionar um componente à sua página. O rótulo do componente é usado na árvore de conteúdo para aplicar IDs de rótulos a cada componente na árvore de conteúdo. Você pode identificar os componentes muito mais facilmente na árvore de conteúdo quando eles são rotulados adequadamente.

    Caixa Rótulo do componente em que você adiciona ou edita um rótulo de componente que é exibido na árvore de conteúdo.

    Construtor de IU Caixa de ferramentas

    Use o. Construtor de IUcaixa de ferramentas para adicionar layouts e componentes à sua página. Acesse o. Construtor de IUcaixa de ferramentas selecionando - Adicionar conteúdo ou o. E ícone na fase.

    Caixa de ferramentas do Construtor de IU mostrando opções de layout básicas e avançadas.

    PESQUISE a caixa de ferramentas para encontrar layouts e componentes que você deseja adicionar a um Construtor de IUpágina.

    Para exibir uma breve descrição de um layout ou componente, selecione o ícone de informações Ícone de informações.para exibir a dica de ferramenta. A guia Componentes exibe cores diferentes se um componente puder usar uma predefinição ou estiver empacotado com vários componentes.

    Dica da ferramenta da barra de ação explicando do que o componente é composto.

    Construtor de IU fase

    A fase é a maior área em Construtor de IUe é usado para criar páginas. Adicione layouts de coluna e componentes aqui selecionando um botão de adição ou arrastando do painel de componente para a página.

    A fase do Construtor de IU em que você cria suas páginas.

    No palco, o corpo, os layouts de coluna e as colunas são delineados em magenta. Os componentes são destacados em azul.

    Animação mostrando layouts de coluna e colunas exibidas no palco com um contorno magenta e componentes destacados em azul.

    Use o ícone de item de árvore para navegar para uma camada diferente de conteúdo. Por exemplo, se uma coluna for selecionada, navegue facilmente até o layout da coluna primária ou um componente dentro da coluna.

    Botão de árvore selecionado mostrando a hierarquia do layout da coluna, coluna e componente.

    Selecione o ícone Menu em um layout de coluna ou componente para opções como duplicar e excluir.

    Botão de menu selecionado mostrando opções adicionais.

    As mudanças feitas na fase são refletidas no painel Estilos à direita. As mudanças feitas no painel Estilos atualizam imediatamente os elementos na fase.

    Dimensione o tamanho da fase em Construtor de IU

    Ajuste o tamanho da fase no Construtor de IUSelecionando o menu suspenso Largura.

    Largura suspensa para redimensionar a janela do construtor de páginas para um número específico de pixels.

    Desfazer e Refazer em Construtor de IU

    Desfaça e refaça as mudanças feitas no Construtor de IUpágina. Reverta qualquer ação que você fizer em um layout de página, componente, estilo ou layout.

    A função desfazer e refazer pode ser encontrada na barra de ferramentas do cabeçalho. Você pode selecionar desfazer ( Botão Desfazer.) ou refazer ( Botão Refazer.) para reverter uma ação. Você também pode clicar no menu suspenso Desfazer para voltar várias etapas. Não é possível desfazer e refazer as mudanças feitas na prateleira de dados.

    Você pode desfazer as 20 ações anteriores selecionando o menu suspenso Desfazer.

    Lista de mudanças que podem ser revertidas usando o menu suspenso Desfazer.

    Construtor de IU Painel de configuração

    Use o painel de configuração para trabalhar com componentes, incluindo organizar, estilizar e configurar manipuladores de eventos.

    • Selecione Configuração para configurar componentes. Cada componente tem diferentes opções de configuração que permitem controlar as partes necessárias do componente. Por exemplo, um componente de botão é simples e você só pode configurar sua aparência, rótulo e algumas propriedades. Um componente de lista é mais complicado e contém dezenas de parâmetros de lista editáveis.

      Opções de configuração para um componente de botão, incluindo estilo, rótulo, desabilitar quebra de texto e ocultar a margem inferior.

    • Selecione Estilos no painel de configuração para adicionar estilo a um componente. Você pode usar folhas de estilo em cascata (CSS) baseadas em padrões para mudar o estilo visual de um componente. Por exemplo, adicione ou mude uma cor de fundo, uma borda ou qualquer outro estilo CSS.

      Guia Estilos com opções como alinhamento, dimensionamento, espaçamento, plano de fundo e borda.

      Para obter mais informações, consulte Mude a aparência padrão dos componentes.
    • Selecione Eventos . para configurar eventos que adicionam ações a seus componentes, páginas, recursos de dados e ações declarativas. Quando você adiciona componentes ao Construtor de IU, eles não estão configurados para executar nenhuma ação. 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 excluir um registro.

      Guia Eventos no painel de configuração.

      Para obter mais informações, consulte Gerencie ações nas páginas do Construtor de IU.
    • Coluna l layouts governe como os componentes são organizados em uma página. Quando você adiciona um layout de coluna a um Construtor de IU, você pode configurar como deseja que o layout seja projetado. Depois de adicionar um componente a uma coluna no layout, você pode configurar os elementos de maneiras mais avançadas. Por exemplo, você pode justificar o conteúdo, alinhar itens e definir a altura, largura, margens, plano de fundo, bordas, e preenchimento do layout de coluna, colunas e componentes. CSS grade é o sistema de layout mais poderoso. CSS Grid é construído sobre uma grade bidimensional que lhe dá poder sobre como você cria suas páginas.

      Opções de layout, como alinhamento, direção e dimensionamento.

      Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.

    Abra uma página do Construtor de IU para visualizá-la

    Visualizar um Construtor de IUpágina para ver como a página se parece como uma página da web.

    Selecione Visualize esta variante.botão para testar a variante na qual você está trabalhando no momento, incluindo modais, viewports, componentes, recursos de dados, e dados dinâmicos. Visualizando uma página variante é útil para ver como . e funciona ao criar uma experiência.

    Outro método de visualizar uma página é solicitar o caminho da URL do servidor. Use este método para testar se um usuário vê a variante quando abre a página. Selecione a seta suspensa ao lado de Visualização e selecione Abrir caminho do URL Abra o caminho do URL da página.ou selecione Visualização > Abrir caminho do URL Abra o caminho do URL da página..

    Para obter mais informações, consulte Saiba como exibir e testar seu Construtor de IUexperiência.

    Desenvolvedor editando em Construtor de IU

    No Menu, edite o. Construtor de IUcomo desenvolvedor na plataforma. Esta opção permite alterar os detalhes no nível da plataforma da sua página e retira você de Construtor de IU. Você deve ter a função adequada como desenvolvedor.

    Menu que mostra opções de edição do desenvolvedor, como Abrir coleção de variantes, abrir definição de página e Abrir registro de variante.