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