This blog will explain how to post data to an external web-service from SharePoint Online(Office 365) site using SharePoint Hosted Apps.
Here I am gonna use Napa tool to create SharePoint Hosted Apps.
Brief introduction on NAPA tools- it is a browser enabled light weighted tool introduced in SharePoint 2013 to create SharePoint Hosted Apps. Reason why i said it is light weighted because this itself is an App which can be added to site and can be used to create an App.
In my site I have already added NAPA tools and it can be seen under Site Contents
Just click on NAPA which will redirect you to the similar screen like below to create an APP.
give a meaningful name(here I had given- CallExternalWebService) and click on Create.
Once it is created you will see the entire project structure like below
Now open App.js and replace the code with the below code.
//start app.js snippet
'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
(function () {
// This code runs when the DOM is ready and creates a context object which is
// needed to use the SharePoint object model
$(document).ready(function () {
getUserName();
CallExternalWebServiceDemo();
});
// This function prepares, loads, and then executes a SharePoint query to get
// the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
function CallExternalWebServiceDemo() {
//url of the webservice
var webserviceURL = "http://xyz.com/api/postsomething";
$.ajax({
url: "../_api/SP.WebProxy.invoke",
type: "POST",
data: JSON.stringify(
{
"requestInfo": {
"__metadata": { "type": "SP.WebRequestInfo" },
"Url": webserviceURL,
"Method": "POST",
"Headers": {
"results": [{
"__metadata": { "type": "SP.KeyValue" },
"Key": "Accept",
"Value": "application/json",
"ValueType": "Edm.String"
}, {
"__metadata": { "type": "SP.KeyValue" },
"Key": "Content-Type",
"Value": "application/json",
"ValueType": "Edm.String"
}]
},
"Body": "in json format"
}
}),
headers: {
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
alert("Sucess");
},
error: function (jqxr, errorCode, errorThrown) {
alert(jqxr.responseText);
}
});
}
})();
////end app.js snippet
Now open settings by clicking on it as shown below
clicking on setting will open screen as shown below
now add your end point and click on apply/
If you are creating SharePoint Hosted App using Visual Studio then "Remote Endpoints" are available in AppManifest.xml.
Now run the app which will automatically deploy and will add it in your site.
Thanks.
