How to pass a parameter to an link to destination event in UI Builder?

[Cory B]

I want to create an event on a page so that when a row is clicked it goes to another page (outside of my application). So Im using the "link to destination" event handler and selecting type "external URL". However, I need to pass a parameter into this URL.  So I tried concatenating the url with data binding but that did not work, it looked something like this:

https://service-now.com/$flow-designer.do?sysparm_nostack=true#/operations/context/@payload.sys_id

Does anybody know how you can go about achieving this?  The source of the parameter would be one of the fields from the list.  You can notice Im trying to create this event under "row clicked"

[Brad Tilton · Accepted solution]

Unfortunately, you can't combine a string and value with the data binding, but I was able to make this work using the following steps:

In the Link to destination event handler, change the Mode from form to Script.

Use the following in the script box:

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
*/
function evaluateEvent({api, event}) {
	return {
		route: null,
		fields: null,
		params: null,
		redirect: null,
		passiveNavigation: null,
		title: null,
		multiInstField: null,
		targetRoute: null,
		external: {
			url:  "$flow-designer.do?sysparm_nostack=true#/operations/context/" + event.payload.sys_id
		}
	};
}

After clicking Apply and saving, when you test you should now get that URL opened in a new tab when clicking on the list.

[Cory B]

Thank you for your response. That worked! One more question. You can see I have this event under "row clicked".  Now If I wanted to pass a different param/field of the row such as name or state, would I just then do event.payload.name or event.payload.state instead of event.payload.sys_id?? See Pic

[Brad Tilton]

Hi Cory, I don't think that row clicked event payload has every field in the list in it, but I'm not sure off the top of my head. One thing you can do is check what it is in the event payload to see what you have access to in the event handler.

If you take a look at 12:38 in this video I show one of my favorite strategies for debugging events, which is to write a client script that logs the payload to the console and firing that client script from the event in question.

If you don't have access you might have to do something a little more complex like:

1. Create a client state parameter to hold the sys_id of the clicked row.
2. Add a lookup record data resource
3. Bind the client state parameter from step 1 to the record property on the data resource
4. Use the event associated with the data resource being returned to pass some data from the data resource.

[DavidHampton]

Where did you find the documentation that detailed external needed to be an object with the url property? I spent ages trying to get external routing to work with a script before finding this.

My assumption it was a boolean and the URL was in route, or the url string was the external prop.