How to Add VIP visual indicator for “Requested for” on REQ and RITM (similar to Incident Caller VIP)

[nameisnani]

Hi Team,

I have a requirement to visually highlight VIP users on the REQ and RITM

---

 Requirement

On the REQ and  Requested Item [sc_req_item] form:

• Field: Requested for (requested_for)
• If the selected user has VIP = true (in sys_user.vip):
  • Show a VIP icon / decoration on the field, and optionally
  • Change the field text color (e.g., red) to make it stand out
• If the user is not VIP:
  • No VIP indicator / normal display

This needs to work both when:

1. The RITM and REQ is opened (onLoad)
2. The Requested for field is changed by the user (onChange)

I have created client script for both tables 

for REQ it is working fyn - VIP is highlighting 

for RITM it is not working 

client script for ritm 

function onChange(control, oldValue, newValue, isLoading) {
    var callerLabel = $('label.sc_req_item.requested_for');
    var callerField = $('sys_display.sc_req_item.requested_for');
    if (!callerLabel || !callerField)
        return;
   
    if (!newValue) {
        callerLabel.setStyle({backgroundImage: ""});
        callerField.setStyle({color: ""});
        return;
    }
    g_form.getReference('requested_for', vipCallerCallback);
}
 
function vipCallerCallback(caller) {
    var callerLabel = $('label.sc_req_item.requested_for').down('label');
    var callerField = $('sys_display.sc_req_item.requested_for');
    if (!callerLabel || !callerField)
        return;
   
    //check for VIP status
    if (caller.vip == 'true') {
        var bgPosition = "95% 55%";
        if (document.documentElement.getAttribute('data-doctype') == 'true')
            bgPosition = "5% 45%";
           
        callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
        callerField.setStyle({color: "red"});
    } else {
        callerLabel.setStyle({backgroundImage: ""});
        callerField.setStyle({color: ""});
    }
}

 

O/P

what was the mistake in my script 

@Ankur Bawiskar  - i have configured as per your scritpt provided here ( https://www.servicenow.com/community/developer-forum/how-to-add-vip-visual-indicator-for-requested-f...)

could u please help me here @Ankur Bawiskar 

[Ankur Bawiskar]

@nameisnani 

what debugging did you do from your side?

unless you explore, debug you won't learn.

[nameisnani]

tired unable to find issue but i don't know why it is not working 

[Robert Perrone]

Hi,

It looks like the field on your sc_req_item form is dot-walked to the sc_request table's requested for field. The onChange Client Script is going based on the request_for field on the sc_req_item table.

I would thus recommend showing the requested_for field rather than request.requested_for on the form. This may also be why you're seeing differing results on the list view. Please reference my screenshot that I attached. I used your script that you posted above.

I would also recommend (if it hasn't been done already) to write a business rule to sync the field between sc_request and sc_req_item tables whenever there's a change.

Please let me know if this solves your issue or if you have additional questions.

[Robert Perrone]

After some more messing around with the client script, I was able to get it to work with the dot-walked field (request.requested_for).

function onChange(control, oldValue, newValue, isLoading) {
	var requestedForLabel = $('label.sc_req_item.request.requested_for');
	var requestedForField = $('sys_display.sc_req_item.request.requested_for');
	if (!requestedForLabel || !requestedForField)
		return;
	
	if (!newValue) {
		requestedForLabel.setStyle({backgroundImage: ""});
		requestedForField.setStyle({color: ""});
		return;
	}
	g_form.getReference('request.requested_for', vipCallback);
}

function vipCallback(requestedFor) {
	var requestedForLabel = $('label.sc_req_item.request.requested_for').down('label');
	var requestedForField = $('sys_display.sc_req_item.request.requested_for');
	if (!requestedForLabel || !requestedForField)
		return;
	
	//check for VIP status
	if (requestedFor.vip == 'true') {
		var bgPosition = "95% 55%";
		if (document.documentElement.getAttribute('data-doctype') == 'true')
			bgPosition = "45% 90%";
			//bgPosition = "5% 45%";
			
		requestedForLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
		requestedForField.setStyle({color: "red"});
	} else {
		requestedForLabel.setStyle({backgroundImage: ""});
		requestedForField.setStyle({color: ""});
	}
}