ServiceNow UI Page GlideAjax

I created a form using UI Page and am trying to have some fields autopopulated onChange. I have a client script that works for the most part, but the issue arises when certain fields need to be dot-walked in order to be autopopulated. I've read that dot-walking will not work in client scripts for scoped applications and that a GlideAjax code will need to be used instead. I'm not familiar with GlideAjax and Script Includes, can someone help me with transitioning my code?

My current client script looks like this:

function beneficiary_1(){
  var usr = g_user.userID;
  var related = $('family_member_1').value;
  var rec = new GlideRecord('hr_beneficiary');
  rec.addQuery('employee',usr);
  rec.addQuery('sys_id',related);
  rec.query(dataReturned);
}
function dataReturned(rec){
  //autopopulate the beneficiary fields pending on the user selection
  if(rec.next()) {
  $('fm1_ssn').value = rec.ssn;
  $('fm1_address').value = rec.beneficiary_contact.address; 
  $('fm1_email').value = rec.beneficiary_contact.email;
  $('fm1_phone').value = rec.beneficiary_contact.mobile_phone;
  var dob = rec.date_of_birth;
  var arr = dob.split("-");
  var date = arr[1] + "/"+ arr[2] + "/" + arr[0] ;
  $('fm1_date_of_birth').value = date;
  }
}

fm1_address, fm1_email, and fm1_phone do not auto populate because the value is dot walking from the HR_Beneficiary table to the HR_Emergency_Contact table.

How can I transform the above code to GlideAjax format?

I haven't tested this code so you may need to debug it, but hopefully gets you on the right track. However there are a couple of steps for this.

1. Create a script include that pull the data and send a response to an ajax call.
2. Call this script include from a client script using GlideAjax.
3. Handle the AJAX response and populate the form.
   • This is part of the client script in #2

A couple of good websites to look at for this

• GlideAjax documentation for reference
• Returning multiple values with GlideAjax

---

1. Script Include - Here you will create your method to pull the data and respond to an ajax call.

This script include object has the following details

• Name: BeneficiaryContact
• Parateters:
  • sysparm_my_userid - user ID of the employee
  • sysparm_my_relativeid - relative sys_id

Make certain to check "Client callable" in the script include options.

---

var BeneficiaryContact = Class.create();
BeneficiaryContact.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getContact : function() {
        // parameters
        var userID = this.getParameter('sysparm_my_userid');
        var relativeID = this.getParameter('sysparm_my_relativeid');

        // query
        var rec = new GlideRecord('hr_beneficiary');
        rec.addQuery('employee', userID);
        rec.addQuery('sys_id', relativeID);
        rec.query();

        // build object
        var obj = {};
        obj.has_value = rec.hasNext(); // set if a record was found

        // populate object
        if(rec.next()) {
            obj.ssn = rec.ssn;
            obj.date_of_birth = rec.date_of_birth.toString();
            obj.address = rec.beneficiary_contact.address.toString();
            obj.email = rec.beneficiary_contact.email.toString();
            obj.mobile_phone = rec.beneficiary_contact.mobile_phone.toString();
        }

        // encode to json
        var json = new JSON();
        var data = json.encode(obj);

        return data;
    },

    type : "BeneficiaryContact"
});

---

2. Client Script - Here you will call BeneficiaryContact from #1 with a client script

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var usr = g_user.userID;
    var related = $('family_member_1').value;

    var ga = new GlideAjax('BeneficiaryContact'); // call the object
    ga.addParam('sysparm_name', 'getContact'); // call the function
    ga.addParam('sysparm_my_userid', usr); // pass in userID
    ga.addParam('sysparm_my_relativeid', related); // pass in relative sys_id
    ga.getXML(populateBeneficiary); 
}

---

3. Handle AJAX response - Deal with the response from #2

This is part of your client script

Here I put in the answer.has_value check as an example, but you may want to remove that until this works and you're done debugging.

function populateBeneficiary(response) {      
    var answer = response.responseXML.documentElement.getAttribute("answer");          

    answer = answer.evalJSON(); // convert json in to an object   

    // check if a value was found
    if (answer.has_value) {
        var dob = answer.date_of_birth;
        var arr = dob.split("-");
        var date = arr[1] + "/"+ arr[2] + "/" + arr[0];

        $('fm1_ssn').value = answer.ssn;
        $('fm1_address').value = answer.address; 
        $('fm1_email').value = answer.email;
        $('fm1_phone').value = answer.mobile_phone;
        $('fm1_date_of_birth').value = date;
    }
    else {
        g_form.addErrorMessage('A beneficiary was not found.');
    }
}