Not able to call script include via UI page

ShrinivasprN · 3 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

k_lutz · 3 weeks ago

ShrinivasprN,

The first thing I would check is if the script include is client callable. I copied your code into dev. I put in a log entry in the script include and I saw my entry in the log even though I do not have the REST call setup. When I cleared the client callable checkbox on the script include, I no longer had the log statement. Second, if the script include is being triggered I would verify the REST call is working.

Hope that may help.

ShrinivasprN · 3 weeks ago

Hello @k_lutz,

Thanks for the reply, yes it i checked client callable.

ShrinivasprN · 3 weeks ago

Hello @k_lutz ,

Thanks for the reply, yes i checked client callable check box.

k_lutz · 3 weeks ago

Can you try this version of your UI Page (attached). Also...have you confirmed your REST call is working by trying it independent of the UI Page calling it?

<html>
<head>
<script>
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);

var resultDiv = document.getElementById("result");
try {
var data = JSON.parse(response);

if (data.error) {
resultDiv.innerHTML = `<p style="color:red;">Error: ${data.error}</p>`;
} else {
resultDiv.innerHTML = `
<table border="1" style="border-collapse: collapse;">
<tr><th>ID</th><td>${data.id}</td></tr>
<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>
`;
}
} catch (e) {
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>
<input type="text" id="pbi_input" />
<button onclick="fetchIncident()">Fetch</button>
<hr/>
<div id="result"></div>
</body>
</html>