Can we add two icons to caller field on incident form?

[Nowlearner]

If a caller is both a vip and finance user, i want to display two icons for vip and one for finance user.

Is that possible?

This is an oob code: If i have a condition like if (caller.vip == 'true' && finance user == 'true'). What would be syntax for the below line to display two images??

----------- callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)",

i tried this:

----------------callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)"&&"url(images/icons/security.gif)",

function onChange(control, oldValue, newValue, isLoading) {
var callerLabel = $('label.incident.caller_id');
var callerField = $('sys_display.incident.caller_id');
if (!callerLabel || !callerField)
return;

if (!newValue) {
callerLabel.setStyle({backgroundImage: ""});
callerField.setStyle({color: ""});
return;
}
g_form.getReference('caller_id', vipCallerCallback);
}

function vipCallerCallback(caller) {
var callerLabel = $('label.incident.caller_id').down('label');
var callerField = $('sys_display.incident.caller_id');
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-]

&& in JavaScript is on operator that returns the last truthy operator or the 1st falsy one. To quote MDN:

More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.

So your code is the same as:

{ backgroundImage: "url(images/icons/security.gif)", backgroundRepeat...

I would try using a single/simple text value:

{ backgroundImage: "url(images/icons/vip.gif), url(images/icons/security.gif)", backgroundRepeat...

The CSS value that needs to be set for the property is described in MDN article Using multiple backgrounds.

It seems one should proved as many value for related properties as there are background images specified. So I believe you should write something like:

		callerLabel.setStyle({
			backgroundImage: "url(images/icons/vip.gif), url(images/icons/security.gif)",
			backgroundRepeat: "no-repeat, no-repeat",
			backgroundPosition: bgPosition + ', ' + bgPosition,
			paddingLeft: '30px, 30px',
		});

Of course you should craft the images so that if placed one over the other both will remain visible. That means the upper layer image must have a transparent background.

Do let us know whether it worked if you give this a try.

Of course one can go crazy with DOM manipulation adding image nodes and stuff instead, but that would just be unnecessary complication if the proposed solution works.

[-O-]

Just did a quick PoV and modifying function  as below:

	if (caller.vip == 'true') {
		var bgPosition = '95% 55%, 80% 55%';

		if (document.documentElement.getAttribute('data-doctype') == 'true')
			bgPosition = '3px 45%, 21px 45%';

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

yields me this:

Of course you can play with the value of bgPosition to position the images as you'd like. Actually contrary to what I wrote initially (to make sure the images don't cover each other and have a transparent background), here I am using positioning to make sure the images don't overlap - that is the part that contains the logos.

It may be that creating new images so that both are the same size, but one has the icon in the left hand side, the other has the icon on the right hand side - in that case it would be easier to position the images using % values.

[Nowlearner]

Thanks so much for this, it worked but i am still playing around to position these icons properly but i couldnt. I dont know much of css styling so it was hard to get there

 if ((vip == 'true') && (status == 'true')) {
			var bgPosition = '95% 55%, 80% 55%';
			if (document.documentElement.getAttribute('data-doctype') == 'true')
			bgPosition = '70px 45%, 90px 45%';
            callerField.style.color = 'red';
            callerLabel.setStyle({
                backgroundImage: "url(images/icons/vip.gif), url(images/icons/local_price.gif)",
				//backgroundImage:"url(vipstatus.jpg)",
                backgroundRepeat: "no-repeat, no-repeat",
                maxWidth: '35%',
                height: 'auto',
                backgroundPosition: bgPosition,
                paddingRight: '30px'
            });
        }

1. This is when incident opened in new tab

2. This is when opened in general ui frame view with navbar minimized

3. this when nav bar maxmized

I am not sure how to position this so that it gets adjusted to screen size automatically and not get overlapped

[-O-]

I suppose it would be easiest if you created two images that totally overlap, have an aspect ration of 2:1 and one of those (VIP) contains the image on the left half and the other one contains the image on the right side. That it would be way easier to position those - You could just keep the original

bgPosition

value.

Another option would be to not use % values but fixed/pixel or point values.

But you must realize that these are background images and do not take up "space", so if the label will become very short, there will be no way to avoid icon and image overlap.