For this example, I have considered

• POST request which would take feedback submitted on SP Page and send it a 3rd party API.
• GET request which would display the API response in List view on SP page.

1. Integrate 3rd Party APIs

• Go to System Web Services → Outbound → REST Message
• Create a new REST call
• Give a Name and Endpoints

Ex -

• Scroll down to the HTTP Methods - here, there will be a default GET request. This can be modified to accommodate our API.

• After creating the API, you can test them by clicking on the Test button on the bottom

• Create a similar one for POST request as well,
• I have considered a JSON request - so, mentioned the Content-Type in the Header section
• In the JSON request, you can do variable substitutions using ${field_name}, as shown in the example.

• You can get the Script by clicking on ‘Preview Script Usage’ found below the Related Links

2. Create a Widget

• The easiest way to create a widget is to find a similar already created widgets in ServiceNow and clone them
• Widget editor makes it very convenient to make changes and preview them as well.

Feedback Widget

• in the Server Script you add the function to call the REST POST message. (this script is got from the ‘Preview Script Usage’, mentioned in the above section).

function sendFeedback(feedback) {
var gdt = new GlideDateTime().getNumericValue();
try { 
var r = new sn_ws.RESTMessageV2('abc', 'Post Feedback');
r.setStringParameterNoEscape('feedback', JSON.stringify(feedback));
r.setStringParameterNoEscape('timestamp', JSON.stringify(gdt));
var response = r.execute();
}
catch(ex) {
var message = ex.message;
}
}

Category view Widget

• Similar to Feedback, we add the REST call in the server script ex:

data.abc_categories = [];
var r = new sn_ws.RESTMessageV2('abc', 'Default GET');
var response = r.execute();
var responseBody = response.getBody();
var json = new JSON();
var jsObj = json.decode(responseBody);
var categories = Object.keys(jsObj.data);
for(var i = 0 ; i < categories.length; i++){
var category = {
'value' : categories[i],
'label' : categories[i]
};
data.abc_categories.push(category);
}

* Associated HTML code, would look like

<div class="panel panel-{{options.color}} b">
<div class="panel-heading">
<h4 class="h4 panel-title">${Categories}</h4>
</div>
<div class="panel-body">
<div ng-repeat="a in data.abc_categories | orderBy:'label'" class="category_list">
<p>{{::a.label}}</p>
</div>
</div>
</div

3. Adding a widget to a Service Portal Page

• Go to Service Portal Configuration → Designer. Here, select any Page to which you want to add the widget
• Filter for the widget and drag it to place it on the Page.

Hope this helps!

Labels:

• Integrations
• Service Portal Development