Catalog Client Scripts Issue: Setting Isolate script to false only have effect in preview mode

[victorlam]

I'm creating a client script to add margin to checkboxes in catalog item.

function onLoad () {
	styleSelectBoxes();
}

function styleSelectBoxes() {
	setPathwayDataStyle();
	setContentManagerDataStyle();
	setLegacyArchiveStyle();
	setGoldCareStyle();
	setEnterpriseReportingStyle();
}

function setEnterpriseReportingStyle() {
	var element = getElement('Enterprise Reporting');
	if(element) {
		element.parentNode.style.marginTop = '20px';
	}
}

function setLegacyArchiveStyle() {
	var element = getElement('Legacy Archive');
	if(element) {
		element.parentNode.style.marginTop = '35px';
	}
}

function setGoldCareStyle() {
	var element = getElement('GoldCare');
	if(element) {
		element.parentNode.style.marginTop = '35px';
	}
}

function setPathwayDataStyle() {
	var element = getElement('Pathway Data');
	if(element) {
		element.style.paddingLeft= '30px';
		element.parentNode.style.marginTop = '35px';
	}
}

function setContentManagerDataStyle() {
	var element = getElement('Content Manager Data');
	if(element) {
		element.style.paddingLeft= '30px';
		element.parentNode.style.marginTop = '35px';
	}
}

function getElement(title) {
	var element = getLabelByInnerText(title);
	if(!element) {
		element = getSpanByInnerText(title);
	}
	return element;
}

function getLabelByInnerText(text) {
	var labels = document.getElementsByTagName('label');
	for (var i = 0; i < labels.length; i++) {
		if(labels[i].innerText == text) {
			return labels[i];
		}
	}
	return null;
}

function getSpanByInnerText(text) {
	var labels = document.getElementsByTagName('span');
	for (var i = 0; i < labels.length; i++) {
		if(labels[i].innerText == text) {
			return labels[i];
		}
	}
	return null;
}

I got this error below while developing the script
TypeError: Cannot read properties of null (reading 'getElementsByTagName') 

The script works after setting it isolate script false and try it out in preview mode.

HOWEVER, it doesn't work the same when it comes to the actual form in production or dev environments with an error as below.

Can someone please help me on this issue? Thank you in advance

[Hemant Kumar Ch]

Hello Vicktor 

This May be due to below reasons 

1.

1. The script might be relying on elements that are not present in the Service Portal page, or it might be trying to access them in a way that is not supported. For example, if the script is trying to access an element by its inner text, it might not work if the element does not have any inner text, or if the element's inner text is not unique on the page.

2. The script might be using functions or syntax that are not supported in ServiceNow's Service Portal. For example, the script is using "getElementsByTagName", which is not supported in the Service Portal. Instead, you can use "gs.getElementsByTagName" or "jQuery" to select elements in the Service Portal.

Reg

Hemant Kumar Ch 

Learner -Ciena

[-O-]

That has no effect on Portal. I suppose it is there only for CMS compatibility. If you want to gain access to global objects, you could do it using self or top or this, but I'd try to accomplish the requirements using Portal style.

[-O-]

I mean top and self are both "aliases" for "window". Thus you could do self.document.getElementsByTagName(). But, again, try to use Portal styles instead. Messing with DOM managed by AngularJS is not a wise proposition anyway. You never know when AngularJS re-creates a DOM node and your modifications will be gone. And your script will have no way to know that it needs to re-apply the styling to that particular node. In theory you could set up some DOM event listener that would detect that, but that would be so complicating a simple CSS task. Plus it would have adverse and serous effects on site performance.