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

Ankur Bawiskar · 4 weeks ago

@ShrinivasprN

what debugging did you do?

1) is script include client callable?

2) script include and UI page are in same scope?

3) did you add gs.info() in script include function and alert in client side?

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

ShrinivasprN · 4 weeks ago

Hello @Ankur Bawiskar ,

Thanks for the reply, 1) is script include client callable? yes, 2) script include and UI page are in same scope? yes, did you add gs.info() in script include function and alert in client side? i added alert in the both scripts

let me try gs.info in script include

ShrinivasprN · 4 weeks ago

no not working

Ankur Bawiskar · 4 weeks ago

@ShrinivasprN

Did you add alert and see if pbiId is fetched?

alert('pbiId is' + pbiId);
if (!pbiId) {
alert("Please enter a PBI ID.");
return;
}

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

ShrinivasprN · 4 weeks ago

yes it is working