Add a legacy viewport component use case

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.

   

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

   

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

    

11. Select Create new page.

    

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.

    

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

    

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

    

22. Select Body in the content tree.

    

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

    

25. Select Page ready.

    

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

    

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

    

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

    

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.