UI Builder – Making a Page Dynamic with Data
You see different data resources depending on the application you are in. If you choose the Global application, you see different data resources under Server data than if you choose CSM Configurable Workspace application and Server data. The following table shows the data resources available for the Global application.
| | | |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Server data | The server data resources grab data from a server. They include the following: Aggregation Query Build route map Canvas_User_Session_DB_GQL Dynamic Routing EVAM Data Resource Fetch EVAM Data Fetch EVAM Metadata Filtered Incidents GlideRecord Collection Query GlideRecord Query Look Up Properties Look Up Records Look Up Users Look Up User Preferences Search EVAM Data Resource Table route map |
| Operations | The Operations data resources let you perform actions. They include the following: Create Record Delete Multiple Records Delete Record Update Multiple Records Update Record |
| Transform | The Transform data resources let you perform transforms. They include the following: Bind data to component prop Canvas_User_Session_DB_Transform Data Driven Items Data Driven Tabs Transform Get Incident Caller Greetings Now DateTime Substitute Query Variables |
| Client data | The Client data resources include the following: Service Catalog Glide Form |
What is data binding
Use data binding to bind properties to static components to make a dynamic page. When you first add a component to a page, it is static, meaning it does not perform any action. Add data resources to fetch data from the back end of your instance to connect a component to data. For example, a Content tree component doesn't show any data until you bind it to a data resource that pulls in content. You use field parameters to get data resource properties from the URL, like table name or sysID.
You can bind data to a component in the following ways.
- Context binding. Use required or optional URL parameters to bind context property fields in the URL. For example, like binding the table name from the URL into your component using @context syntax, such as @context.props.table.
For example, say that your page has a required field on it called table. The URL that resolves to your page would then be something like /demo/page/. The could be incident. Data could also come from the parent data resources, or be local page properties that don’t map to anything. You bind component properties, other data resource properties, or event payload properties to the page property with a @context.props.table context binding. If you are using a context binding, make sure that you have supplied a test value on the URL, or a static value for that property in the body configuration of your page. - Data resource binding. Add data resources to fetch data from the back end of your instance, such as Client state, GraphQL, or a REST API. Data resources expose properties that you can bind to components and elements on a page.
For example, say that you have a Lookup Record data resource. In a button component, you could use a data expression in the label prop like @Data.lookup_record_1.result.number.displayValue. - Component binding. Use component binding to bind one component to another. Say that you have a List Menucomponent on the page. It exposes the currently selected list to other components on the page. Other components could get the data by binding to it with an expression such as @elements.list_menu_1.selectedListId.
- Client state parameter binding. 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 in UI Builder.
| Data Resource Type | Description |
|---|---|
| GraphQL | Executes GraphQL queries and mutations. |
| Transform | A script transforms input data into another format. |
| Client state | Client-side data resources. Includes client information, domain-specific state or logic, user preferences, and so on. |
| Composite | Compose multiple data resources into a single reusable data resource. |
| REST | Data resources made through REST API requests. |
Inherited versus local data resources
Inherited data resources come from the parent page or pages that surround your current page. For example, there may be data resources coming from the application shell of your UX application, or data resources from the page surrounding a tab set. Inherited data resources are available for you to use and expose to your page by binding to them in the body properties for your page and mapping them to local page (context) properties. You do not need to add your own data resource if the data you need is already being supplied through inheritance.
Local data resource instances are data resources that you add to the page. Think of local data resources as specific data resources you add yourself. You expose local data resources to a component on a page.
For example, if you are creating a travel request page, you can expose employee records to a list component. Employees can then create travel requests associated with their own employee data.
You can add a data resource from an application. Or, you can create a local data resource in ServiceNow platform Lists and Forms. You then use UI Builder to expose that data in UI Builder for components on your page.
Once the data is available to your page, bind the data to your component so the component can use the data. For example, you can create a data resource for a set of records. You then expose that set of records in UI Builder. Finally, you bind that set of records to a component. You then configure the component to perform an action on that data, such as save a new record.
Data resource properties
Data resource properties can be thought of as how the data resource fetches the data. The properties of a data resource get exposed when you add the data resource to UI Builder. The properties define everything about the data resource. For example, tables, conditions, how to order them, and so on.
Data resource scripts
When you add a data resource to your page, you see a preview of the outputs of that data resource if all the required properties have been configured. The output preview is a good way of seeing how the data gets retrieved so you can quickly determine if the data you need is present.
https://www.servicenow.com/community/next-experience-articles/ui-builder-making-a-page-dynamic-with-data/ta-p/2331906
