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!

[yundlu316]

Thanks Abhinay!

My HTML for the reference field: <g:ui_reference name="family_member_1" id="family_member_1" table="hr_beneficiary" query="active=true" completer="AJAXTableCompleter" columns="employee; beneficiary_contact.relationship" onChange="hr_beneficiary_onChange()" />

As for the client script, I guess I'm a bit lost on how to start (I'm not fluent with JS).   When our team wasn't developing in a scoped environment, our onChange client script looked something like this:

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

    if (isLoading || newValue == '') {

          return;

    }

    //Type appropriate comment here, and begin script below

  var usr = g_user.userID;

  var related = g_form.getValue('family_member_1');

  var rec = new GlideRecord('hr_beneficiary');

  rec.addQuery('employee',usr);

  rec.addQuery('sys_id',related);

  rec.query(dataReturned);

}

function dataReturned(rec2){

  //autopopulate the beneficiary fields pending on the user selection

  while (rec2.next()) {

          g_form.setValue('fm1_ssn', rec2.ssn);

          g_form.setValue('fm1_dob', rec2.date_of_birth );      

}

}

However, now that we're in a scoped application, I'm not quite sure how to transfer the above code so that it interacts with a Script Include.

Thanks.

[Abhinay Erra]

yundlu316

Here you go. Paste this code in the client script section of the UI page

function hr_beneficiary_onChange(){

  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_dob').value= rec.date_of_birth;

  }

}

[yundlu316]

Hey Abhinay, thanks!!   This works great.   One last question, is it possible to dot-walk to retrieve a field from another table?   For example, in the HR Beneficiary table, I want to dot-walk from the beneficiary_contact field into the HR Contacts table to retrieve the address field.   Thanks!

[yundlu316]

Hey abhinay, I've been reading around and I don't think dot-walking can be done using a client script...does this mean I have to transform your code above into a GlideAjax script with a script include?

[Abhinay Erra]

You can do it on client side using GlideRecord queries. But I will recommend you to use GlideAjax so that it is more performance effective