Add components to a landing page in UI Builder

Watch

Save as PDF

Share this page

Feedback

Configure user experiences

HomeXanadu Now Platform user interfaceConfigure user experiencesConfigure UIs and portalsWorkspace UISetting up your legacy workspaceSetting up landing pages in a legacy workspaceCreating custom landing pages for workspacesAdd components to a landing page in UI Builder

Table of Contents

Add components to a landing page in UI Builder

Release version:
Xanadu
Yokohama
Washington DC
Vancouver
UpdatedAug 1, 2024
3 minutes to read

Xanadu
Navigation and UI

Drag and drop components into the Stage pane to create a landing page.

Before you begin

Important: The builder described on this page is for building and editing landing pages in all workspaces except CSM. For information about the new UI Builder that builds and edits all pages in CSM Workspace, see UI Builder.

You must have created a landing page.
Role required: workspace_admin or ui_builder_admin

About this task

You add components to landing pages by dragging and dropping components from the +Add component tab into the Stage pane.

Procedure

Navigate to All > Workspace Experience > Administration > All Workspaces and click a workspace to open it.
If the page that opens is not editable, click the here link, in To edit this record click here.
Click Open in UI Builder.
In the Page management pane, on the Pages tab, click the landing page that you want to add components to.
Click the +Add component tab to open the list of components that you can add to your landing page.
Add components by dragging one component at a time from the +Add component tab into the Stage pane.
When you drag a component, click it first to select it. A box appears around the component when it's selected. When you drop components into the Stage pane, make sure to point to a component that's already on the landing page. Highlights appear where you can drop the component. For more information about dragging and dropping, see the tutorial.
You can add these components:
- Container—Container in which you can group other components, for example, a heading and two data visualization reports. For more information, see Container component in UI Builder.
- Report/PA Widget—Performance Analytics and Reporting visualizations. These values can be updated periodically. For more information, see Data visualization component.
- Image—Image. For more information, see Image component in UI Builder.
- Rich text—String to use anywhere on the landing page. For more information, see Rich Text component in UI Builder.
- Data visualization— New report visualizations, and visualizations from existing reports and widgets. These values can be updated periodically. For more information, see Container component in UI Builder.
- Heading—String to use as the title of a landing page. For more information, see Heading component in UI Builder.
- List—List of records that come from a single table. For more information, see List component in UI Builder.
(Optional) To remove a component from your landing page:
1. Click the component and click the trashcan icon () that appears.
2. Confirm the deletion by clicking the check mark icon () in the Delete element? pop-up window.
(Optional) To move a component, click it, use your mouse to grab the move icon (), and drag the component to a new location.
Click each component in the Stage pane and enter values for the component properties that appear in the Configuration pane.

For descriptions of component properties, see the Component reference for UI Builder.
Click Save.
Click Activate when you're ready to use the landing page.