padding is not working for VIP Flag

[MarotiR]

Hi Everyone ,

I am facing two issues in the script below and need your help to resolve them:

1. I have added two images in the script, but only the VIP image is showing. The second image is not visible. I have highlighted the relevant line in red inside the script.

2. The image is not appearing just before the Caller field label as expected (at the place of pink dot in screenshot). Instead, it is showing on the left side of the form (please refer to the below screenshot).

   

Can someone help me fix these issues?

Client script:

function onChange(control, oldValue, newValue, isLoading) {

    if (isLoading || !newValue) {

        resetStyles();

        return;

    }

    // First get caller user record

    g_form.getReference('caller_id', function(caller) {

        applyVIPLogic(caller);

    });

}

// Reset label + field styling

function resetStyles() {

    var label = $('label.incident.caller_id')?.down('label');

    var field = $('sys_display.incident.caller_id');

    if (label) label.setStyle({

        backgroundImage: ""

    });

    if (field) field.setStyle({

        color: ""

    });

}

// Main logic evaluator

function applyVIPLogic(caller) {

    var label = $('label.incident.caller_id')?.down('label');

    var field = $('sys_display.incident.caller_id');

    if (!label || !field) return;

    var ga = new GlideAjax('VIPGroupChecker');

    ga.addParam('sysparm_name', 'getFlags');

    ga.addParam('sysparm_user', caller.sys_id);

    ga.getXMLAnswer(function(response) {

        var flags = JSON.parse(response);

        var isVIP = caller.vip == 'true';

        var isAssistant = flags.assistant;

        var isSMT = flags.smt;

        resetStyles();

        // -----------------------------

        // 4) SMT + VIP

        // -----------------------------

        if (isSMT && isVIP) {

            label.setStyle({

                backgroundImage: "url('images/icons/vip.gif'), url('images/icons/star_full.gif')",

                backgroundRepeat: "no-repeat,no-repeat",

                backgroundPosition: "0px 50%, 20px 50%",

                backgroundSize: "16px 16px, 16px 16px",

                paddingLeft: "40px"

            });

            field.setStyle({

                color: "red"

            });

            return;

        }

        // -----------------------------

        // 3) VIP Assistant + VIP

        // -----------------------------

        if (isAssistant && isVIP) {

            label.setStyle({

                backgroundImage: "url('images/icons/vip.gif'), url('images/icons/user_delegate.gif')",

                backgroundRepeat: "no-repeat,no-repeat",

                backgroundPosition: "0px 50%, 20px 50%"

            });

            field.setStyle({

                color: "red"

            });

            return;

        }

        // -----------------------------

        // 2) VIP Assistant only

        // -----------------------------

        if (isAssistant && !isVIP) {

            label.setStyle({

                backgroundImage: "url('images/icons/user_delegate.gif')",

                backgroundRepeat: "no-repeat",

                backgroundPosition: "0px 50%",

            });

            field.setStyle({

                color: "blue"

            });

            return;

        }

        // -----------------------------

        // 1) VIP only

        // -----------------------------

        if (isVIP) {

            label.setStyle({

                backgroundImage: "url('images/icons/vip.gif')",

                backgroundRepeat: "no-repeat",

                backgroundPosition: "0px 50%",

                backgroundSize: "16px 16px",

                paddingLeft: "20px"

            });

            field.setStyle({

                color: "red"

            });

            return;

        }

        // No VIP related status → no icons

        resetStyles();

    });

}

[Ankur Bawiskar]

@MarotiR 

your script is correct.

I set this background-position: 75% 75%

here is the output, you can play with the alignment etc

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Ankur Bawiskar]

@MarotiR 

Hope you are doing good.

Did my reply answer your question?

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Tanushree Maiti]

In css , you can try with 

display:block

 Or with style the width