Link an event to another page
-
- UpdatedJan 30, 2025
- 7 minutes to read
- Yokohama
- Building applications
Add a link to the destination event handler within UI Builder so that an event action can open another page. You can also configure the event handler to follow the App Route to the desired page.
Before you begin
Role required: ui_builder_admin
About this task
To configure an event action to open another page, you must know what page you want to open, what the required and optional parameters are for that page, and what payload values to set on the event handler to pass the required parameters to the destination page.
Procedure
-
Select + Add event handler.
-
In the Inherited event handlers section, select Link to destination.
-
Click Select destination.
-
Complete each required parameter field and the applicable parameter fields with an appropriate
@payload.*value.If the developers of your component included default payload values in your event, you can select one through autocompletion. As shown in the following example, the payload value may not match the parameter name.
Note: You have the option to link to an External URL instead of specifying an App route.If no default values are provided, or you can't determine which values are correct for some fields, refer to the configuration and API documentation for the component in the ServiceNow® Developer Site. If you still can't find the necessary
@payload.*values, contact Customer Service and Support.Tip: If you create your linking component by creating a page from a Base Agent Workspace page template, the component contains Link to destination Relay event handlers. These event handlers do not work. However, they contain the applicable@payload.*values for the parameters.
Example: Configuring the event handlers for an Analytics Q&A component
Let's say that you want to take a new Next Experience and add a page with an Analytics Q&A component. First, you create the page from the Analytics Center page template that is provided in the Base Agent Workspace experience. Next, you create a target page for the first of the three events in Analytics Q&A and then you configure an event handler for that event.
By navigating to , you see the Test experience UX application. Because it uses the same Agent Workspace App Shell UI as the Base Agent Workspace, you can use the page templates from the Base Agent Workspace.
You next select the Test workspace admin panel, find an UX App Configuration record with no UX app routes or pages, and then click Open.
As the example shows, in the UI Builder, you have created a page named Analytics Center that is based on the Analytics Center page template from the Base Agent Workspace. Next, you select the option to copy only the contents of the page template.
You select the Analytics Q&A 1 component and open the Events tab. From here, you can open theLink to destination Relay event handler for the Report Visualization
Clicked event. When a question in Analytics Q&A returns a report, you can trigger this event by clicking a value in the report. When you click a value, you also see a list of the records that contribute to
this value. In the Route field, you see that the destination is expected to be a page that is based on the Simple List page template. You also see the parameters of the page that the
@payload.* values correspond to, and that the Title field can be populated with @payload.listTitle.
Next, you navigate to and create a page that is based on the Simple List template. Let's say that you name the page as Record list. You then follow a similar process as when you created the Analytics Center page. This time, in the last
steps of the process, you would add table as a required parameter and listTitle, query, and disableInlineEditing as optional parameters.
Because this page already contains a List component, when you open the Config tab for this component, you see that the parameters are already passed in the @context.props.* values.
Now, you return to the Analytics Center page. In the Report Visualization Clicked event, you add a new event handler. Next, you select the Record list page that you created and add the
@payload.* values in the table, listTitle, and query fields, following the information that you got from the Link to destination
Relay event handler. Predictive typing helps you to fill in these fields.
After you click OK and add @payload.listTitle as the Title, the event handler is done. You can now delete theLink to destination Relay event
handler for this event.
The following example shows an Analytics Center page. On this page, you can enter a query for Incidents by Priority and get a report as a result. Also, by clicking a column, you trigger a Report Visualization Clicked event. The event handler enables you to see a simple list of the incidents in the report.
