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

ShrinivasprN · 3 weeks ago

just now i changed this code like this

i am getting below response

ShrinivasprN · 3 weeks ago

thank you so much it is working now

k_lutz · 3 weeks ago

Hello,

Sorry for the delay but just got on to start day. Glad to hear that it is working. Nice job! Best way to have fun with the platform is when something is almost working and then find that last piece to get it finalized!

ShrinivasprN · 3 weeks ago

could you please help me to configure for descriptor field as well in script include and in UI page?

k_lutz · 3 weeks ago

Like this?

In my UI page I added the following. Just put them in the logic places in your ui page:

var descriptor = 'N/A';

if (data.fields.createdByDescriptor) {
descriptor = data.fields.createdByDescriptor;
}

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

Then in script include I added in the logical spot.

createdByDescriptor: fields['System.CreatedBy'].descriptor