auto populating fields from a reference in UI Page

[yundlu316]

I created a UI Page that incorporates a reference field using <g:ui_reference>.   Field 13 in the below screenshot uses this code:  

<label> 13. Name of family member $[SP]<i>(last, first, middle initial)</i></label>

<g:ui_reference name="family_member_1" id="family_member_1" table="hr_beneficiary" query="active=true" completer="AJAXTableCompleter" columns="employee; beneficiary_contact.relationship" />

When a user chooses a beneficiary from the reference field, I want 14. SSN and 15. DOB to autopopulate.   If this was a regular Record Producer, I would have written an onChange client script on 13. Name of family member, but since this form is coded as a UI Page, I can't utilize g_form.   How would I go about autopopulating fields based on the reference chosen?

Thanks!

[drjohnchun]

You can add an onchange handler similar to below

<g:ui_reference name="hr_beneficiary" table="hr_beneficiary" question_reference="sys_user" onchange="hr_beneficiary_onChange()"/>

then fetch the additional data using hr_beneficiary_onChange(). Also see onChange script for reference field on UI page

Hope this helps.

Please feel free to connect, follow, mark helpful / answer, like, endorse.

John Chun, PhD PMP

Winner of November 2016 Members' Choice Award

[Abhinay Erra]

You will need to use onChange event in the ui_reference field. Now define that onChange function in the client script section and get the values from the table based on the user selected by using GlideAjaxa and finally set the fields with those returned values

[yundlu316]

Hi abhinay, so the onChange function in the client script, can I use g_form?   I think I saw another post you had regarding GlideAjax...could i use something like this:

var GetBeneficiaryDetails = Class.create();

GetBeneficiaryDetails.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {

getDetails: function(){  

  var obj = {};  

  var usr= new GlideRecord('hr_beneficiary');  

  usr.get(this.getParameter('sysparm_user_id'));

  var name = usr.getValue('beneficiary_contact.name');

  var arr2 = name.split(" ") ;

  var name2 = arr2[2] + ", " + arr2[1];

    obj.beneficiary_name = name2;

    obj.beneficiary_ssn = usr.getValue('ssn');  

    obj.beneficiary_date_of_birth = usr.getValue('date_of_birth');

    obj.beneficiary_email = usr.getValue('beneficiary_contact.email');  

    obj.beneficiary_mobile=usr.getValue('beneficiary_contact.mobile_phone');

          obj.beneficiary_relationship=usr.getValue('beneficiary_contact.relationship');  

    obj.beneficiary_percentage=usr.getValue('percentage');  

    obj.beneficiary_address=usr.getValue('beneficiary_contact.address');

  var json = new JSON();  

  var data = json.encode(obj);//JSON formatted string  

  return data;  

  },  

      type: 'GetBeneficiaryDetails'

});

[Abhinay Erra]

Can you post your client script. I can make edits to it. You will need to get the html element id and set the value like this

$('element id').value='your value';