---
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


---

# Como fazer upgrade de layouts no Construtor de IU

# Como fazer upgrade de layouts no Construtor de IU {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Faça upgrade de layouts criados em Quebec e Rome para o novo sistema de layout.

O sistema de layout Construtor de IU foi aprimorado e atualizado na versão San Diego. Este novo sistema de layout apresenta uma árvore de conteúdo simplificada e um novo painel de estilo para configuração de layout e estilo de componente. Todas as variantes de página recém-criadas usam o novo sistema de layout. Você tem a opção de fazer upgrade para o novo sistema de layout para páginas existentes e personalizadas.  
O novo sistema de layout inclui o seguinte:

* Uma árvore de conteúdo simplificada
* Painel de estilo aprimorado para configuração de layout e estilo de componente
* IU com low-code para configurar layouts de [grade](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) e [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) de CSS.
* IU aprimorada para estilização de componente
* Layouts atualizados não precisam de slots
{#upgrade-layout-uib__ul_vcg_xlg_xrb}

## O que observar após o upgrade de layouts {#upgrade-layout-uib__section_ijq_xll_xrb}

As variantes e páginas são atualizadas individualmente.

Uma página/variante é composta por um layout, componentes e subcomponentes que são encapsulados em um contêiner em um layout com recursos de dados, vinculações de eventos e composição. Somente o layout da sua página é atualizado ao atualizar para o novo sistema de layout, portanto, não há impacto nos dados, componentes ou no estilo do componente.

Todos os slots no sistema de layout antigo são migrados durante o processo de upgrade para o novo layout. O processo de upgrade muda a forma como os contêineres de componentes são estruturados em sua página.

Embora o estilo do componente não seja afetado, pode não haver uma migração de estilo individual de como os componentes foram posicionados. Páginas complexas podem ter desalinhamentos visuais que ocorrem durante o processo de upgrade, pois os estilos são mesclados de slots para contêineres. Alguns problemas devem ser resolvidos manualmente.

## Faça upgrade do seu layout para o novo sistema de layout {#ariaid-title2}

Faça upgrade de suas páginas Construtor de IU para o novo sistema de layout.

### Antes de Iniciar

Função necessária: ui_builder_admin

### Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor de IU.
2. Abra uma experiência com a página da qual você deseja fazer upgrade.  
   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. Selecione a página da qual você deseja fazer upgrade.  

   Você pode encontrar variantes de página que podem ser atualizadas para o novo sistema de layout marcado com um ponto vermelho.  
   Nota:  
   As páginas legadas criadas usando o sistema de layout de linha/coluna pré-Quebec não são atualizáveis e devem ser recriadas com o novo sistema de layout.
4. Selecione o botão Atualizar layout.  
   Construtor de IU começa a atualizar o layout da página para o novo sistema de layout. Uma notificação aparece quando o processo é concluído.
5. Você pode comparar seu layout antigo com o layout atualizado selecionando comparar as duas versões de layout na notificação Layout precisa de revisão antes de editar.  
   Duas guias do navegador são abertas, uma exibindo o layout atual e uma exibindo o layout atualizado.
6. Selecione Manter novo se quiser atualizar a página para o novo sistema de layout ou Usar antigo se quiser manter o layout da página como estava.  
   Um modal aparece solicitando que você confirme sua seleção.
7. Selecione Manter novo para concluir o upgrade para o novo sistema de layout ou Usar antigo para reverter o processo de upgrade e retornar a página para o sistema de layout antigo.  
8. A página é recarregada com as mudanças aplicadas.
9. Exiba e teste sua página selecionando o botão Visualizar (botão ![Visualizar que abre a variante de página]()).