--- 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 --- # Gerenciar Construtor de IU páginas e variantes de página # Gerenciar Construtor de IU páginas e variantes de página {#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 o que é uma página em Construtor de IU. Entenda os blocos de construção de uma página Construtor de IU, como layouts de coluna e componentes. ## Construtor de IU início rápido {#work-pages__section_vbh_3ls_jpb} Crie páginas em Construtor de IU como parte de um espaço ou experiência de portal personalizada. Construtor de IU páginas consistem em layouts e [componentes](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-ui-builder "Use a biblioteca de componentes do Construtor de IU para criar páginas. Os componentes têm uma interface que um usuário final pode exibir e interagir. Os componentes podem se comunicar por meio de eventos e propriedades. Os componentes usados com frequência incluem Cabeçalho, Imagem, Lista, Formulário e Botão."). Você cria uma página usando layouts de coluna e componentes para orientar um usuário em 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 aos usuários adicionar e enviar solicitações de viagem. A maneira como você cria sua página é ilimitada. Nota: Um desenvolvedor deve trabalhar em qualquer [variante](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-variant-ui-builder "Versão de uma página do Construtor de IU com acesso controlado por função ou condição. Crie variantes de páginas para direcionar experiências para diferentes públicos. Por exemplo, crie uma página inicial para agentes e uma variante para gerentes na mesma URL. Como alternativa, crie uma variante de página que os usuários vejam em condições diferentes.") de cada vez. ## Layouts de coluna e componentes no Construtor de IU {#work-pages__section_iyh_td2_4nb} Layouts de coluna e componentes são os blocos de construção da página Construtor de IU. Adicione layouts de coluna e componentes à sua página para criar ou personalizar seu espaço ou experiência de portal. Por exemplo, adicione um layout de coluna e, em uma coluna, coloque um componente de botão que permite que os usuários enviem solicitações. Você pode adicionar layouts de coluna, colunas e componentes, bem como navegar entre eles, na fase ou na árvore de conteúdo. Um layout de coluna pode conter uma ou mais colunas. As colunas podem conter componentes. Altere o estilo visual de layouts de coluna, colunas e componentes para torná-lo sua própria experiência. {#work-pages__table_dv3_chr_24b__entry__2} | 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 as colunas com componentes. | | Componente | Elementos base de uma página, como botões, listas e formulários. | | [Modal](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-modal "Janela de experiência do usuário que se sobrepõe a outra janela de conteúdo e assume o controle da experiência do usuário.") | Use um modal para criar um tipo de página em Construtor de IU que é renderizado na parte superior da página e requer uma ação. | | [Popover](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-popover-ui-builder "Uma sobreposição de página que permite que os usuários continuem usando o restante da página. Os popovers podem ser configurados assim como as páginas do Construtor de IU com texto, componentes, imagens, campos e itens de menu.") | Um popover é um tipo de contêiner que aparece acima de uma página Construtor de IU quando acionado por um evento. Use o componente popover para exibir informações adicionais ou ações relacionadas à página. | [Tabela 1. Tipos de elementos de layout de página] {#work-pages__table_dv3_chr_24b}Para obter mais informações, 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."). ## Criar uma página do Construtor de IU {#work-pages__section_b3v_xjq_snb} Crie uma página Construtor de IU para criar uma experiência de página a partir do zero ou use um modelo de página. Crie uma página com um componente de cada vez. Se você usar um dos modelos de página predefinidos, iniciará a partir de uma estrutura base e poderá personalizá-la para atender às suas necessidades. Nomeie sua página Construtor de IU. Defina o caminho (ou mantenha o caminho padrão que é adicionado automaticamente com base no nome da página). Um caminho padrão é adicionado com base no nome da página. Você também pode criar seu próprio caminho, mas o caminho deve ser exclusivo. A visualização da URL mostra o caminho da sua página. O escopo da aplicação protege as aplicações identificando e restringindo o acesso a arquivos e dados de aplicações. O padrão do escopo da aplicação é o escopo em que o usuário está atualmente dentro de Now Platform®. Para obter mais informações sobre o escopo da aplicação, 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."). Use um modelo de página Construtor de IU para criar uma página com base em um modelo de página predefinido e personalize 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](https://servicenow-prod.fluidtopics.net/ZZR7QsMHgfbVYvpxDuuhaA "Use um modelo para criar uma página com base em um modelo de página predefinido. Um modelo de página pode ajudar a criar páginas mais rapidamente e manter as páginas consistentes em uma experiência. Os modelos de página podem incluir componentes, recursos de dados e um layout."). ## Criar uma página do Construtor de IU: configurações avançadas {#work-pages__create_page_advanced_settings} Adicione os parâmetros necessários à sua página Construtor de IU. Um parâmetro obrigatório é uma parte dos dados que sua página requer, como sys_id, tabela ou consulta. Os parâmetros obrigatórios são úteis para componentes, pois podem ser vinculados ao valor do parâmetro necessário. Por exemplo, você pode adicionar um parâmetro de tabela ao campo de URL e vincular os dados a essa tabela. Quando a tabela é referenciada, ela expõe os dados da tabela a todos os componentes da página. Os parâmetros obrigatórios ficam visíveis no URL quando você os adiciona à 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. O URL é anexado à tabela.]() Adicione parâmetros opcionais à sua página Construtor de IU. Parâmetros opcionais são dados opcionais 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 IU variantes de página. Quando você cria uma página, Construtor de IU também cria uma variante da página para você por padrão. Uma variante de página é uma variação da sua página no mesmo caminho que permite direcionar experiências para diferentes públicos usando critérios do usuário. Por exemplo, uma página para gerentes e uma variante dessa página para subordinados diretos do gerente. Para obter mais informações sobre como criar uma variante, consulte [Criar uma variante de página](https://servicenow-prod.fluidtopics.net/PM2wVmjGKdButslttxIKsg "Uma variante de página em Construtor de IU é uma variação de uma página que existe no mesmo caminho que tem como meta públicos diferentes usando critérios do usuário."). Para obter mais informações sobre públicos, consulte [Saiba mais sobre públicos](https://servicenow-prod.fluidtopics.net/7e1X77y8KouDZZNMy7q4Nw "Saiba como aplicar os públicos corretos às suas páginas Construtor de IU."). ## Testar valores em Construtor de IU {#work-pages__section_kv2_xdx_g4b} Adicione um valor de teste à página Construtor de IU como uma maneira 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. 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 no URL. Por exemplo, você pode adicionar um incidente como um valor de teste. Em seguida, adicione um recurso de dados chamado Pesquisar um único registro. No campo Tabela, vincule dinamicamente o valor de teste de incidente a uma tabela `context.props.table`, conforme mostrado na imagem a seguir. ## Exibir uma página existente do Construtor de IU {#work-pages__section_pzv_5mq_snb} Você pode trabalhar em qualquer página Construtor de IU em sua experiência com base em suas configurações de função. Clique no nome da página em que você deseja trabalhar na exibição de experiência da sua experiência. Enquanto estiver no editor de páginas, abra uma página diferente variante selecionando o menu suspenso no cabeçalho. ## Criar uma variante de página do Construtor de IU {#work-pages__section_oc2_tnq_snb} Uma variante permite que você direcione diferentes públicos com conteúdo diferente, usando critérios do 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 URL caminho. Você define o público para cada variante de página Construtor de IU. 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 dos funcionários. Você define o público da página do 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](https://servicenow-prod.fluidtopics.net/7e1X77y8KouDZZNMy7q4Nw "Saiba como aplicar os públicos corretos às suas páginas Construtor de IU."). Para obter mais informações, consulte [Criar uma variante de página](https://servicenow-prod.fluidtopics.net/PM2wVmjGKdButslttxIKsg "Uma variante de página em Construtor de IU é uma variação de uma página que existe no mesmo caminho que tem como meta públicos diferentes usando critérios do usuário."). ## Editar configurações de página do Construtor de IU {#work-pages__section_ozc_t4q_snb} Altere as configurações da página Construtor de IU a qualquer momento selecionando Configurações na exibição da experiência Construtor de IU. Você pode mudar o nome, o caminho e os parâmetros da página depois de criar uma página. Para obter mais informações, consulte [Editar uma página](https://servicenow-prod.fluidtopics.net/engpDuIVwKhbBDAaUQKphQ "Edite uma página para mudar o nome, o caminho e os parâmetros da página."). ## Construtor de IU Árvore de conteúdo {#work-pages__content-tree} A árvore de conteúdo no painel de gerenciamento de páginas é importante. Ele não apenas mostra todos os layouts de coluna, colunas e componentes na página Construtor de IU, como permite que você encontre facilmente seus componentes e trabalhe com eles. A árvore de conteúdo é especialmente importante quando você tem vários componentes na página. Você seleciona o componente na árvore de conteúdo para destacá-lo na página, facilitando a criação da página.Figura 1. Árvore de conteúdo com componentes Quando você clica em um componente na árvore de conteúdo, ele é realçado 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 à 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 com muito mais facilidade na árvore de conteúdo quando eles são rotulados corretamente. ## Construtor de IU Caixa de ferramentas {#work-pages__section_str_ltm_gxb} Use a caixa de ferramentas Construtor de IU para adicionar layouts e componentes à sua página. Acesse a caixa de ferramentas Construtor de IU selecionando + Adicionar conteúdo ou o ícone + na fase. Pesquise a caixa de ferramentas para encontrar layouts e componentes que você deseja adicionar a uma página Construtor de IU. Exiba uma breve descrição de um layout ou componente selecionando o ícone de informações ícone ![de informações.]() para exibir a dica da ferramenta. A guia de componentes exibirá cores diferentes se um componente puder usar uma predefinição ou estiver combinado com vários componentes. ## Construtor de IU fase {#work-pages__section_fr1_mmr_snb} A fase é a maior área no editor Construtor de IU e é usada para criar páginas. Adicione seus layouts de coluna e componentes aqui selecionando um botão + ou arrastando do painel Componente para a página. Na fase, o corpo, os layouts de coluna e as colunas são contornados em roxo. Os componentes são destacados em azul. Use o ícone de item de árvore para navegar até uma camada diferente de conteúdo. Por exemplo, se uma coluna estiver selecionada, navegue facilmente até o layout da coluna primária ou um componente dentro da coluna. Selecione o ícone de Menu em um layout de coluna ou componente para opções como duplicar e excluir. 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. ## Dimensionar o tamanho da fase em Construtor de IU {#work-pages__section_bd3_xc5_x5b} Ajuste o tamanho da fase no editor Construtor de IU selecionando o menu suspenso Largura. ## Desfazer e Refazer em Construtor de IU {#work-pages__section_s4x_2gm_5wb} Desfaça e refaça as mudanças feitas na página Construtor de IU. Reverta qualquer ação que você fizer em um layout de página, componente, estilo ou layout. A função de desfazer e refazer pode ser encontrada na barra de ferramentas do cabeçalho. Você pode selecionar o botão de desfazer ( ![botão Desfazer]()) ou refazer ( ![botão Refazer]()) para reverter uma ação. Você também pode clicar no menu suspenso de desfazer para voltar várias etapas. Você não pode desfazer e refazer mudanças feitas na prateleira de dados. Você pode desfazer as 20 ações anteriores selecionando o menu suspenso de desfazer. ## Construtor de IU Painel de configuração {#work-pages__section_s2r_ydr_snb} Use o painel de configuração para trabalhar com componentes, incluindo organização, estilo e configuração de manipuladores de eventos. * Selecione a guia Configuração para configurar os 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 complexo e contém dezenas de parâmetros de lista editáveis. * Selecione a guia 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 altere uma cor de plano de fundo, uma borda ou qualquer outro estilo CSS. 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."). * Selecione a guia Eventos para configurar eventos que adicionam ações aos seus componentes, páginas, recursos de dados e ações declarativas. quando você adiciona componentes à sua página Construtor de IU, eles não sã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 a exclusão de um registro. Para obter mais informações, consulte [Gerenciar ações nas páginas do Construtor de IU (recurso avançado)](https://servicenow-prod.fluidtopics.net/DGcmaC3dw6Q7Mii9xIi4fw "Aprenda a trabalhar com eventos para que você possa adicionar ações a componentes, páginas, recursos de dados e ações declarativas em Construtor de IU."). * A coluna layouts controla como os componentes são organizados em uma página. Ao adicionar um layout de coluna a uma página 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, a largura, as margens, o plano de fundo, as bordas e o preenchimento do layout de coluna, das colunas e dos componentes. A grade CSS é o sistema de layout mais poderoso. A Grade de CSS foi criada sobre uma grade bidimensional que oferece poder sobre como você cria suas páginas. 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."). {#work-pages__ul_emz_w2r_snb} ## Abra uma página do Construtor de IU para visualizá-la {#work-pages__section_gd4_4xq_snb} Visualize uma página Construtor de IU para ver como ela é como uma página da Web. Selecione ![Visualizar esta variante.]() botão para testar a variante na qual você está trabalhando no momento, incluindo modais, janelas de visualização, componentes, recursos de dados e dados dinâmicos. Visualizar uma variante de página \] é útil para ver como parece 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 ao abrir a página. Selecione a seta suspensa ao lado de Visualizar e escolha Abrir caminho da URL ![Abra o caminho da URL da página.]() ou selecione Visualizar \> Abrir caminho da URL ![Abra o caminho da URL da página.](). Para obter mais informações, consulte [Saiba como exibir e testar sua experiência Construtor de IU](https://servicenow-prod.fluidtopics.net/3m4vPiWUowvii7SqgiAfdg "Visualize sua experiência em Construtor de IU para ver como ela é e funciona ao criar uma experiência. A visualização ajuda a garantir que sua experiência funcione conforme o esperado, que os recursos de dados estejam disponíveis e que os layouts estejam configurados corretamente."). ## Edição de desenvolvedor em Construtor de IU {#work-pages__section_wc4_tyq_snb} No Menu, edite a página Construtor de IU como desenvolvedor na plataforma. Esta opção permite que você altere os detalhes no nível da plataforma da sua página e tira você de Construtor de IU. Você deve ter a função apropriada como desenvolvedor. * **[Criar uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg)** Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários. * **[Editar uma página](https://servicenow-prod.fluidtopics.net/engpDuIVwKhbBDAaUQKphQ)** Edite uma página para mudar o nome, o caminho e os parâmetros da página. * **[Adicionar um público à sua página Construtor de IU](https://servicenow-prod.fluidtopics.net/UARVwU_HrpL3lXzI6NppbQ)** Adicione um ou mais públicos à sua página ou variante de página. * **[Testar valores em uma página](https://servicenow-prod.fluidtopics.net/vY7hkBARO8C62ngmVyx3Iw)** Adicione valores de teste ao URL como uma maneira de trazer dados de teste para uma página. * **[Criar uma variante de página](https://servicenow-prod.fluidtopics.net/PM2wVmjGKdButslttxIKsg)** Uma variante de página em Construtor de IU é uma variação de uma página que existe no mesmo caminho que tem como meta públicos diferentes usando critérios do usuário. * **[Autoria dinâmica](https://servicenow-prod.fluidtopics.net/MuYCwzMEquUA9HOUphag~w)** Use a criação dinâmica para criar Construtor de IU páginas que se ajustam perfeitamente a diferentes fatores forma (tamanhos), como desktop, tablet e dispositivos móveis. * **[Saiba como exibir e testar sua experiência Construtor de IU](https://servicenow-prod.fluidtopics.net/3m4vPiWUowvii7SqgiAfdg)** Visualize sua experiência em Construtor de IU para ver como ela é e funciona ao criar uma experiência. A visualização ajuda a garantir que sua experiência funcione conforme o esperado, que os recursos de dados estejam disponíveis e que os layouts estejam configurados corretamente.