BLOG : How to Open a Link with Dynamic Parameters in a New tab by clicking on Button

[Sushma Pavani K]

Overview

In ServiceNow, it’s common to integrate with external tools such as monitoring dashboards, reporting platforms, or automation systems. A frequent requirement is to open these tools directly from a record, passing contextual data like Incident Number or Caller — without users having to re-enter information.

This article explains how to:

• Create a button (UI Action) on the Incident form
• Open an external URL in a new browser tab
• Pass dynamic Incident parameters
• Support both Native UI and Workspace
• Avoid common URL-breaking mistakes using encodeURIComponent()

Use Case / Task

Requirement
On the Incident form, add a UI Action / Button that opens an external monitoring or reporting tool in a new browser tab, passing dynamic Incident details such as:

• Incident Number
• Incident Sys ID
• Caller
• Priority

This is commonly used to:

• Open third-party tools (monitoring, reporting, automation)
• Pass Incident context without re-entering data
• Ensure consistent behavior in Native UI and Workspace

Example Scenario

When a user clicks “Open External Dashboard”:

• A new browser tab opens
• An external system receives Incident details as URL parameters
• The user immediately sees context-aware data in the external tool

Native UI (UI Action – Client Side)

UI Action Configuration

• Table: Incident
• Client: ✔️
• Onclick: openExternalDashboard();

Client Script (Native UI)

function openExternalDashboard() {

    var incidentSysId = g_form.getUniqueValue();

    var incidentNumber = g_form.getValue('number');

    var priority = g_form.getValue('priority');

    var callerName = g_form.getDisplayValue('caller_id');

    var targetUrl =

        'https://external-tool.example.com/dashboard?' +

        'incident_id=' + encodeURIComponent(incidentSysId) +

        '&incident_number=' + encodeURIComponent(incidentNumber) +

        '&priority=' + encodeURIComponent(priority) +

        '&caller=' + encodeURIComponent(callerName);

    window.open(targetUrl, '_blank');

}

Why this works in Native UI

• window.open() is fully supported
• g_form and g_user APIs are directly available
• Opens the link in a new browser tab
• Simple and reliable for classic UI

Workspace (UI Action – Client Script)

In Workspace, direct use of window.open() is not recommended. Instead, ServiceNow provides the supported open() method.

Workspace Button Script

function onClick(g_form) {

    var incidentSysId = g_form.getUniqueValue();

    var incidentNumber = g_form.getValue('number');

    var priority = g_form.getValue('priority');

    var callerName = g_form.getDisplayValue('caller_id');

    var targetUrl =

        'https://external-tool.example.com/dashboard?' +

        'incident_id=' + encodeURIComponent(incidentSysId) +

        '&incident_number=' + encodeURIComponent(incidentNumber) +

        '&priority=' + encodeURIComponent(priority) +

        '&caller=' + encodeURIComponent(callerName);

    open(targetUrl);

}

Why this works in Workspace

• open() is the supported API in Workspace
• Automatically opens the URL in a new browser tab
• No dependency on the window object
• Works across Agent Workspace and other UI Framework experiences

Important Considerations

Why encodeURIComponent() is mandatory

Dynamic field values (like Caller name or descriptions) may contain special characters such as:

&   /   ?   =   #

These characters have special meaning in URLs.
If not encoded, they can break the URL or corrupt query parameters.

❌Example WITHOUT encodeURIComponent()

var callerName = "John & Sons / IT Support";

var incidentNumber = "INC0012345";

var targetUrl =

    "https://external-tool.example.com/dashboard?" +

    "incident_number=" + incidentNumber +

    "&caller=" + callerName;

Generated URL (broken):

...&caller=John & Sons / IT Support

What goes wrong:

• & Sons / IT Support is treated as a new parameter
• Caller name is truncated
• External system receives incorrect data

✅Example WITH encodeURIComponent()

var callerName = "John & Sons / IT Support";

var incidentNumber = "INC0012345";

var targetUrl =

    "https://external-tool.example.com/dashboard?" +

    "incident_number=" + encodeURIComponent(incidentNumber) +

    "&caller=" + encodeURIComponent(callerName);

Encoded URL:

...&caller=John%20%26%20Sons%20%2F%20IT%20Support

What encodeURIComponent() encodes

Character	Encoded Value
Space	%20
&	%26
/	%2F
?	%3F
=	%3D

This makes it ideal for individual query parameter values.

🚨Common Mistake to Avoid

❌Encoding the entire URL:

encodeURIComponent("https://example.com?x=1&y=2");

✅Correct approach:

• Encode only dynamic values
• Never encode the full URL

Key Differences: Native UI vs Workspace

Feature	Native UI	Workspace
Function used	window.open()	open()
g_form support	✔️	✔️
Opens new tab	✔️	✔️
window object	✔️	❌(not recommended)

Best Practices

✔ Always use encodeURIComponent() for URL parameters
✔ Keep external URLs configurable where possible
✔ Use Workspace-supported APIs
✔ Test with values containing special characters

Conclusion

Using a button to open external links with dynamic parameters greatly improves productivity and integration capabilities in ServiceNow.

By:

• Using window.open() in Native UI
• Using open() in Workspace
• Properly encoding all dynamic values

you ensure a clean, secure, and consistent experience across ServiceNow interfaces.