Workspace Builder components for home pages

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Workspace Builder components for home pages

    Workspace Builder in App Engine Studio (AES) enables you to quickly create customized workspaces by assembling various UI Builder components as elements for home pages and contextual side panels. These components enhance the functionality and appearance of your workspace landing pages, helping users interact with data and navigation efficiently.

    Show full answer Show less

    Key Features

    • Data visualization components: Containers for multiple chart types to visually represent data on home pages. You can create new visualizations or reuse existing ones from the library, enabling dynamic insight presentation tailored to your application.
    • Filter components: Allow users to filter data visualizations interactively without altering the underlying visualizations. Filters are configured by selecting a table, field, and other properties, applying to all visualizations sharing the same data source.
    • Heading components: Add titles to your workspace landing pages, improving clarity and navigation for end users.
    • Image components: Insert images to enhance the visual layout of your landing page. Stock images appear by default and can be replaced or resized by specifying image URLs.
    • List components: Display lists on the landing page to organize and present information clearly.
    • Rich text components: Add formatted text to provide explanations or instructions on your landing page, improving user guidance and communication.

    Practical Benefits for ServiceNow Customers

    By using these components, you can build intuitive, data-driven workspace home pages that improve user experience and productivity. Filters enable dynamic data interaction without complex configuration, and diverse visualization options help communicate insights effectively. The ability to add headings, images, lists, and rich text ensures your workspace is informative and visually engaging.

    Several UI Builder components are available as elements to build home pages and contextual side panels in Workspace Builder. Workspace Builder helps you quickly create workspaces in App Engine Studio (AES).

    For complete details on all elements and components, see the ServiceNow® Developer site.

    Data visualization components

    The data visualization component is a container for available chart types for use in Workspace Builder home pages. Select the chart type to display data in different ways depending on your application. You can create a new data visualization or repurpose an existing data visualization by choosing it in the Select visualization from library modal and selecting Add to dashboard.

    For more information on data visualization components, see the following topics and sources:

    Data visualization element to be edited

    Filter components

    Filters enable you to filter data visualizations without modifying the visualizations. Add a filter element when working with the home page in the canvas. Then select a table, field, and other properties to configure the filter. When a user selects one or more values of the field, the filter applies to those data visualizations that are based on the same data source.

    For more information on using filters components to build a workspace, see the following topics and sources:

    Heading components

    Heading components are available in the home pages for workspaces. Add a title to your landing page using a heading component.

    The following image shows a "My Heading" heading.

    Example heading component

    For more information on heading components, see Heading component listing on the Developer site.

    Image components

    Add images to your landing page with an image component.

    When you drag the image component icon (Image component) into the preview pane, a stock image appears that you can change and resize. You can change the stock image by supplying your image's URL.

    Sample image component

    For more information on image components, see the Image component listing on the Developer site.

    List components

    Use a list component to add lists to your landing page.

    When you drag the list component icon (List component) into the preview pane, a sample list appears.

    Sample list component

    For more information on list components, see the List component listing on the Developer site.

    Rich text components

    Add text to your landing page with a rich text component to explain parts of your landing page, for example, "Tackle these priority 1 incidents first."

    Sample rich text component

    For more information on rich text components, see the Rich text component listing on the Developer site.