Variable type check box

[TEJAS]

I have a requirement in a catalog item 
I have written a variable set in that i want to add a variable with type check box
but my problem is the check box variable name should be in red colour as shown below 


Is this possible ??

Thanks in advance.

[nitin gupta1]

Hello Tejas,

Please use below code in Onload client script and replace variable with your actual variable name - 

function onLoad() {
var label = document.querySelector("label[for='IO:<your_variable_name>']");
if (label) {
label.style.color = "red";
label.style.fontWeight = "bold"; // optional (for exact look like screenshot)
}
}

Please mark this solution as helpful if its works for you!

Regards,

Nitin Gupta

[Ankur Bawiskar]

@TEJAS  

not possible out of the box as it's not supported

years ago I shared solution for something similar, but it uses DOM manipulation which is not recommended

you can check and enhance

How to make text of Label type in Bold 

sharing here as well

Script: This will work in both native + portal

1) Ensure Isolate Script field is set to false for this client script

2) This field is not on form but from list you can make it false

function onLoad(){

	setTimeout(function(){ 
		
		if(window != null){
			// native
			g_form.getControl('my_label').setAttribute('style', 'font-weight: bold;color:blue');
		}
		else{
			// portal
			var aTags = this.document.getElementsByClassName("ng-binding");
			var searchText = "My Label";
			var found;

			for (var i = 0; i < aTags.length; i++) {
				if (aTags[i].textContent.toString() == searchText) {
					aTags[i].style.fontWeight = 'bold';
					break;
				}
			}
		}

	}, 3000);

}

Output:

Native:

Portal:

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Tanushree Maiti]

Hi @TEJAS  

Without DOM manipulation , you can not achieve it  . Hope you know ServiceNow recommendation is to avoid DOM manipulation.

Sample Catalog onLoad Client script:

function onLoad() {
setTimeout(function() {
try {
var controlElement = g_form.getControl('test_checkbox_variable');
if (controlElement) {
var labelElement = document.getElementById('label_' + controlElement.id);
if (labelElement) {
labelElement.style.color = 'red';
}
}
} catch (e) {

}

try {
if (window === null) {
var portalLabels = document.getElementsByClassName("ng-binding");
var targetLabelText = "Test Checkbox Question Here";

for (var i = 0; i < portalLabels.length; i++) {
if (portalLabels[i].textContent.trim() === targetLabelText) {
portalLabels[i].style.color = 'red';
break;
}
}
}
} catch (err) {

}
}, 1500);
}

[CN-L]

Hi @TEJAS ,

Could you not change the approach slightly and instead use a Rich Text Label for the required red text and then add a singular checkbox directly beneath it?