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>
</div3. 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!
