How to Display a VIP Icon to the Right of the Caller Field on the Incident Form?

[dattanarend]

Hi ,

I'm trying to customize the Incident form in the Classic UI to show a VIP icon next to the Caller field (specifically, to the right side of the input box) when the selected caller has the VIP flag set to true.

Here’s what I want:

• When a VIP user is selected in the Caller field, a small VIP icon (vip.png) should appear to the right of the Caller field (not on the label or far left of the form).

• The image is uploaded in the db_image table and accessible at /db_image/vip.png.

• The Caller’s name should also turn red for visual indication.

  

[dattanarend]

Hi Ankur,
I was able to successfully update the icon. However, I still need to position it on the right side of the Caller field. I’ve made some modifications to the client script for this.

unction 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: "",

            backgroundSize: "",

            paddingLeft: ""

        });

        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% 100%";

        // Set custom VIP icon

        callerLabel.setStyle({

            backgroundImage: "url('vip.png')", // Make sure vip.png is uploaded in 'images/icons/'

            backgroundRepeat: "no-repeat",

            backgroundPosition: bgPosition,

            backgroundSize: "50px 50px", // Adjust size as needed

            paddingLeft: '30px'

        });

        callerField.setStyle({

            color: "red"

        });

    } else {

        callerLabel.setStyle({

            backgroundImage: "",

            backgroundSize: "",

            paddingLeft: ""

        });

        callerField.setStyle({

            color: ""

        });

    }

}

[SumanthDosapati]

@dattanarend 

You already have this OOB.

1. Navigate to Client scripts from left navigator.
2. Find and use the client script named 'Highlight VIP Caller' on incident table.

Accept the solution and mark as helpful if it does, to benefit future readers.
Regards,
Sumanth