Announcing the Global SNUG Board of Directors. Learn more here
on 05-13-2021 11:59 AM - edited on 09-13-2023 01:45 PM by MGOPW
Center of Excellence / UI Builder / UI Builder Quick Start / Making a Page Dynamic with Data |
Event Mapping |
An event mapping in Next® Experience UI Builder is the process of mapping an event's payload or contextual values to the object or handler that acts on that event. There are four event types: component, page, data resource, and declarative action.
Event mapping is an important process within UI Builder. When you build pages with components, you need those components to perform actions for users. For example, if you add a button component to the page, a button-clicked event must be mapped to an event handler. The event handler performs a button-clicked action when selected by a user. Another example could be adding a data resource such as a form, and having an event handler notify the user when the form successfully loads.
The event types that are available are based on the component. For example, declarative action events are available for specific components, such Action bar or List components. The following event types are used in UI Builder.
You choose a type of event based on what action you want to perform on your page. For example, if you want to bind an action to a component, such as a button loading a web page, you would use a component event. But if you want an event to apply to your whole page, such as adding an alert notification to a page, you use a page event. The following table describes each event type available in UI Builder and some examples of how to use the events.
A component event is an action you set up for a component. You set up an event handler to configure that component action. The following example shows the process of adding an event handler to apply an action for a button, such as going to a specific web page.
Type the URL in the Chosen route > External URL field and click OK. The URL must be a fully qualified URL. For example: https://www...
A page event performs an action for the entire page. You can configure the following page events.
Work with Data Resources |
Bind data to your page using data resources to dynamically expose your data from tables and records on your page. You then bind these data properties to components on your page. Data enables you to reuse your components in Next® Experience UI Builder.
A data resource in UI Builder is the data that a page fetches to display content in components. Components use data resources as a way to reuse data and configurations across different experiences, and make the components dynamic on a page. You do not need to build a component from scratch for every page.
You can bind the configuration properties for components, other data resources, client scripts, client state, and events to these data resources.
Data resources fetch data from Glide, GraphQL, as well as REST API. Data resources then update the data it fetches and transforms it for use in a component on a page.
Both inherited data resource instances and local data resource instances are used in components. Inherited data resources are automatically brought in through your page. Use local data resource instances to add and configure additional data resources. You can specify when the resource gets evaluated, as well as supply input values so the data resource knows how to get the right data.
You choose local data resources to bring your own data to your page in UI Builder. These data resources can be server data, operations, transforms, or client data like the gForm API. Data resources are organized by the application that owns them. They are further organized by the data resource type like Server data or Transform. For example, there are several data resources in the Global application but only a few in the CSM Workspace application.
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.
Data Resource |
Definition |
Server data |
The server data resources grab data from a server. They include the following:
|
Operations |
The Operations data resources let you perform actions. They include the following:
|
Transform |
The Transform data resources let you perform transforms. They include the following:
|
Client data |
The Client data resources include the following:
|
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.
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 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 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.
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.
Have you been able to link to an external destination in the same window? Mine keeps opening up in a new window and this is not the requirement I was given.
Hot on the heels of Mobile app builder and Flow designer we have another wonderful bloated, and over-engineered Next Experience application by ServiceNow. There's a resource problem, and this is ServiceNow's solution to overcome it by making UI builder so complex one needs to be a web developer to even begin to understand it. And that's after one battles the drag-and-drop "ability" without breaking the page layout entirely.
And I know I'm not the only one feeling this way towards SN approach to this direction of "development" apps. Developers can't stand them and if these are meant to solve the retention of resources and the lack of skills in the industry this couldn't be further from helping.
Another disaster.
Date-time component not rendering on UI is this bug or the component still not published to use?