Not able to call script include via UI page

ShrinivasprN · 4 weeks ago

Hi Community,

We have new integration requirement, need to fetch the ADO PBI data to ServiceNow

created script include and Ui page, but script include code not executing. so any suggestion?

UI Page code

<html>

<head>

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) {

var data = JSON.parse(response);

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

//alert("testing ui page"+resultDiv);

if (data.error) {

resultDiv.innerHTML = `<p style="color:red;">Error: ${data.error}</p>`;

} else {

resultDiv.innerHTML = `

<tr><th>Title</th><td>${data.title}</td></tr>

<tr><th>State</th><td>${data.state}</td></tr>

<tr><th>Work Item Type</th><td>${data.workItemType}</td></tr>

</table>

`;

}

});

}

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

script include

var ADOIncidentFetcher = Class.create();

ADOIncidentFetcher.prototype = Object.extendsObject(AbstractAjaxProcessor, {

fetchPBI: function() {

var pbiId = this.getParameter('sysparm_pbi_id');

if (!pbiId) return JSON.stringify({ error: 'No PBI ID provided' });

var rest = new sn_ws.RESTMessageV2('ADO_Get_PBI', 'GET');

rest.setStringParameterNoEscape('pbi_id', pbiId);

try {

var response = rest.execute();

var body = response.getBody();

var result = JSON.parse(body);

var fields = result.fields;

return JSON.stringify({

id: result.id,

title: fields.System.Title,

state: fields.System.State,

workItemType: fields.System.WorkItemType

});

} catch (ex) {

return JSON.stringify({ error: ex.message });

}

});

k_lutz · 3 weeks ago

I used your suggestion and looks like it does need to be adjusted in ShrinivasprN code. I tweaked my UI Page and script include to try and replicate what was provided and was able to get:

Adjusted UI Page:

<html>

<head>

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';

if (data.id) {

id = data.id;

}

if (data.fields) {

if (data.fields.titlefield) {

title = data.fields.titlefield;

}

if (data.fields.statefield) {

state = data.fields.statefield;

}

if (data.fields.workitemtypefield) {

workItemType = data.fields.workitemtypefield;

}

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 + '</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>

Adjusted script include a bit

var fields = result.fields;

// Log the fields object properly

gs.info('Fields retrieved: ' + JSON.stringify(fields, null, 2));

// Return data in format expected by client

return JSON.stringify({

id: result.id,

fields: {

titlefield: fields['System.Title'],

statefield: fields['System.State'],

workitemtypefield: fields['System.WorkItemType']

}

});

View solution in original post

John Gilmore · 3 weeks ago

If this is the expected response then the following lines are invalid references to the parsed json.

              <tr><th>Title</th><td>${data.title}</td></tr>
              <tr><th>State</th><td>${data.state}</td></tr>
              <tr><th>Work Item Type</th><td>${data.workItemType}</td></tr>

Based on this the id is likely coming through correct while Title, State, and Work Item Type are incorrect. You'll need to correctly reference the parsed values inside data. It appears the values you are pulling are within the "fields" so the references would need to be updated to something like this:

              <tr><th>Title</th><td>${data.fields.titlefield}</td></tr>
              <tr><th>State</th><td>${data.fields.statefield}</td></tr>
              <tr><th>Work Item Type</th><td>${data.fields.workitemtypefield}</td></tr>

k_lutz · 3 weeks ago

I used your suggestion and looks like it does need to be adjusted in ShrinivasprN code. I tweaked my UI Page and script include to try and replicate what was provided and was able to get:

Adjusted UI Page:

<html>

<head>

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';

if (data.id) {

id = data.id;

}

if (data.fields) {

if (data.fields.titlefield) {

title = data.fields.titlefield;

}

if (data.fields.statefield) {

state = data.fields.statefield;

}

if (data.fields.workitemtypefield) {

workItemType = data.fields.workitemtypefield;

}

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 + '</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>

Adjusted script include a bit

var fields = result.fields;

// Log the fields object properly

gs.info('Fields retrieved: ' + JSON.stringify(fields, null, 2));

// Return data in format expected by client

return JSON.stringify({

id: result.id,

fields: {

titlefield: fields['System.Title'],

statefield: fields['System.State'],

workitemtypefield: fields['System.WorkItemType']

}

});

ShrinivasprN · 3 weeks ago

i used below code

script include

var ADOIncidentFetcher = Class.create();

ADOIncidentFetcher.prototype = Object.extendsObject(AbstractAjaxProcessor, {

fetchPBI: function() {

var pbiId = this.getParameter('sysparm_pbi_id');

if (!pbiId) return JSON.stringify({ error: 'No PBI ID provided' });

var rest = new sn_ws.RESTMessageV2('ADO_Get_PBI', 'GET');

rest.setStringParameterNoEscape('pbi_id', pbiId);

//alert("testing"+pbiId);

try {

var response = rest.execute();

var body = response.getBody();

var fields = result.fields;

// Log the fields object properly

gs.info('Fields retrieved: ' + JSON.stringify(fields, null, 2));

// Return data in format expected by client

return JSON.stringify({

id: result.id,

fields: {

titlefield: fields['System.Title'],

statefield: fields['System.State'],

workitemtypefield: fields['System.WorkItemType']

}

});

} catch (ex) {

return JSON.stringify({ error: ex.message });

}

});

UI page

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

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';

if (data.id) {

id = data.id;

}

if (data.fields) {

if (data.fields.titlefield) {

title = data.fields.titlefield;

}

if (data.fields.statefield) {

state = data.fields.statefield;

}

if (data.fields.workitemtypefield) {

workItemType = data.fields.workitemtypefield;

}

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 + '</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>

ShrinivasprN · 3 weeks ago

ShrinivasprN · 3 weeks ago

could you please provide whole script include here