How to get the glidemodel for custom reference field using UI page

ShrinivasprN · 3 hours ago

Hi Community,

kindly provide me any inputs on below requirements

We have requirement that need to get glidemodel window when custom reference field(u_ado_number) filled and clicked on magnify icon which is in incident table, and in glidemodel window it should show IU page "pbi_search_ui" which contains below code. and in that form it should display all the result, after clicked on Relate button it should save the current incident number and ado number in our custom table(m2m_custom table).

Below code only fetch the requested fields.

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

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

</style>

function fetchIncident() {

var pbiId = document.getElementById("pbi_input").value;

if (!pbiId) {

alert("Please enter a PBI ID.");

return;

}

var ga = new GlideAjax('ADOIncidentFetcher');

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

ga.addParam('sysparm_pbi_id', pbiId);

ga.getXMLAnswer(function(response) {

console.log("Response from server:", response);

console.log("Response type:", typeof response);

if (response) {

console.log("Response length:", response.length);

} else {

console.log("Response is null or undefined");

}

var resultDiv = document.getElementById("result");

if (!response) {

resultDiv.innerHTML = '<p style="color:red;">No response received from server</p>';

return;

}

if (response === '') {

resultDiv.innerHTML = '<p style="color:red;">Empty response received from server</p>';

return;

}

try {

var data = JSON.parse(response);

console.log("Parsed data:", data);

if (data.error) {

resultDiv.innerHTML = '<p style="color:red;">Error: ' + data.error + '</p>';

} else {

var title = 'N/A';

var state = 'N/A';

var workItemType = 'N/A';

var id = 'N/A';

var descriptor = 'N/A';

var assignedTo = 'N/A';

var url = 'N/A';

var targetBuildDate = 'N/A'

if (data.id) {

id = data.id;

}

if (data.url) {

url = data.url;

}

if (data.fields) {

if (data.fields.title) {

title = data.fields.title;

}

if (data.fields.targetBuildDate) {

targetBuildDate = data.fields.targetBuildDate;

}

if (data.fields.state) {

state = data.fields.state;

}

if (data.fields.workitemtype) {

workItemType = data.fields.workitemtype;

}

if (data.fields.descriptor) {

descriptor = data.fields.descriptor;

}

if (data.fields.assignedTo) {

assignedTo = data.fields.assignedTo;

}

var tableHtml = '<table border="1" style="border-collapse: collapse;">';

tableHtml = tableHtml + '<tr><th>ID</th><td>' + id + '</td></tr>';

tableHtml = tableHtml + '<tr><th>Title</th><td>' + title + '</td></tr>';

tableHtml = tableHtml + '<tr><th>State</th><td>' + state + '</td></tr>';

tableHtml = tableHtml + '<tr><th>Work Item Type</th><td>' + workItemType + '</td></tr>';

tableHtml = tableHtml + '<tr><th>Descriptor</th><td>' + descriptor + '</td></tr>';

tableHtml = tableHtml + '<tr><th>Assigned To</th><td>' + assignedTo + '</td></tr>';

tableHtml = tableHtml + '<tr><th>URL</th><td>' + url + '</td></tr>';

tableHtml = tableHtml + '<tr><th>Target Build Date</th><td>' + targetBuildDate + '</td></tr>';

tableHtml = tableHtml + '</table>';

resultDiv.innerHTML = tableHtml;

}

} catch (e) {

console.error("JSON Parse Error:", e);

console.error("Raw response:", response);

resultDiv.innerHTML = '<p style="color:red;">Invalid JSON response: ' + e.message + '</p>';

}

});

}

</script>

</head>

<body>

<h2>Get ADO PBI / Incident Details</h2>

<label for="pbi_input">Enter PBI ID: </label>

<button onclick="fetchIncident()">Fetch</button>

<hr/>

</body>

</html>

</j:jelly>

Thanks in advance

shrinivasprasad