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.