Auto populate UI page values based on selected record

[Preetam Barai]

I want to auto populate the fields on a ui page based on the selected record. I am new to UI page scripting to detailed sample would help. In the below screenshot would like to auto populate caller and Incident number based on the selected value.

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate object='true' >
var sysIdList = RP.getWindowProperties().get('sys_id') || '';
</g:evaluate>
<g:ui_form>
<table>
<tr>
<td style="width:25%">
<g:form_label>
Description:
</g:form_label>
</td>
<td style="width:60%">
<input type="text" aria-label="Print your name" name="my_name" id="notes" maxlength="25"/>
</td>
</tr>
<tr>
<td style="width:25%">
<g:form_label>
Caller :
</g:form_label>
</td>
<td style="width:60%">

<g:ui_reference name="caller_id" id="caller_id" table="sys_user" show_lookup="true"/>

</td>
</tr>
<tr>
<td style="width:25%">
<g:form_label>
Incident :
</g:form_label>
</td>
<td style="width:60%">
<g:ui_reference name="inc_ref" id="inc_ref" value="${sysIdList}" table="incident" />
</td>
</tr>
<tr>
<td>
<input type="button" name="Submit" value="Submit" onClick="createRecord()"></input>
</td>
</tr>
</table>
</g:ui_form>
</j:jelly>

Client script:

function createRecord() {

alert('In the client code of Custom UI page ');
var gdw = new GlideDialogWindow.get();
var notes = gel('notes').value;
alert('For the Incident the notes : ' + notes);
var ga = new GlideAjax('incident_request');
ga.addParam('sysparm_name', 'getIncidentValue');
ga.addParam('sysparm_notes',notes);
ga.getXMLAnswer(getResponse);

function getResponse(response) {
var answerFromXML = response.responseXML.documentElement.getAttribute("answer");
}
GlideDialogWindow.get().destroy();

[-O-]

What if more than one rows are selected?

[-O-]

But either way, one can obtain the list sys_ids of selected rows by calling

GlideLists2.incident.getChecked();

Of course this will only work in Platform UI and for the list of incidents. For other tables, one would need to replace incident with the name of that table.

The return value will be a string, a comma separated list of sys_ids. You would need to pass that as dialog parameter and then you could use it in the UI Page to fill in the fields with default values.

In the code creating the dialog you would need to execute something like below:

dialog.setPreference('sysparm_sys_id_list', GlideLists2.incident.getChecked());

where dialog is a instance of GlideDialogWindow.

In the UI Page's HTML you could reference that value simply as $[HTML: sysparm_sys_id_list ]. E.g adding line

<p>$[HTML: sysparm_sys_id_list ]</p>

anywhere in the UI Page will print the list of sys_ids "received". The HTML: part ensures that any data coming from the client side is properly escaped, so someone would have a harder time injecting malicious code into the server environment.