Workspace Builder components for home pages

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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) provides a variety of UI components to help ServiceNow customers efficiently create home pages and contextual side panels for workspaces. These components enable you to design customized, data-driven landing pages that improve user experience and information accessibility.

    Show full answer Show less

    Key Features

    • Data Visualization Components: Containers for multiple chart types that display data in various formats. You can create new visualizations or reuse existing ones from the library. These charts dynamically present insights relevant to your applications.
    • Filter Components: Allow users to filter data visualizations interactively without altering the underlying charts. Filters are configured by selecting tables and fields, applying selections to all visualizations sharing the same data source.
    • Heading Components: Enable addition of titles and headings to home pages, helping organize and clarify page content.
    • Image Components: Facilitate embedding images on landing pages. You can use default stock images or replace them with custom images via URLs and adjust their size.
    • List Components: Provide the ability to add lists to landing pages, useful for displaying items such as tasks or priorities.
    • Rich Text Components: Support adding formatted text to explain or highlight important information on the page, enhancing communication and guidance.

    Practical Use and Benefits

    These components combined empower ServiceNow customers to quickly build intuitive and interactive home pages tailored to specific workspace needs. The ability to integrate dynamic data visualizations with filters ensures users see relevant, actionable insights. Heading, image, list, and rich text components help create well-structured, visually appealing pages that improve user engagement and productivity.

    By leveraging these components, you can streamline workspace development in AES, enhance end-user experience, and effectively communicate key information on landing pages.

    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.