Can I avoid DOM Manipulation from OOB Client script?

[Gayatri_23]

Hello Community,

I want to avoid the DOM manipulation from below OOB Client script. We created below custom client script to add some new messages from OOB Client script "Highlight VIP Caller".

Please suggest if there is any alternative for DOM Manipulation.  - 

if (document.documentElement.getAttribute('data-doctype') == 'true') {

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    g_form.clearMessages();
    var el = g_form.getControl('sys_display.incident.caller_id');
    var callerLabel = $('label.incident.caller_id').down('label');
    g_form.removeDecoration('caller_id', 'icon-user', 'New Hire', 'red');
	g_form.removeDecoration('caller_id', 'icon-user', 'WEALTH MGMT & INVESTMENT SVCS', 'red');
	g_form.removeDecoration('caller_id', 'icon-user', 'Regulator', 'red');
    el.style.color = '';
    callerLabel.setStyle({
        backgroundImage: ""
    });
	// if (isLoading) {
	// 	return;     
    // }
    if (newValue === '') {
        return;
    }
    var gUser = new GlideAjax('IncUserData');
    gUser.addParam('sysparm_name', 'getUserData');
    gUser.addParam('sysparm_user', newValue);
    gUser.getXML(callback1);

    function callback1(response1) {
        var answer3 = response1.responseXML.documentElement.getAttribute("answer");
        var user = JSON.parse(answer3);
		
        if (user.u_new_hire == true) {
            g_form.addErrorMessage(user.name + ' is a New Hire, please handle appropriately.Hire date ' + user.u_hire_date);
            g_form.addDecoration('caller_id', 'icon-user', 'New Hire', 'red');
            el.style.color = 'red';
        } else if (user.vip == true && (user.u_employee_type == 'Employee' || user.u_employee_type == 'Non-Employee')) {
            var bgPosition = "95% 55%";
            if (document.documentElement.getAttribute('data-doctype') == 'true') {
                bgPosition = "5% 45%";
            }
            g_form.addErrorMessage(user.first_name + " " + user.last_name + " is a VIP, please handle appropriately.");
            el.style.color = 'red';
            var callerLabel = $('label.incident.caller_id').down('label');
            callerLabel.setStyle({
                backgroundImage: "url(images/icons/vip.gif)",
                backgroundRepeat: "no-repeat",
                backgroundPosition: bgPosition,
                paddingLeft: '30px'
            });
        } else if (user.u_business_line == g_scratchpad.incidentBusinessLineVIP) {
            g_form.addErrorMessage(user.name + ' is a member of GCT/GFS, please handle appropriately');
            g_form.addDecoration('caller_id', 'icon-user', 'WEALTH MGMT & INVESTMENT SVCS', 'red');
            el.style.color = 'red';

        } else {
            var ga = new GlideAjax('USBCheckRoleAWS');
            ga.addParam('sysparm_name', 'isMemberOf');
            ga.addParam('sysparm_groupName', 'USB_Regulators');
            ga.addParam('sysparm_usr', user.sys_id);
            ga.getXML(callback);


        }

        function callback(response) {
            var answer2 = response.responseXML.documentElement.getAttribute("answer");
            if (answer2 == 'true') {
                g_form.addErrorMessage(g_form.getDisplayBox('caller_id').value + ' is a VIP, please handle appropriately.');
                g_form.addDecoration('caller_id', 'icon-user', 'Regulator', 'red');
                el.style.color = 'red';
            }
        }
    }

}

[Ankur Bawiskar · Accepted solution]

@Gayatri_23 

Ideally OOB client script should not have DOM manipulation.

But if the OOB script has DOM and that's the only way to achieve then it should be fine and allowed.

If my response helped please mark it correct and close the thread so that it benefits future readers.