I have two fields
1. Raised on behalf - Reference type - still had to customize an info icon with few fields (cant remove the fields in sys_popup as it would affect the other apps) - when clicked UI page should have 'Raised on behalf Band' OnBehalf by Manager, manager email etc
2. Requester Email ID - string type - need to place an info icon next to it . when clicked UI page should have 'Requester Band, Requester manager, manager email and manger Band level.
Instead of creating two UI macros, using a single UI macro and UI page as shown Below.
Issue is icon displaying though Raised on behalf is empty and though clicking on first icon, only 2nd field (Requester email id ) showing the details in the UI page.
UI Macro code
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<span style="white-space: nowrap;">
<j2:if test="$[!empty('current.u_raised_onbehalf')]">
<div style="display: inline-block; justify-content: center; align-items: center; width:32px;height:32px; border:1px solid#006FCF; box-sizing: border-box; border-radius:6px; padding:7px; ">
<img src="cyc_info.jpg" alt="On Behalf Info" style="cursor:pointer; margin-left: 1px; height: 15px; " onclick="openManagerInfo('u_raised_onbehalf', 'sysparm_sys_id')" />
</div>
</j2:if>
</span>
<br />
<span style="white-space: nowrap;">
<j2:if test="$[current.getValue('u_cyc_flag') == true]">
<div style="display: inline-block; justify-content: center; align-items: center; width:32px;height:32px; border:1px solid#006FCF; box-sizing: border-box; border-radius:6px; padding:7px; ">
<img src="cyc_info.jpg" alt="Requester Info" style="cursor: pointer; margin-left: 1px; height: 15px; " onclick="openManagerInfo('u_requester_email_id', 'sysparm_req_email')" />
</div>
</j2:if>
</span>
<script>
function openManagerInfo(fieldName, parameterName) {
var dialog = new GlideModal('cyc_Manager_Info', false, 400, 400);
var title = 'Leader Information';
var fieldValue = g_form.getValue(fieldName);
alert('fieldValue' + fieldValue);
var parameter = parameterName;
alert('parameter' + parameter);
if (fieldValue) {
dialog.setTitle(title);
dialog.setPreference(parameter, fieldValue);
dialog.render();
} else {
alert('no value found for selected field');
}
}
</script>
</j:jelly>
#UI Page 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:ui_form>
<input type="hidden" id="sysparm_req_email" value="${sysparm_req_email}" />
<input type="hidden" id="sysparm_sys_id" value="${sysparm_sys_id}" />
<table width="90%" style="margin-top: 20px;">
<style>
td{
padding:2px;
}
</style>
<j2:if test="${!empty(sysparm_req_email)}">
<tr >
<td>Requester Band</td>
<td><input type="text" id="requestor_band" disabled="true" maxlength="40" style = "width:200px;" /></td>
</tr>
<tr>
<td>Requester Manager</td>
<td><input type="text" id="manager_name" disabled="true" maxlength="250" style = "width:200px;" /></td>
</tr>
<tr>
<td>Manager Email</td>
<td><input type="text" id="email" disabled="true" maxlength="100" style = "width:200px;"/></td>
</tr>
<tr>
<td>Band Level </td>
<td><input type="text" id="band_level" disabled="true" maxlength="40" style = "width:200px;"/></td>
</tr>
</j2:if>
<j2:if test="${!empty(sysparm_sys_id)}">
<tr >
<td>On Behalf By Band</td>
<td><input type="text" id="raised_onbehalf" disabled="true" maxlength="40" style = "width:200px;" /></td>
</tr>
<tr>
<td>On Behalf Manager</td>
<td><input type="text" id="manager_name" disabled="true" maxlength="250" style = "width:200px;" /></td>
</tr>
<tr>
<td>Manager Email</td>
<td><input type="text" id="email" disabled="true" maxlength="100" style = "width:200px;"/></td>
</tr>
<tr>
<td>Band Level </td>
<td><input type="text" id="band_level" disabled="true" maxlength="40" style = "width:200px;"/></td>
</tr>
</j2:if>
</table>
</g:ui_form>
</j:jelly>
UI page Client script
function onLoad() {
var req_emailid = document.getElementById('sysparm_req_email').value;
alert('req_emailid in UI page' + req_emailid);
var sysId = document.getElementById('sysparm_sys_id').value;
if (!req_emailid && !sysId) {
return;
}
var ga = new GlideAjax('CYC_APPP_ServerSideUtils'); //using the existing utils
ga.addParam('sysparm_name', 'getManagerInfo');
if (sysId) {
ga.addParam('sysparm_sys_id', sysId);
}
else if (req_emailid) {
ga.addParam('sysparm_req_email', req_emailid);
alert('sysparm_req_email parameter added' + req_emailid);
}
alert('calling getXML');
ga.getXML(populateManagerInfo);
alert('getXML called');
}
function populateManagerInfo(response) {
alert('pop info started');
var answer = response.responseXML.documentElement.getAttribute("answer");
try {
var info = JSON.parse(answer);
if (info.raised_onbehalf_band) {
document.getElementById('raised_onbehalf').value = info.raised_onbehalf_band || '';
}if (info.requestor_band) {
info.getElementById('requestor_band').value = info.requestor_band || '';
}
document.getElementById('manager_name').value = info.manager_name || '';
document.getElementById('email').value = info.email || '';
document.getElementById('band_level').value = info.band_level || '';
} catch (e) {
console.error('Error parsing manager data:', e);
}
}
// Trigger onLoad after the modal loads
addLoadEvent(onLoad);
Appreciate the Help
Thank you
