How to add a hyperlink to specific text in a Catalog checkbox variable

[vivek11]

Hi Community,

I have a ServiceNow Catalog Item with a checkbox variable called sample_acknowledgement.

The checkbox label contains text similar to:

I confirm that I have reviewed the company guidelines and agree to comply with POL-100, Acceptable Use, and any related requirements.

I would like to make only "POL-100" clickable and redirect the user to our internal policy page.

I am trying to achieve this using an onLoad Catalog Client Script. My current approach is:

function onLoad() {
$$('label').each(function(label) {
if (label.innerHTML.indexOf('POL-100') > -1) {
var link = "<a href='https://example.servicenow.com' target='_blank'>POL-100</a>";
label.innerHTML = label.innerHTML.replace('POL-100', link);
}
});
}

However, the code is not working as expected.

Could anyone please advise on the correct way to:

Identify the label associated with a specific checkbox variable.

Replace only a portion of the label text with a hyperlink.

Implement this using a supported ServiceNow Catalog Client Script approach.

Any working example or guidance would be greatly appreciated.

Thanks!

[rahulswami]

Hi @vivek11 

Two things are stacking on top of each other here:

1. $$('label') grabs every <label> on the page, not just yours — depending on your form layout that can match the wrong element, match nothing, or hit timing issues if the DOM isn't fully rendered when onLoad fires.
2. For a checkbox variable, the <input type="checkbox"> is often nested inside the same <label> as the text. Overwriting label.innerHTML with a string forces the browser to destroy and recreate that <input> node — it can look fine visually, but the checkbox loses the event bindings ServiceNow attached to sync it with the variable value. That's a very common cause of "the replace worked but the field broke" bugs.

More broadly, raw DOM manipulation ($$, gel, querySelector, etc.) inside a Catalog Client Script isn't a supported pattern — the actual markup differs between native/classic catalog view, Service Portal, and Now Experience UX forms, so a script written against one renderer's DOM will silently fail or break in another.

Supported approach: g_form.setLabelOf(name, label) on the Catalog Client Script API is built for exactly this — it replaces a variable's label and explicitly accepts HTML, so you can embed a link without touching the DOM at all:

Example for you:

function onLoad() {
    var labelHtml =
        'I confirm that I have reviewed the company guidelines and agree to comply with ' +
        '<a href="https://example.servicenow.com" target="_blank" rel="noopener noreferrer">POL-100</a>' +
        ', Acceptable Use, and any related requirements.';

    g_form.setLabelOf('sample_acknowledgement', labelHtml);
}

This targets the variable directly, leaves the checkbox <input> untouched (so the checked-state binding can't break), and — since it goes through the supported API rather than scraping the DOM — is what's expected to keep working consistently across native UI, Service Portal, and Workspace/UX forms.

One caveat: ServiceNow's docs note that setLabelOf does not sanitize the HTML you pass in. That's fine with a static string you control like this one, but never build that HTML from user-entered or variable data — you'd open an XSS hole.

[vivek11]

Hi @rahulswami 
Thank you for Quick reply,
I have tried but it didn't worked and one more thing variable becomes visible after another variable changes

Thank you in advanced,
Vivek

[yashkamde]

Hello @vivek11 ,

You can achieve this using this approach :

1. Create a variable of type Custom > Navigate to the Type Specifications tab and specify your UI Macro in the Macro field.

3. Create the following UI Macro:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
    <input type="checkbox" name="${jvar_name}" id="${jvar_name}" />
    <label for="${jvar_name}">
        I confirm that I have reviewed the company guidelines and agree to comply with 
    </label>
    <a href="YOUR URL HERE">
        POL-100 
    </a>
	<label for="${jvar_name}">
        , Acceptable Use, and any related requirements. 
    </label>
	
</j:jelly>

If my response helped mark as helpful and accept the solution.