How to change CSS using Catalog Client Scripts

MarkoS2 · ‎09-21-2021

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

This is my code:

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

Ankur Bawiskar · ‎09-21-2021

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

}

Output:

Native:

Portal:

Regards
Ankur

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

View solution in original post

Ankur Bawiskar · ‎09-21-2021

Hi,

do you want this for portal or native?

Regards
Ankur

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

Ankur Bawiskar · ‎09-21-2021

Hi,

check this link where I shared solution; if that helps enhance

How to make text of Label type in Bold

Regards
Ankur

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

MarkoS2 · ‎09-21-2021

Later on I would like to change the CSS based on conditions, that is why I want it in Client Script, so I can change it based on g_form values.

For example:

    var label1 = g_form.getElement('u_consulting_area_topic');
    var checkbox1= g_form.getValue('u_checkbox1');
    if(checkbox1 == 'true'){
      label1.setStyle({
        color: "red"
      });
    }

Ankur Bawiskar · ‎09-21-2021

@Markos

you can use onChange client script.

did you check the link I shared where I provided solution on something similar

Regards
Ankur

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