Dynamically expose data in UI Builder pages (advanced feature)

  • Release version: Yokohama
  • Updated January 30, 2025
  • 6 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 Dynamically expose data in UI Builder pages (advanced feature)

    This advanced feature in ServiceNow's UI Builder enables you to dynamically sync and expose data between ServiceNow tables and UI Builder pages. It allows pages and components to display real-time data and update backend tables as users interact with the page. The core mechanism to achieve this dynamic data exposure is throughdata resources, which fetch and transform data from various ServiceNow sources such as Glide, GraphQL, and REST APIs.

    Show full answer Show less

    Key Features

    • Data Resources: Centralized tools within the data resource drawer that fetch, transform, and sync data to UI Builder components. They support inherited data (from the application context) and local data (added specifically to the page).
    • Data Resource Drawer: Interface to add, configure, and preview data resources, including filtering and event configurations.
    • Data Binding: Multiple binding methods to connect data to components, including:
      • Context Binding: Uses URL parameters to dynamically adjust page data.
      • Data Resource Binding: Connects components to backend data through defined data resources.
      • Component Binding: Links data between components on the same page.
      • Client State Parameter Binding: Synchronizes client-side application state with component data.
    • Data Resource Types: Includes controller, GraphQL, transform scripts, client state, composite, and REST API data resources, each serving specific purposes in data retrieval and manipulation.
    • Controllers: Advanced feature enabling reusable presets that link data and event logic to components for streamlined configuration.
    • Client Scripts: Bindable scripts that allow updating client state through events and enhance component interactivity.
    • Multi-Table Data Configuration: Enables displaying and styling data from multiple tables seamlessly within UI Builder components.
    • Entity View Action Mapper (EVAM) Integration: Standardizes how data from sources is presented in UI Builder cards and lists.

    Practical Application for ServiceNow Customers

    By leveraging this feature, customers can build highly dynamic and interactive pages in UI Builder that reflect live data changes from ServiceNow tables and APIs without manual data duplication. This reduces development effort and improves user experience by ensuring components are synchronized with backend data and each other.

    Using data resources and bindings, customers can:

    • Create pages that adapt content based on URL parameters or user interaction.
    • Reuse data definitions across multiple components and pages, enhancing consistency and reducing maintenance.
    • Configure complex data transformations and filtering directly within the UI Builder environment.
    • Implement client-side logic with scripts and client state parameters to enrich user interactions.
    • Present consolidated data from multiple ServiceNow tables in a flexible and visually consistent manner.

    What to Expect

    Once configured, UI Builder pages will dynamically fetch and display relevant data in real time, allowing users to interact with and update ServiceNow tables through the page components. This results in fluid user experiences and efficient data management without requiring custom backend coding for each page or component.

    Customers can fully control data exposure and synchronization through configurable data resource properties and scripts, making UI Builder a powerful tool for creating tailored, data-driven user interfaces within the ServiceNow platform.

    Sync data between ServiceNow tables and data with the pages you build with UI Builder. Pages display synced data in real time and update data/tables when a user inputs information.

    Learning about data resources in UI Builder

    UI Builder syncs ServiceNow tables/data using data resources. A data resource fetches the data that UI Builder uses to display information in a component. UI Builder components use data resources to sync data across different experiences. Data resources make the data in components dynamic, which means that you don't have to recreate data for every page.

    Data resource stack distributing data to multiple pages.

    Data resources are found in the data resource drawer. The data resource drawer is where you can add and configure a data resource for your page. After you configure the data resource, you can sync the data between components on your page and ServiceNow tables/data.

    Figure 1. Data Resource Drawer
    Arrow pointing to the data resource drawer in UI Builder.
    The data resource drawer contains three sections:
    • Data resources: The data resources that are part of the experience
    • Configuration/Events: Configured data resources and events for the experience
    • Preview: JSON for the information returned by the data resource

    You can bind the configuration properties for components, other data resources, client scripts, client state, and events to these data resources.

    Set conditions for a filter in your data resource. For more information, see Connect data to your components.

    How data resources work in UI Builder

    Data resources fetch data from Glide, GraphQL, and REST APIs, then transform it for use in a component on a UI Builder page.

    Components use both inherited and local data resource instances. Inherited data resources are automatically loaded into a UI Builder page, and local data resource instances can be added and configured. Data resources are evaluated based on specified input values to make sure the right data is retrieved. For more information about inherited and local data resources, see Inherited versus local data resources in UI Builder.

    Local data resources in UI Builder

    You can select local data resources, such as server data, operations, transforms, or client data, like the gForm API, to bring data to the UI Builder page.
    Note:
    Only one GlideForm is supported per page in UI Builder. For more information about GlideForm, see the ServiceNow Developer site.
    Data resources are organized by application in the data resource drawer. They are then further categorized by the data resource type like Server data or Transform. For example, the Global application has several data resources, but the Customer Service Management (CSM) Workspace application has only a few data resources.
    Figure 2. Data resources
    Data resources select modal.

    You see different data resources depending on the application that you are in. If you select the Global application, you will see different data resources under Server data than if you select the CSM Configurable Workspace application.

    Using data binding in UI Builder

    Data binding enables you to create dynamic pages by syncing pages and components to data resources. You can bind data to a component to retrieve data from the back end, and use field parameters to get properties from the URL. Changing the URL parameters enables you to create dynamic pages that show different data depending on the parameters.

    You can bind data to a component in the following ways:

    Context binding

    Use URL parameters to connect parts of the URL with your page's properties. For example, you can link the table name from the URL to your component by using the @context syntax, like this: @context.props.table.

    Imagine you have a UI Builder page with a required field named table. The URL for your page might look like /demo/page/<table-name>. The <table-name> could be something like incident. The data can also come from parent data resources or be local properties specific to the page.

    To link your component properties, other data resource properties, or event details to the page property, you use a @context.props.table binding. Be sure to either provide a test value in the URL or set a fixed value for that property in your page's configuration if you are using context binding.

    Data resource binding

    Use data resources to fetch data from the back end of your instance, such as Client state, GraphQL, or a REST API. These data sources have properties that can be linked to elements on a UI Builder page.

    For instance, if you are using the Lookup Record data resource, you can utilize it in a button component. You might use a data expression in the "label" property like this: @data.lookup_record_1.result.number.displayValue.

    Component binding
    Use component binding to connect one component to another. Let's say that you have a List Menu component on the UI Builder page. The List Menu reveals the currently chosen list to other components on the same page. These other components can access the data by linking to it using an expression such as @elements.list_menu_1.selectedListId.
    Client state parameter binding

    Use client state parameter binding to connect and synchronize data between a client-side application and UI Builder components. Parameter binding allows the client state to automatically update data in components, and vice versa. Use @state syntax to bind a state property to a client state parameter.

    Types of data sources available in UI Builder

    You can use the following data resource types that are shown in the table.

    Table 1. Data resource types
    Data resource type Description
    Controller Encapsulates data and event logic and enables presets for components.
    GraphQL GraphQL queries and mutations that are executed.
    Transform Script that transforms the input data into another format.
    Client state Client-side data resources that include the client information, domain-specific states or logic, user preferences, and so on.
    Composite Single reusable data resource that contains multiple data resources.
    REST Data resources that are made through REST API requests.

    Inherited versus local data resources in UI Builder

    Inherited data resources share information from the surrounding parts of a UI Builder page such as an application. Imagine your page is in a large frame, and it gets some information from the frame or other parts around it. You can use this info by connecting it to your page's properties, kind of like linking puzzle pieces together. If you get this information from the frame, you don't have to get it again yourself.

    Diagram showing the difference between inherited and local data resources.

    Local data resources are items you add to a UI Builder page yourself. Imagine you're making a page for travel requests. You can sync employee data to a list component so employees can request trips linked to their own info.

    To use these data resources, either bring them in from an app or create them in the ServiceNow platform. Then, in UI Builder, make these resources available for your components. Next, tie the data to your component, so it can work with it. For instance, you could have a set of records, expose it in UI Builder, and link it to a component. From there, configure the component to do things with the data, like saving new records.

    Once your page is syncing data, you connect it to the part of the page that needs it such as a component. It's like making sure the right puzzle piece fits in the right spot. Then you can tell that part of the page what to do with the data. For example, you might use it to add new travel plans for employees.

    UI Builder Data resource properties

    When you add a data resource in UI Builder, it's like adding a tool that knows where to get information from. Data resource properties are the instructions that tell a data resource how to bring data into UI Builder pages. These properties tell a data resource which data to get, how to organize it, and what conditions to follow. For instance, you can use these properties to specify which tables to look in, how to sort the data, and more. These properties are what make the data resource work correctly and give you the data you need.

    UI Builder Data resource scripts

    Data resource scripts are special instructions you give UI Builder to return specific pieces of data. For example, if you're dealing with a list of products, a script could tell a data resource to show only products that are available in stock or to arrange them in a particular order. Data resource scripts enable you to customize how UI Builder treats the information, such as adding extra rules or actions.