Record List component bundle

  • Release version: Zurich
  • Updated July 31, 2025
  • 3 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 Record List component bundle

    The Record List component bundle is a list component designed to enhance list functionality in ServiceNow by using a dedicated controller that manages actions like sorting, filtering, and grouping. It includes a record list header with declarative actions and pagination controls for easy navigation. Starting with the Zurich release, this component bundle is the default experience for CSM Configurable Workspace record pages for both new and upgraded customers.

    Show full answer Show less

    Key Features

    • Dedicated controller: Manages list actions such as sorting, filtering, and grouping efficiently.
    • Record list header: Supports declarative actions that improve user interaction.
    • Pagination control: Simplifies navigation through multiple list pages.
    • Default in Zurich release: Adopted as the standard list component bundle for CSM Configurable Workspace record pages.
    • Compatibility: Works with default declarative actions included in CSM Configurable Workspace. However, customer declarative actions that open modals require additional configuration.

    Configuring Customer Declarative Actions to Open Modals

    To enable customer declarative actions that open modals on list pages, a two-step configuration process is necessary:

    1. Create a UX add-on event mapping:
      • Navigate to the UX Add-on Event Mapping list and locate the event mapping for LIST#OPENMODAL.
      • Create a new event mapping record tied to the "Create Case" action with parameters including Source Component as Record List Header, Controller as List Controller, and Target Event as Open modal.
    2. Add the modal to the List Page Modals page collection:
      • Use UI Builder to open the CSM/FSM Configurable Workspace experience and select the List bundle default.
      • Add a new modal page (e.g., createcase) to the List Viewport Modal page collection.
      • Configure the modal page settings, including actions and parameters such as table and sysId.
      • Ensure the screen collection points correctly to the modal screen (e.g., Create Case).

    Additional Guidance

    • If you prefer to continue using the previous list bundle component instead of the Record List component bundle, you can deactivate the default List bundle by navigating to All > System Definition > Tables, selecting the UX Screen [sysuxscreen] table, searching for List bundle default, and setting the Active field to false.
    • For detailed information and best practices, refer to the ServiceNow Developer documentation and the Horizon design system resources.

    Practical Benefits for ServiceNow Customers

    By adopting the Record List component bundle, customers gain a modern, configurable list experience that improves usability through declarative actions and pagination. The ability to customize actions that open modals enhances interaction without sacrificing performance or requiring complex coding. This streamlined approach allows ServiceNow customers to tailor list pages in CSM Configurable Workspaces effectively while adhering to platform standards introduced in the Zurich release.

    The Record List component bundle is a list component bundle that uses a dedicated controller to configure list actions such as sorting, filtering, and grouping.

    The Record List component bundle includes a record list header with declarative actions as well as pagination control for navigating list pages.

    Starting with the Zurich release, CSM Configurable Workspace record pages use the Record List component bundle. This list component bundle is the default experience for both new (zboot) and upgrade customers.

    For more information, see the following topics:

    Upgrade information

    The default declarative actions included with CSM Configurable Workspace record pages work with the Record List component bundle.

    Customer declarative actions that open a modal on the list page require some configuration to work with the Record List component. See the example below for details.

    To continue using the previous list bundle component in place of the Record List component bundle:
    1. Navigate to All > System Definition > Tables.
    2. Select the UX Screen [sys_ux_screen] table.
    3. Search for and select List bundle default in the Screen Name column.
    4. Set the Active field to false and select Update.

    Example

    This example uses the Customer Service Case Types application, which includes multiple page variants under a single route. This example details the steps needed to configure a customer declarative action for Create Case that opens a modal on the list page:
    • Create the mapping for a declarative action to open a modal.
    • Make the modal available on the list bundle component.
    Step 1: Create the mapping for a declarative action to open a modal.
    1. Navigate to the UX Add-on Event Mapping [sys_ux_addon_event_mapping] list.
    2. Search for the Create Case event mapping name by filtering the Target Event column: LIST#OPEN_MODAL.
    3. Select Create Case for the event that creates a case on list view.
    4. Right-click the form header and select Insert and Stay to create a new event mapping record. This creates a new record to the existing source declarative action.
    5. Fill in the following fields on the event mapping form:
      • Name = <Enter a unique name>
      • Source Component = Record List Header
      • Controller = List Controller
      • Target Event = Open modal
      For more information, see Create a UX add-on event mapping.
    6. Select Submit.

    Step 2: Make the modal available on the list bundle component.

    To make the modal available, add it to the List Page Modals page collection.
    1. Navigate to All > Now Experience Framework > UI Builder.
    2. Open the CSM/FSM Configurable Workspace experience.
    3. Select List (List bundle default) in the experience header.
    4. In the content tree on the left side, select List Viewport Modal.
    5. In the Configure tab on the right side, select the icon in the Page collections field to display the List page modals page collection.
    6. Create a page under the page collection. For example, create a page called create_case.
      1. Select the + icon next to Pages and variants and then select Create a new page.
      2. Add a name in the Name field and select Continue. For example, add create_case as the name.
      3. Select Build responsive and then select Create. The create_case page is added to the list of pages and variants for the page collection
      For more information, see Page collections.
    7. Go to the app route record and change the screen collection to point to the existing screen collection. For example, the Create Case screen collection.
      1. Select Settings for the create_case page to open the general page settings.
      2. In the Actions field, select Open records and then select Page collection. This displays the List page modals extension point form.
      3. In the create_case app route record, add the required Fields parameters: table,sysId.
      4. Set the Screen Collection field on the create_case app route record to Create Case and then select Update.