In this use case, add a legacy viewport component to a page and create a subpage to create separate content on the page.

Before you begin

Role required: ui_builder_admin

This video shows you how to perform the following procedure.

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.
  2. Open an experience or create an experience by selecting + Create.
    See Configure how users interact with your applications in UI Builder for more information on creating experiences.
  3. Create a page variant and open the page.
    For more information about how to create a page in UI Builder, see Create a page in UI Builder.
  4. Select + Add component in the content tree.
  5. In Search components, enter viewport.
  6. Select the Viewport component.

    Toolbox with black arrow pointing to viewport component.

  7. On the Configure panel, select Replace with viewport.

    Configure panel with configure tab displayed and black arrow pointing to replace with viewport option.

  8. In the pop-up, select Replace with viewport configuration.
  9. Select Save.
  10. On the Configure panel, select Edit content.

    Configure panel with configure tab displayed and black arrow pointing to edit content option.

  11. Select Create new page.

    Experience view with black arrow pointing to create new page button.

  12. In Name, enter subpage.
  13. Select Continue.
  14. Select Looks good.
  15. Select Create.
  16. In the message at the top, select Open in editor.

    Experience view with black arrow pointing to open in editor button within message at top.

  17. Select + Add component in the content tree.
  18. In Search components, enter list.
  19. Select the List - Simple component.

    Toolbox with black arrow pointing to list simple component.

  20. Select Save.
  21. At the top, select Back to Default.

    Editor view with black arrow pointing to back to default option at top.

  22. Select Body in the content tree.

    Content tree with black arrow pointing to body.

  23. In the configuration panel, select the Events tab.
  24. Select + Add event mapping.

    Configure panel with events tab displayed and black arrow pointing to add event mapping option.

  25. Select Page ready.

    Configure panel with events tab displayed and black arrow pointing to page ready option.

  26. In the pop-up, select UXF Macroponent Viewport Load Requested.

    Page ready event mapping popup with black arrow pointing to uxf macroponent viewport load requested option.

  27. In the code, edit the viewportElementId by deleting null and entering "viewport_1".
  28. In the code, edit the route by deleting null and entering "subpage".

    Code window with black arrows pointing to viewport element id and route lines.

  29. Select Add.
  30. Select Save.
  31. To test, select the down arrow on the Preview button and select Open URL path.

    Page with preview button menu displayed and black arrow pointing to open url path option.

  32. When you're finished, close the browser tab showing the URL path.

Result

You added a legacy viewport component to a page and then created a subpage for separate content.