Auto populating value from one table to other using UI page.

sowmyaj · ‎09-11-2015

Hi All,

According to requirement I have some dropdown feild in first "Div tag" with "Run" button. When I click on "Run" button, it will display "Second div values".

In "second div" I have a "save button" on clicking it will store selected "first div values into "colorTable" table, Where ColorID is autogenerated.

In "Third div" I have "Add button" on clicking it will POP-UP "Observation table". where colorID should be auto fetched from "ColorTable" and I'm struggling in autopopulating the colorID in "ObservationTable". Please have a look... Except that other functionalities are working.

I have also created client script by referring to the below thread

https://community.servicenow.com/thread/195466

Below is my code and in the bolded part I don't have clear idea. Can anyone please help me!!!

IN UI page,

Html part,

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<table>

<tr>

<td>
Scope:
</td>

<td>
<select name="perf_select" id="perf_select">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
</td>

</tr>
<tr>
<td>
<button type="button" id="run" onclick="display()" >Run</button>
</td>

</tr>
</table>
</div>

<div id="secondpage">
<table>
<tr>
<td> <button type="button" id="run" value="submit" onclick="save()" >Save</button></td>
</tr>
<tr>

some datas from based on requirement
</tr>

</table>

</div>

<g2:evaluate var="jvar_obs">
var obs = new GlideRecord('u_observation');
obs.query();
</g2:evaluate>
<table>
<tr>


<td><a href="u_observation.do?sysparm_colorId=${"I need to fetch the color ID stored in the table for the particular value from colorTable".u_colorid}"><button type="button" id="popup" value="submit" onclick="popupDispList()"><b>Add</b></button></a></td>
</tr>
<tr>
<th><b>Date<br/></b> </th>
<th> <b>Observations </b></th>

</tr>
<j2:while test="$[obs.next()]">
<tr>

<td>$[obs.u_date] </td>
<td>$[obs.u_observation] </td>

</tr>
</j2:while>
</table>

</div>
</g:ui_form>
</body>

</html>

</j:jelly>

Client script is

function display(){
displaying second div

}

function save()

{

//Color id is auto generated when the values are inserted into table. This ID I need to fetch and store in Observation table when "ADD" button is clicked

var gr = new GlideRecord('u_colorTable');

gr.initialize();

gr.u_color =document.getElementById("perf_select").value;

gr.insert();

}
function popupDispList() {

var gdw = new GlideDialogWindow('display_u_observation_list');
gdw.setTitle('Observations');
gdw.setPreference('table', 'u_observation');
gdw.setPreference('sysparm_view', 'default');
gdw.setSize(750,300);

gdw.render();

}

Rushit Patel2 · ‎09-11-2015

Hi Sowmya,

i have made it working. first i have made add() function which will be triggered when user clicks ADD button.

in that script we are making GlideAjax call beacuse query is not working at client side.

here is add function.

function add(){

var ga = new GlideAjax('getcolor');

ga.addParam('sysparm_name','getid');

ga.getXML(myfunc);

function myfunc(response) {

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

alert(answer);

}

we dont need this callback function but i added just for testing purpose.

now find below script include.make sure u check 'client' check box

var getcolor = Class.create();

getcolor.prototype = Object.extendsObject(AbstractAjaxProcessor, {

getid:function (){

var qr = new GlideRecord('u_colortable');

qr.orderByDesc('u_number'); //sort by last entry in table. change field name with ur field name.

qr.query();

var answer;

if(qr.next()){

answer = qr.getValue('u_number'); //u_number is colorID field in my table(autogenerated).

}

var gr1 = new GlideRecord('u_observation');

gr1.initialize();

gr1.u_colorid =answer + '';

gr1.insert();

return answer;

}

});

i hope it will work. please make correct/helpful if it worked.

thanks,

Rushit Patel

View solution in original post

Rushit Patel2 · ‎09-14-2015

Hi sowmya,

can you post all your code again with table name n field names?

sowmyaj · ‎09-14-2015

Hi Rushit,

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">

<html>

<body>

<g:ui_form id="form" name="form" action="">

<table>

<tr>

<td>

<label for="perf_select"> Category:</label>

</td>

<td>

<option value="All Application">All Application</option>

<option value="Finance Application">Finance Application</option>

<option value="procurement System">Procurement System</option>

</select>

</td>

<tr>

<td>

</td>

</tr>

</table>

</div>

<table>

<tr>

</tr>

<tr>

<p>my requirement part </p>

</tr>

</table>

</div>

<g2:evaluate var="jvar_obs">

var obs = new GlideRecord('u_observation');

obs.query();

</g2:evaluate>

<tr>

<td><b>Observations</b></td>

</tr>

<tr>

<th<b>Observations </b></th>

</tr>

<j2:while test="$[obs.next()]">

<tr>

<td>$[obs.u_observation] </td>

</tr>

</j2:while>

</table>

</div>

</g:ui_form>

</body>

</html>

</j:jelly>

Script

function displayChart(){

// Displays my requirement which works fine

}

function save(){

gel('firstpage').style.display='none';

gel('secondpage').style.display='block';

gel('thirdpage').style.display='block';

var gr = new GlideRecord('u_car');

gr.initialize();

gr.u_catagories=document.getElementById("perf_select").value;

gr.insert();

}

function add() {

var ga = new GlideAjax('getCarDetails');

ga.addParam('sysparm_name','getCarId');

ga.getXML();

var getCarDetails = Class.create();

getCarDetails.prototype =Object.extendsObject(AbstractAjaxProcessor, {

getCarId:function(){

var qr = new GlideRecord('u_car');

qr.orderByDesc('u_carid'); //sort by last entry in table. change field name with ur field name.

qr.query();

var answer;

if(qr.next()){

answer = qr.getValue('u_carid'); //u_number is colorID field in my table(autogenerated).

}

var gr1 = newGlideRecord('u_observation');

gr1.initialize();

gr1.u_car_id =answer+ '';

gr1.insert();

return answer;

} });

var gdw = new
GlideDialogWindow('display_u_observation_list');
gdw.setTitle('Observations');
gdw.setPreference('table', 'u_observation');
gdw.setPreference('sysparm_view', 'default');
gdw.setSize(750,300);

gdw.render();

}

Rushit Patel2 · ‎09-14-2015

Hi Sowmya,

have u created the Script include ?

line var getCarDetails = Class.create(); to line

return answer;

} }); is part of script include.

go to sys def-->script include
create new --> name:getCarDetails
check client check box
remove everything from script and paste code I suggested above.

now it will work.

thanks,

Rushit patel

sowmyaj · ‎09-14-2015

Hi Rushit,

Below is the table structure.

Table "car"

CarId autogenetated

Catagories string

Table "Observation"

Car Id string

Obs Id autogenetated

observation String

Date Date

Thanks,

Sowmya

Rushit Patel2 · ‎09-14-2015

Hi sowmya,

u can make carID field in observation table as reference of car table also. for that there are just 2 changes.

replace line answer = qr.getValue('u_carid'); with answer = qr.getValue('sys_id');

and line gr1.u_car_id =answer+ ''; with gr1.u_car_id =answer;

Thanks,

Rushit Patel