Adicionar um componente de janela de visualização à sua página

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 1 min. de leitura

    • Adicione um componente de janela de visualização à sua página e crie uma subpágina para criar conteúdo separado na página.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    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 IU para obter mais informações sobre como criar experiências.
    3. Abra o editor da variante de página à qual você deseja adicionar a janela de visualização.
      Se você não criou uma página para sua experiência, siga as etapas para Criar uma página no Construtor de IU.
    4. Selecione + Adicionar conteúdo na árvore de conteúdo.
    5. Selecione um layout de coluna única.
    6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas.
    7. Insira janela de visualização na caixa de pesquisa.
    8. Selecione Janela de visualização.
      Figura 1. Componente da janela de visualização
      Componente da janela de visualização selecionado na caixa de ferramentas.
    9. Selecione o componente da janela de visualização na árvore de conteúdo.
    10. Selecione + Adicionar no painel de configuração.
      Seta apontando para o botão +Adicionar na guia Configurar para adicionar coleções de páginas.
    11. Selecione uma coleção de páginas na lista ou crie uma coleção selecionando + Criar coleção.
      Para obter mais informações sobre como criar sua própria coleção de páginas, consulte Criar uma coleção de páginas em várias páginas de IU.

      Tela de seleção de coleção de páginas com a opção de criar uma coleção.

    12. Selecione Adicionar.
      A coleção de páginas é exibida na seção Coleções de páginas do painel de configuração. Somente uma página da coleção de páginas é exibida na área de preparação.
    13. Selecione Save (Salvar).
    14. Localize o ID e a rota da janela de visualização.

      Você pode ver o ID e a rota no painel Configuração, conforme mostrado na figura a seguir.

      Seta apontando para o ID do componente da janela de visualização na guia Configurar.
    15. Adicione um componente à sua página para abrir a janela de visualização que você acabou de adicionar, como um componente de botão.
      Para obter mais informações, consulte Adicionar e configurar componentes.
    16. Selecione a guia Eventos no painel de configuração.
    17. Selecione + Adicionar manipulador de eventos para exibir a janela de visualização.
      Seta apontando para a opção Adicionar manipulador de eventos na guia Configurar do componente do botão.
    18. Em Manipuladores de eventos no nível da página, selecione Carga solicitada da janela de visualização do macroponent do UXF.
      Manipulador de eventos de Carregamento solicitado da janela de visualização do macroponent do UXF selecionado.
    19. No elemento viewportElementID , substitua o valor nulo pelo ID da janela de visualização que você localizou em uma etapa anterior.
      Neste exemplo, é "viewport_1".
    20. Selecione Adicionar.
      Carregamento da janela de visualização do macroponent do UXF Script do manipulador de eventos solicitado com ID de elemento da janela de visualização.
    21. Selecione Save (Salvar).
    22. Exiba e teste sua página selecionando o botão Visualizar que abre a variante de página..