SharePoint Hosted App:- post data to External Webservice

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.