How to change the user's name colour to red in field "requested for"

[VIKAS MISHRA]

I want change the "requested for" user name colour to red on ritm form if user is VIP, i have the VIP icon ol load script to display the VIP icon within that script onlyt there is one code of line to change the colour to red but that is not working for RITM as the requested for field is read only, please suggest how to change the colour if the field is read only also.

function onLoad() {
	//Type appropriate comment here, and begin script below

	var callerLabel = $('label.sc_req_item.request.requested_for');
	var callerField = $('sys_display.sc_req_item.request.requested_for');
	if (!callerLabel || !callerField)
		return;


	var number = g_form.getValue('number');

	var ga = new GlideAjax("isVIP");
	ga.addParam("sysparm_name", "vip");
	ga.addParam("sysparm_numnber", number);
	ga.getXML(vipCallBack);
}


function vipCallBack(response) {

	var answer = response.responseXML.documentElement.getAttribute("answer");
	var callerLabel = $('label.sc_req_item.request.requested_for').down('label');
	var callerField = $('sys_display.sc_req_item.request.requested_for');
	if (callerLabel || callerField)
		callerField.setStyle({color: "red"});
		//return;
	


	//check for VIP status
	if (answer == 'true') {
		var bgPosition = "95% 55%";
        if (document.documentElement.getAttribute('data-doctype') == 'true')
            bgPosition = "40% 100%";

 

        callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, backgroundSize: '25px', paddingLeft: '30px',});
        //set callerField color
        callerField.setStyle({color: "red"});
    } else {
        callerLabel.setStyle({backgroundImage: ""});
        //callerField.setStyle({color: ""});
		callerField.setStyle({color: "red"});
    }

 

}

[Ratnakar7]

Hi @VIKAS MISHRA ,

When a field is read-only, you cannot directly change its color using the setStyle method. Instead, you can use a CSS class to apply the desired color to the field.

Here's an updated version of your script that should work:

function onLoad() {
    // ... Your existing code ...

    //check for VIP status
    if (answer == 'true') {
        var bgPosition = "95% 55%";
        if (document.documentElement.getAttribute('data-doctype') == 'true')
            bgPosition = "40% 100%";

        callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, backgroundSize: '25px', paddingLeft: '30px'});
        callerField.addClassName('vip-text-color'); // Add a CSS class to the field
    } else {
        callerLabel.setStyle({backgroundImage: ""});
        callerField.removeClassName('vip-text-color'); // Remove the CSS class from the field
    }
}

 Here's how you can define the CSS class:

<style>
    .vip-text-color {
        color: red !important;
    }
</style>

By using the !important modifier, we ensure that the color property is applied even if the field is read-only.

Once you make these changes, the "requested_for" field's name should be displayed in red when the user is a VIP, even if the field is read-only.

Thanks,

Ratnakar

[VIKAS MISHRA]

Do i need to add the CSS class in the same client script ?