Not able to call script include via UI page

Go to solution
ShrinivasprN
Tera Contributor

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>
  <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) {
        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 = `
            <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>
          `;
        }
      });
    }
  </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>
 
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 });
    }
  }
 
});
 
0 Helpfuls
  • 1,414 Views
1 ACCEPTED SOLUTION

Go to solution
k_lutz
Tera Expert
In response to John Gilmore

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:

 

k_lutz_0-1755799875345.png

 

Adjusted UI Page:

<html>
<head>
<script type="text/javascript">
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>
<input type="text" id="pbi_input" />
<button onclick="fetchIncident()">Fetch</button>
<hr/>
<div id="result"></div>
</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

0 Helpfuls
26 REPLIES 26

Go to solution
k_lutz
Tera Expert
In response to ShrinivasprN

4 weeks ago

Can you try the UI Page code I had pasted above?

0 Helpfuls

Go to solution
ShrinivasprN
Tera Contributor
In response to k_lutz

4 weeks ago

i tried it, it is not working, now script include triggering but in table proper values are not coming. 

0 Helpfuls