Hi,
I have recently encountered challenges while working with the UI Builder, particularly due to its insufficient documentation. As a result, I would like to share a workaround I developed to emit an event handler using a client script. Although this may not be the most efficient method, given the limited documentation on the api.emit() function, it is currently the best solution I have found. I hope this will be useful for others as well. If any ServiceNow employees can provide guidance on properly triggering event handlers (such as LIST_CTRL#REFRESH_REQUESTED) with the required object properties, it would be greatly appreciated.
In some scenarios, users may need to trigger an event after a POST request or after manipulating data resources with a client script. In my case, I needed to refresh the Form Page in the workspace to display a new view. To achieve this, add the following code to the client script:
if(tab != api.context.props.selectedTabIndex){
helpers.timing.setTimeout(() => {
api.emit('CONTENT_UPDATED', {
params: {
selectedTabIndex: tab,
query: api.context.props.inputQuery,
views: api.context.props.forcedViewName,
extraParams: api.context.props.inputExtraParams
}
});
}, 500);
}
Additionally, you can dynamically change the properties of the workspace page with a client script, such as redirecting the user to another tab or displaying a view based on the selected tab on the form.
The CONTENT_UPDATED data broker triggers a refresh request. However, if you need to trigger another event handler, you can add a new event handler in the body of the page that should be triggered when a property changes. To do this, create a new property related to triggering the event (similar to how state is used).
- Select an event handler from the list.
- Add a condition to trigger it only on the specific parameter.
You may also want to add an event handler to a custom client script that emits a new content update to set the boolean property to false to prevent multiple triggers.
For actions requiring a longer wait time, you can emit the loading state to block the user until the operation is complete. This is done by emitting a loading state and subsequently emitting another event to set the loading state to false, thus removing the block.
api.emit("NOW_UXF_PAGE#SET_LOADING_STATE", {
id: "page_load_blocker",
loading: true,
label : "Please wait as page loads"
});
I hope this workaround proves helpful to others. Please feel free to reach out if you have any questions or additional insights.
