Pass values from reference field to a textarea field on UI Page HTML

[Dazler]

Hi,

I created a UI page that displays for a user to fill out. 

The Milestone field is a reference field and once the user select the milestone.  I want the Status and description field to auto-populate the values from the Milestone select.  There are 2 fields on the table that is being referenced in the Milestone field.

Here is my HTML

<g:ui_reference mandatory="true" name="miles" id="miles" table="x_exf_it_issue_man" query="iss_number=${JS:sysparm_iss_id}" completer="AJAXTableCompleter" oninput="milestoneModal.milestoneOnChange()" onchange="milestoneModal.milestoneOnChange()"/>

How can I retrieve those 2 column values from the reference field and populate the Status and description fields?

[Markus Kraus]

You would need to do the lookup via GlideAjax:

Create a new Client Callable Script Include:

var MilestoneUtilClient = Class.create();
MilestoneUtilClient.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
	
	getMilestoneData: function () {
		const result = {
			status: 'error',
			message: ''
		};
		
		const milestoneSysID = this.getParameter('milestone');
		if (milestoneSysID) {
			const milestoneGr = new GlideRecordSecure('x_exf_it_issue_man');
			milestoneGr.addQuery('sys_id', milestoneSysID);
			milestoneGr.setLimit(1);
			milestoneGr.query();
			if (milestoneGr.next()) {
				result.status = 'success';
				result.milestone_data = {
					status: milestoneGr.status.toString(),
					description: milestoneGr.description.toString();
				};
			} else {
				result.message = gs.getMessage('Milestone not found or invalid access');
			}
		} else {
			result.message = gs.getMessage('Invalid Parameters');
		}
		
		return JSON.stringify(result);
	},

    type: 'MilestoneUtilClient'
});

 In your milestoneOnChange function:

function milestoneOnChange() {
	var milestoneSysID = gel('miles');
	var ga = new GlideAjax('x_exf_it.MilestoneUtilClient');
	ga.addParam('sysparm_name', 'getMilestoneData');
	ga.addParam('milestone', milestoneSysID);
	ga.getXMLAnswer(function (result) {
		result = JSON.parse(result);
		if (result.status == 'success') {
			gel('status').value = result.status;
			gel('description').value = result.description;
		} else {
			alert(result.message);
		}
	});
}

[Amit Gujarathi]

Hi @Dazler ,
I trust you are doing great.
To retrieve the values from the reference field and populate the Status and description fields based on the selected Milestone, you can use client-side JavaScript code in your UI page. Here's an example of how you can achieve this:

function milestoneOnChange() {
  var milestoneField = g_form.getReference('miles', milestoneCallback);
}

function milestoneCallback(milestone) {
  if (milestone) {
    var status = milestone.status;
    var description = milestone.description;

    // Populate the Status and description fields with the retrieved values
    g_form.setValue('status', status);
    g_form.setValue('description', description);
  }
}

[Markus Kraus]

g_form on a UI Page? How is that supposed to work?

[Dazler]

Hi @Amit Gujarathi 

Thank you for replying back.  I am trying to update the status and description field on the popup form, not on the table.

How can I pass the information back to the HTML from the client script?