Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

REST API Call in service portal widget

Ravi68
Tera Contributor

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.

 

Ravi68_0-1678947631224.png

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.

 

Ravi68_1-1678948960759.png

 

 

3 REPLIES 3

dana_i
Tera Expert

Hi @Ravi68 ,

May we see your code so we have something on which to discuss further?

 

Dana

Ravi68
Tera Contributor

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;
        }
    }
})();

  

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