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