Learn how to use the legacy UI Builder to create a custom 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.
This task pertains to the legacy UI Builder which only enables you to create a landing page. Use the new version of UI Builder to create a Configurable Workspace. For more information, see UI Builder.

Role required: workspace_admin or ui_builder_admin

About this task

Before you create your landing page, let's see how UI Builder works by exploring an existing landing page.

Procedure

  1. Navigate to All > Workspace Experience > Administration > All Workspaces and click a workspace to open it.
  2. If the page that opens is not editable, click the here link in To edit this record click here to make the page editable.
  3. Click Open in UI Builder.
  4. In the Page management pane, on the Pages tab, click the Incident Overview landing page.
    This landing page appears in the Stage pane. Notice the Status and Application fields above the Configuration pane. The active status means that the landing page is currently being used. The Application field shows that the landing page is being used by ITSM Agent Workspace. If you clicked:

    • Deactivate, the status would change to Inactive and the landing page would no longer display in workspace.

      Deactivate button would be replaced by the Activate button, which would enable you to publish the landing page in workspace.

      You typically deactivate landing pages when you're working on them. For example, to update the current landing page, you could:
      1. Clone your current landing page.
      2. Work on it in the inactive state.
      3. Make the updated version Active.
      4. Make the original version Inactive.
    • Save button, you would save any changes you made to the landing page. If the Status is:
      • Active, the changes appear immediately in workspace.
      • Inactive, the changes are saved but not published.
  5. Click the components and see how the configuration parameters change in the Configuration pane.
  6. Click Happening Now.

    The container becomes visible around the four, smaller components. Happening Now is the container's label. Look in the Configuration pane under Label. Containers are how you group other components.

  7. With the container still highlighted, slide the Show border slider to the right.

    A border appears, which shows the container.

  8. Slide the Can collapse slider to the right.

    A caret icon (Collapse icon) appears above the container. An agent can click the caret to collapse the container and everything in it.

  9. On the top right of the Configuration pane, click the right arrow (>) to collapse the pane.
  10. In the Stage pane, click the container and then click its configuration icon (Configuration icon).

    Component pop-up window

    The Configuration pane reopens.

    You also notice the move icon (Grab component) that you can use to drag a component around. Don't do that yet.

    The Collapsed slider in the Configuration pane means that the container starts out collapsed and appears as a downward arrow (Expand icon) that an agent can click to expand the container.

    Now that you have seen how to use the different parts of the interface, let's see how to create a landing page.

Create new landing page tutorial

Create a new landing page.

  1. On the Pages tab, click the plus icon (+) to open a new landing page.

    Create new page

    You can also create a new page by clicking Page actions > +New page.

  2. On the OK. Let's get some general info for this page modal, enter the name of your landing page and click Create landing page.

    This title appears above the Stage but not on your landing page.

    Landing page name

Add and configure components tutorial

Add and configure components on a landing page.

  1. Click the +Add component tab and drag an image component into the Stage pane.

    Parameters for the image appear in the Configuration pane.

  2. Drag a data visualization component far below the image and drop it.

    The component does not appear in the Stage pane.

  3. Drag a data visualization component over the image component but do not drop it.
    Move the data visualization component around the edges of the image component.

    The side of the image component highlights when you move the data visualization component over it. Dragging components

  4. Hold the data visualization component over the left side of the image and drop it.

    The data visualization component appears to the left of the image component.

  5. Click and then grab the move icon (Grab component) above the data visualization component and drag it over the bottom edge of the image component and drop it.

    Now, you know how to move a component on the landing space. The data visualization component is blank. Let's fill it so it's visible.

  6. On the Configuration pane, in the Report field, type incident.

    A type-ahead list of possible entries appears.

  7. Click Open incidents by Priority in the list.
    That report opens in the component.
  8. In the Configuration pane, delete Open incidents by Priority and in the PA Widget field, type incident.
    A type-ahead list of possible entries appears. These entries are Performance Analytics (PA) widgets.

    You can only put one data visualization in the component. So, you can either display a report or a PA widget but not both. If you put entries for both a report and a PA widget, UI Builder only displays the report.

    You now know how to add and arrange components on a landing page. Let's now see how to group them.

Group and arrange components tutorial

Group and arrange components on a landing page.

  1. Click Page actions, select Delete page, and then confirm the deletion.
  2. Select the data visualization component, click the trash icon (Trashcan icon) and then the delete check mark icon (Delete component) above the component to remove it.
    You have now deleted components on a landing page. If you like, you can also remove the image component.
  3. Drag a container component into the Stage pane.
  4. In the Component pane, enter a value in the Label field for the container and push the Show border slider to the right so you can see the container.
  5. In the Label field, add a title to the container, for example, Important lists.
  6. Drag a list component into the container.
  7. In the Component pane, in the Table field, enter a value for the table where the list of records comes from, for example, incident.
  8. Drag another list component into the container.

    You can drop the list inside or outside of the container. Drop it inside the container.

    Add list to container

  9. In the Component pane, in the Table field, enter a value for a different table where the list of records comes from, for example, task.

    You now have two list components inside a container component, which has a label that describes the lists.

  10. Continue adding components inside or outside of the container and using the move icon (Grab component) to drag the components around so that you can get used to adding, deleting, moving, and grouping components.
  11. Click Save.

    If you were making a real landing page, you'd also click Activate. Because you're not making a real landing page in this tutorial, let's delete this practice landing page.

Delete a landing page tutorial

Delete a landing page.

Procedure

  1. On the Pages tab, select your landing page.
  2. Under Page actions, click Delete page.

What to do next

You now have an idea how to use UI Builder. You're ready to create your first landing page.