REST API Call in service portal widget
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-15-2023 11:44 PM - edited 03-16-2023 12:01 AM
Hi,
I have a requirement to call an Address API in a widget by taking the user data as input and presenting back the user with related address suggestions.
I am able to call the API from the widget and get the address response from API as shown below.
I am having difficulty in returning the data from the API and presenting the data back on form as selectable options shown on a reference field as below. How to achieve this?
Any code around this will be helpful.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-23-2023 12:33 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-30-2023
10:21 PM
- last edited on
08-29-2023
05:04 PM
by
ServiceNow
Hi @dana_i ,
I am trying out below code provided by @Nathan Hopkins (https://www.servicenow.com/community/developer-articles/service-portal-widget-with-third-party-rest-.... This one talks about data rendering on a record producer. But i want the same behavior on a portal widget field
HTML template
<div class="panel panel-default">
<div class="panel-heading">
${Search address}
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control" id="address" placeholder="1 Willis St" ng-model="c.data.address">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" ng-click="c.getAddress();">Search</button>
</span>
</div>
</div>
</div>
Server script
(function() {
if (input) {
try {
var r = new sn_ws.RESTMessageV2('Address Lookup', 'Default GET');
//Transform spaces to %20
input.address = input.address.replace(/ /g,"%20");
r.setStringParameterNoEscape('address', input.address);
var response = r.execute();
var responseBody = response.getBody();
var httpStatus = response.getStatusCode();
//Loop through JSON for completions.a
var responseJson = JSON.parse(responseBody);
var a = [];
var list = (responseJson.completions).length;
for (var i = 0; i < list; i++) {
var addresses = responseJson.completions[i];
results = addresses.a;
a.push(results);
}
//Save array with line breaks for readability
data.ReturnAddress = a.join("\n");
} catch (ex) {
var message = ex.message;
}
}
})();
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-31-2023 12:39 AM - edited 03-31-2023 01:05 AM
Hi @Ravi68,
The field in your screenshot looks like a sn-record-picker component and I assume this is what you're trying to achieve.
I see that you're using an input type text field to display a list. Have you tried using a select component instead, keeping in mind that this will lack the search functionality that the sn-record-picker provides.
Let me know which option worked for you, if any, or if you need further assistance.
I hope this helped,
Dana
