How to change CSS using Catalog Client Scripts

MarkoS2
Tera Expert

How can I change CSS using Catalog Client script. I have tried but I'm getting this error

find_real_file.png

This is my code:

function onLoad() {
    var label1 = g_form.getElement('u_consulting_area_topic');
    label1.setStyle({
        color: "red"
    });
}

 

1 ACCEPTED SOLUTION

@MarkoS 

As per the link I shared; here is the outcome

You can use this catalog client script onLoad and make the Label variable as Bold

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);

}

find_real_file.png

Output:

Native:

find_real_file.png

Portal:

find_real_file.png

Regards
Ankur

 

 

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

8 REPLIES 8

I already am using onChange client script, but my code is not working. 

I have also tried solutions from previous posts, but no success. Any other solution for my situation and needs?

Can you please show me how to change anything CSS based with JS and Catalog Client Scripts?

Hi,

what type of variable is that? and do you want color for the label ?

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

@MarkoS 

As per the link I shared; here is the outcome

You can use this catalog client script onLoad and make the Label variable as Bold

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);

}

find_real_file.png

Output:

Native:

find_real_file.png

Portal:

find_real_file.png

Regards
Ankur

 

 

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Thanks @Ankur Bawiskar this worked!