Atualização de layouts no Construtor de IU

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 2 min. de leitura

    • Atualize os 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 atualizar 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 de baixo código para configurar layouts de CSS Flexbox e Grade.
    • IU aprimorada para estilização de componente
    • Layouts atualizados não exigem slots

    O que observar após o upgrade de layouts

    As variantes e as 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 evento 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, nos componentes ou no estilo do componente.

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

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

    Atualize seu layout para o novo sistema de layout

    Atualize 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é Todos > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência com a página que você deseja atualizar.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Selecione a página que você deseja atualizar.
      Variantes de página que podem ser atualizadas para o novo sistema de layout.

      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 anterior aQuebec não podem ser atualizadas e devem ser recriadas com o novo sistema de layout.
    4. Selecione o botão Atualizar layout.
      O Construtor de IU atualiza um layout de página para o novo sistema de layout.
      Construtor de IU começa a atualizar o layout da página para o novo sistema de layout. Uma notificação é exibida quando o processo é concluído.
    5. Você pode comparar o 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.
      Compare os layouts antes de rejeitar ou aceitar as mudanças.
      Duas guias do navegador são abertas, uma exibindo seu layout atual e uma exibindo o layout atualizado.
    6. Selecione Manter novo se quiser atualizar a página com o novo sistema de layout ou selecione 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 a atualização para o novo sistema de layout ou selecione Usar antigo para reverter o processo de atualização e retornar a página ao sistema de layout antigo.
      Confirme que deseja manter o layout atualizado para sua experiência.
    8. A página será recarregada com as mudanças aplicadas.
    9. Exiba e teste sua página selecionando o botão Visualizar que abre a variante de página..