Passing Parameter to UI Macro from Incident Form

puneetgoels1 · ‎05-25-2018

I have a requirement to show a grid on the incident form, data of which will come from a custom table, linked to a field on the form.

Say Agency is the field name, if the value of agency changes, data in the grid should also get change. I created ui formatter and created a UI macro to display the data in the grid. If I have to show all the data, it works fine but I am not sure how to pass value of agency from the form to Macro, so it can change the value dynamically

Jon Barnes · ‎05-26-2018

Yep, that is the basic idea I was getting at. Nice job.

View solution in original post

Jon Barnes · ‎05-25-2018

I think you will need to make your macro so that it regenerates its data via an AJAX call instead of building it on the server initially. If you do that, then you can have a function in your macro called something like reloadMyAgencyRelatedData(), and then you can have an onChange client script on your agency field which calls that function. but make sure you check if the function exists first:

if (typeof reloadMyAgencyRelatedData == 'function') {

reloadMyAgencyRelatedData(newValue);

}

puneetgoels1 · ‎05-25-2018

Thats exactly what I did but I am not able to pass the agency value to the glide record

Though agency name is coming in the function

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var = "jvar_agency_name" value ="Human Relations Commission (link w/ OA)" />
<script>
function callAgency(agencyName)
{
alert('Agency :' + agencyName);
${jvar_agency_name} = agencyName
}
</script>
<style>
.pTable
{
width:100%;
border-collapse: collapse;
border: 1px solid;
padding: 10px;
align: center;
}
.pRow
{
}
.pCol
{
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.pRow:nth-child(even)
{
background-color: #eee;
}
.pRow:nth-child(odd)
{
background-color: #fff;
}
.pRowH
{
border: 1px solid #ccc;
padding: 10px;
text-align: left;
background-color: #ded;
}
</style>

<g:evaluate>

var agency ='${jvar_agency_name}';
gs.info('agency : ' + agency);

Jon Barnes · ‎05-25-2018

the problem is that your jelly processing happens while the page is loading on the server side, so you can't tap back into the jelly scripts from java script. You would have to change the whole way you designed that macro to use AJAX to get the data and build the table completely on the client side.

puneetgoels1 · ‎05-26-2018

I was able to make it work with AJAX at client script

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if ( newValue === '') {
return;
}

try{

var ga = new GlideAjax('global.vzCommonSI');
ga.addParam('sysparm_name','fetchAgencyDetails');
ga.addParam('sysparm_agency',newValue);
ga.getXML(setAgencyDetails);

}catch (err)
{
alert('Error : ' +err);
}

}

function setAgencyDetails(response)
{
var answer = response.responseXML.documentElement.getAttribute("answer");
var obj = JSON.parse(answer);
var tableData = '<table border="1" align="left"><tr style="background-color:#ADADAD;"><th style="padding: 5px; text-align: center;">Role</th><th style="padding: 5px; text-align: center;">Contact Person</th></tr>';

tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">Incident Manager</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_inc_manager + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">Problem Manager</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_problem_manager + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">SPM</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_spm + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">Network Manager</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_network_manager + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">LCPM</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_lpcm + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">Engineer Lead</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_engineer_lead + '</div></td></tr>';
tableData = tableData + '<tr><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">Account Manager</div></td><td><div readonly style="padding: 3px; width: 300px; resize:vertical; max-height : 133px; word-wrap: break-word; text-align: center; overflow: auto;">' + obj.u_account_manager + '</div></td></tr>';
tableData = tableData + '</table>';
document.getElementById('agency_list').innerHTML = tableData;
}