onChange Client Script - Mobile Phone not auto-populating on click

[JayAdmin_16]

Hello! I'm new to this space, and hoping someone more seasoned can help me. 

I have the current onChange Catalog Client script written below for a form I'm using. I've tested it multiple times in different browsers and tabs through Employee center and I get the same result every time. If I change the value of "requested for" to another user, the e-mail will change as expected. However, if Requested For changes to a user that doesn't have a business phone value in sys_user, but does have a valid mobile phone value - it will occasionally work. In most cases though, it simply won't. 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }
}
    // Type appropriate comment here, and begin script below
    var usr = g_form.getReference('requested_for', updateRequestedForDetails);

 function updateRequestedForDetails(usr) {
    g_form.setValue('email', usr.email);
    g_form.setValue('phone_number',usr.phone);
    
    // Check if the phone number exists; if not, use the mobile phone number
    if (usr.phone) {
        g_form.setValue('phone_number', usr.phone);
    } else {
        g_form.setValue('phone_number', usr.mobile_phone);
    }
}

 Any help on this is greatly appreciated, thank you! 

[Community Alums · Accepted solution]

Hello @JayAdmin_16 

Try using the server side script GlideAjax asynchronously to fetch the suer information. 

Example :

on Change

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    var ga = new GlideAjax('UserInfoUtil');
    ga.addParam('sysparm_name', 'getUserInfo');
    ga.addParam('sysparm_user_id', newValue);
    ga.getXML(updateFields);
}

function updateFields(response) {
    var answer = response.responseXML.documentElement.getAttribute("answer");
    var userInfo = JSON.parse(answer);

    if (userInfo) {
        g_form.setValue('email', userInfo.email || '');
        g_form.setValue('phone_number', userInfo.phone || userInfo.mobile_phone || '');
    } else {
        g_form.addErrorMessage('Unable to retrieve user information');
    }
}

 Script Include :

var UserInfoUtil = Class.create();
UserInfoUtil.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getUserInfo: function() {
        var userId = this.getParameter('sysparm_user_id');
        var userGR = new GlideRecord('sys_user');
        if (userGR.get(userId)) {
            var userInfo = {
                email: userGR.email.toString(),
                phone: userGR.phone.toString(),
                mobile_phone: userGR.mobile_phone.toString()
            };
            return JSON.stringify(userInfo);
        }
        return '';
    },

    type: 'UserInfoUtil'
});

This should work, Please modify values as per your requirement. 

Mark Helpful if this works for you.

[JayAdmin_16]

Hello @Community Alums , Thank you for that, I tried out your code and it worked!

For any other users that come across this discussion, upon further investigation of this issue I discovered that there were duplicated UI policies scattered through the variable set(s) and the catalog item itself that this code was attached too. So both sets of code do work.