Add a viewport component to your page

  • Release version: Xanadu
  • Updated August 1, 2024
  • 1 minute to read

    • Add a viewport component to your page and create a subpage to create separate content on the page.

    Before you begin

    Role required: ui_builder_admin

    Procedure

    1. Navigate to All > Now Experience Framework > UI Builder.
    2. Open an experience to work in or create an experience by selecting Create > Experience.
      See Configure how users interact with your applications in UI Builder for more information on creating experiences.
    3. Open the editor for the page variant that you want to add the viewport to.
      If you haven't created a page for your experience, follow the steps to Create a page in UI Builder.
    4. Select + Add content in the content tree.
    5. Select a Single column layout.
    6. Next, select the + icon in the column to open the toolbox.
    7. Enter viewport in the search box.
    8. Select Viewport.
      Figure 1. Viewport component
      Viewport component selected in the toolbox.
    9. Select the viewport component in the content tree.
    10. Select + Add in the configuration panel.
      Arrow pointing to the +Add button on the configure tab to add page collections.
    11. Select a page collection from the list or create a collection by selecting + Create collection.
      For more information on creating your own page collection, see Create a page collection across multiple UI pages.

      Page collection selection screen with option to create a collection.

    12. Select Add.
      The page collection displays in the Page collections section of the configuration panel. Only one page of the page collection displays in the staging area.
    13. Select Save.
    14. Locate the viewport ID and route.

      You can see the ID and route in the Config panel as shown in the following figure.

      Arrow pointing to the viewport component id on the configure tab.
    15. Add a component to your page to open the viewport you just added, such as a button component.
      For more information, see Add and configure components.
    16. Select the Events tab in the configuration panel.
    17. Select + Add event handler to view the viewport.
      Arrow pointing to the add event handler option on the configure tab for the button component.
    18. From Page-level event handlers, select UXF Macroponent Viewport Load Requested.
      UXF Macroponent Viewport Load Requested event handler selected.
    19. In the viewportElementID element, replace the null value with the viewport ID that you located in a previous step.
      In this example, it is, "viewport_1".
    20. Select Add.
      UXF Macroponent Viewport Load Requested event handler script with viewport element id.
    21. Select Save.
    22. View and test your page by selecting Preview button that opens the page variant..