How can I access document or window in a Catalog Client Script?

[Joey Day]

I'm working on a Catalog Item in the global scope. I'd like to make a cosmetic change for this one Catalog Item, re-labeling the Submit button to say “Submit for Approval”. Since there is apparently no way to configure this on the Catalog Item itself, the approach I've settled on is to write a Catalog Client Script to directly manipulate the DOM element of the button.**

The problem I'm running into is it doesn't seem possible to access the document or window objects in a Catalog Client Script, either in the Desktop context or in the Mobile / Service Portal context. I know in a scoped application I can set a System Property for client globals to false, but how do I do the same thing in the global scope?

**Yes, I know DOM manipulation is bad, but what I'm doing is purely cosmetic and my plan is to use proper checks so it fails gracefully. If we install a future release of the platform and my client script stops working and the button just says Submit, that will be an okay degradation until we can update the script to work with the new release.

[Robert Beeman]

Hello,

You should be able to do this with the g_form API. It won't work on mobile scripts or Service Portal scripts, though.

g_form.getElement('submit_button').innerHTML = 'Hello!';

Ref: https://developer.servicenow.com/app.do#!/api_doc?v=london&id=r_GlideFormGetElement_String

[Joey Day]

That works, thank you! And, bonus, it's using a supported API and (sort of) not doing any direct DOM manipulation! Unfortunately in this case I do need to re-label the button in the Service Portal as well. I know I can do it by cloning and modifying the SC Catalog Item widget, but oof, I really want to avoid that route.

[Nick Simonelli1 · Accepted solution]

So I don't really know why, but the Window's top property should be available even though window is not. If you want to change a button, make a catalog client script with something like the following:

• Make sure isolate script is false (which allows us access to the DOM).
• Use top.document to get to what you're looking for. An example of how I changed the Order Now button from the Chrome developer tools:
  

  var x = top.document.getElementsByClassName('btn btn-primary btn-block ng-binding ng-scope');
  x[0].innerText = "Something other than order now";​

• getElementsByClassName() returns a nodeList, so you may want to check the length / do some additional validation just in case. 
  
  
  
  This changed the text of my button to 'Something other than order now'. 

[Joey Day]

Awesome, this gives me exactly what I need on the Service Portal side. Thanks so much! In case anybody is curious, here’s my final Catalog Client Script that works in both base system and Service Portal (in Madrid, but of course it could break with future releases):

function onLoad() {
  // Since we're manipulating the DOM, this might break in
  // future releases of the platform, but this is a purely
  // cosmetic change and should fail gracefully if so.

  // Note: A crucial piece for allowing top.document to
  // work in Service Portal was unchecking the Isolate
  // Script checkbox on this Catalog Client Script.

  if (window == null) {
    // Mobile or Service Portal
    top.document.getElementsByName('submit')[0].innerHTML = 'Submit for Approval';
  } else {
    // Desktop
    g_form.getElement('submit_button').innerHTML = 'Submit for Approval';
  }
}