How to call a third-party REST API using record producer and a widget. This article also shows how to embed a widget into a record producer or catalog item.

Note you can develop an integration like this in different ways, but this is my method that I prefer.

RESULT

Code

API Account

For this demo, I created an account at https://developer.accuweather.com

REST MESSAGES

To get the current weather from the Accuweather api, you first need to call the Location HTTP method to get a location key. After you get the Location key, you can use that to get the current weather.

Rest Message

Name: Accuweather
Application: Global
Endpoint: http://dataservice.accuweather.com

Authentication type: No authentication (We use an API Key)

HTTP Method (Location)

Name: Location
HTTP Method: GET
Endpoint: http://dataservice.accuweather.com/locations/v1/cities/search
Authentication Type: Inherit from Parent
HTTP Query Parameters
Name | Value
apikey | <yourkey>
q | $
Variable Substitutions
q | Fort Ripley

HTTP Method (Current Weather)

Name: Current Weather
HTTP Method: GET
Endpoint: http://dataservice.accuweather.com/currentconditions/v1/$[object Object]
Authentication Type: Inherit from Parent
HTTP Query Parameters
Name | Value
apikey | <yourkey>
Variable Substitutions
location | 2247543

Test Run for Current Weather HTTP Method

Widget

Name

Weather Alert

HTML

<div class="panel panel-default">
  <div class="panel-heading">
    ${Get Current Weather}
  </div>
  <div class="panel-body">
    <div class="input-group">
      <input type="text" class="form-control" id="location" placeholder="$" ng-model="c.data.location">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary" ng-click="c.getWeather();">$</button>
      </span>
    </div>
  </div>
</div>

Server Script

Two REST calls are done here, one to the location HTTP method to get the location key, and the other to get the current weather.

(function() {
	if (input) {
		try { 
			//Get Location
			var rloc = new sn_ws.RESTMessageV2('Accuweather', 'Location');
			rloc.setStringParameterNoEscape('q', input.location);
			var locResponse = rloc.execute();
			var locResponseBody = locResponse.getBody();
			var locHttpStatus = locResponse.getStatusCode();
			var locParser = new JSONParser();
			var locJsonObj = locParser.parse(locResponseBody);
			var locKey = locJsonObj[0].Key;
			data.city = locJsonObj[0].LocalizedName;
			
			//Get Current Weather
			var rCW = new sn_ws.RESTMessageV2('Accuweather', 'Current Weather');
			rCW.setStringParameterNoEscape('location', locKey);
			var cwResponse = rCW.execute();
			var cwResponseBody = cwResponse.getBody();
			var cwHttpStatus = cwResponse.getStatusCode();
			var cwParser = new JSONParser();
			var cwJsonObj = cwParser.parse(cwResponseBody);
			data.WeatherText = cwJsonObj[0].WeatherText;
			data.PrecipitationType = cwJsonObj[0].PrecipitationType;
			data.Temperature = cwJsonObj[0].Temperature.Imperial.Value;
		}
		catch(ex) {
			var message = ex.message;
		}
	}
})();

Client Controller

Using $scope.page.g_form, the fields on the form are set after the button is clicked.

function($scope) {
	var c = this;
	c.getWeather = function() {
		c.server.update().then(function() {
			var g_form = $scope.page.g_form;
			g_form.setValue('WeatherText', c.data.WeatherText);
			g_form.setValue('PrecipitationType', c.data.PrecipitationType);
			g_form.setValue('Temperature', c.data.Temperature);
			g_form.setValue('city', c.data.city);
		})
	}
}

Record Producer

NAME: Weather Alert
TABLE NAME: incident

Script

current.short_description = 'Weather Alert for: '+producer.city;
var weatherData = 'City: '+producer.city+'\n';
weatherData += 'Weather Information: '+producer.WeatherText+'\n';
weatherData += 'Precipitation Type: '+producer.PrecipitationType+'\n';
weatherData += 'Temperature (F): '+producer.Temperature+'\n';
current.comments = weatherData;

Variables

The Weather Alert widget is embedded in the catalog item as a macro.

Question | Name | Type | Widget | Order
Ask on behalf of this user | caller_id | Reference |  | 100
Weather Alert Widget | weather_alert_widget | Macro | Weather Alert | 200
Weather Information | WeatherText | Single Line Text |  | 300
Precipitation Type | PrecipitationType | Single Line Text |  | 400
Temperature (F) | Temperature | Single Line Text |  | 500
City | city | Single Line Text |  | 600

UI POLICY

Name | UI policy | Read only | Mandatory | Visible
PrecipitationType | Read Only and Mandatory | True | Leave alone | Leave alone
city | Read Only and Mandatory | Leave alone | Leave alone | False
Temperature | Read Only and Mandatory | True | Leave alone | Leave alone
WeatherText | Read Only and Mandatory | True | Leave alone | Leave alone