HOW TO: Use REST to POST in Hosted SharePoint Apps

Published May 01 2019 03:42 PM 450 Views
Microsoft

First published on TECHNET on Apr 15, 2013

 

 

This blog post is a contribution from Mustaq Patel, an engineer with the SharePoint Developer Support team.

 

This blog post demonstrates the use of SharePoint 2013 REST from AppWeb to issue HTTP POST on HostWeb. This  does not require cross domain calls or the use of SP.RequestExecutor.js.  Cross-site collection calls are demonstrated in Solving cross-domain problems in apps for SharePoint .

 

So let’s dive into the App. This App is an OnPrem SharePoint hosted app which will create a sub-site in the hostweb, create a custom List within that sub-site and create list item in the custom list.

 

This can be further enhanced to do the full CRUD operations using REST as demonstrated in http://msdn.microsoft.com/en-us/library/jj164022.aspx

 

Prerequisite

 

You will need a SharePoint 2013 environment that is configured to develop and deploy SharePoint Apps. If not please follow below MSDN to configure your environment for SharePoint Apps : How to: Set up an on-premises development environment for apps for SharePoint

 

Steps

 

1. Create a SharePoint Hosted App using Visual Studio 2012  using your on premise Site Url to deploy the App.

 

2. Edit default.aspx markup and add the following to PlaceHolderMain


<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<div>

<p id="message"></p>

</div>

<br /><br />

<input id="btncreatespweb" type="button" value="Create SPWeb on HostWeb" onclick="createSPWeb();" />

&nbsp;&nbsp;

<input id="btncreatesplist" type="button" value="Create SPList on HostWeb" onclick="createSPList();" />

&nbsp;&nbsp;

<input id="btncreatesplistitem" type="button" value="Create SPListItem" onclick="createSPListItem();" />

</asp:Content>

3. Edit App.js and replace all the code with the following :


'use strict';

var hostweburl;

var appweburl;

// 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 () {

hostweburl= decodeURIComponent(getQueryStringParameter("SPHostUrl"));

appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

});

function createSPWeb() {

$.ajax(

{

url: appweburl +

"/_api/SP.AppContextSite(@target)/web/webinfos/add?@target='" +

hostweburl + "'",

type: "POST",

data: JSON.stringify(

{

'parameters':

{

'__metadata': { 'type': 'SP.WebInfoCreationInformation' },

'Url': 'RestSubWeb',

'Title': 'RestSubWeb',

'Description': 'REST created web',

'Language': 1033,

'WebTemplate': 'sts',

'UseUniquePermissions': false

}

}

),

headers: {

"accept": "application/json;odata=verbose",

"content-type": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val()

},

success: successHandler,

error: errorHandler

});

}

function createSPList() {

$.ajax(

{

url: appweburl +

"/_api/SP.AppContextSite(@target)/web/lists?@target='" +

hostweburl + "/RestSubWeb'",

type: "POST",

data: JSON.stringify({

'__metadata': { 'type': 'SP.List' },

'AllowContentTypes': true,

'BaseTemplate': 100,

'ContentTypesEnabled': true,

'Description': 'My TestCustomList description',

'Title': 'TestCustomList'

}),

headers: {

"accept": "application/json;odata=verbose",

"content-type": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val()

},

success: successHandler,

error: errorHandler

});

}

function createSPListItem() {

$.ajax(

{

url: appweburl +

"/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('TestCustomList')/items?@target='" +

hostweburl + "/RestSubWeb'",

type: "POST",

data: JSON.stringify({

'__metadata': { 'type': 'SP.Data.TestCustomListListItem' },

'Title': 'Added from RESTSPApp'

}),

headers: {

"accept": "application/json;odata=verbose",

"content-type": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val()

},

success: successHandler,

error: errorHandler

});

}

function successHandler() {

$('#message').text('Success');

}

function errorHandler(data, errorCode, errorMessage) {

$('#message').text('Error ' + errorMessage);

}

function getQueryStringParameter(paramToRetrieve) {

var params =

document.URL.split("?")[1].split("&");

var strParams = "";

for (var i = 0; i < params.length; i = i + 1) {

var singleParam = params[i].split("=");

if (singleParam[0] == paramToRetrieve)

return singleParam[1];

}

}

4. Next navigate to AppManifest –> Permissions. Select Scope=Site Collection and Permission=Full Control

 

5. Deploy the App. Once deployed, the default page should load

 

 

6. Click “ Create SPWeb on HostWeb ”. Once you see the text “Success” above the button, go to the Host web where you will see the new sub-site “ RestSubWeb ” created

 

7. Create a List  and List item using “Create SPList on HostWeb” and “Create SPListIiem” buttons.

 

Here’s how the code works without using cross-domain JavaScript library. The AppContextSite object will create appropriate context based on @target parameter and call the appropriate REST endpoint to do POST to SharePoint. REST url syntax used here is appWebUrl/_api/SP.AppContextSite(@target)/web?@target='http://devsite'

 

Where appWebUrl/_api/SP.AppContextSite(@target)/ does not change but the parameters web? is the based the object that you’re accessing and @target value  is the url of the site from where you are trying to access it.

 

For example to access list on the host web use  appWebUrl/_api/SP.AppContextSite(@target)/web/lists?@target='” +hostWebUrl+ “’”

 

To create custom field for a list in host web

 

appWebUrl/_api/SP.AppContextSite(@target)/web/lists(guid ‘list GUID’)/Fields?@target='” +hostWebUrl+ “’”

 

I hope this simple demo helps writing robust Apps for SharePoint using REST API.

%3CP%3E%3C%2FP%3E%0A%3CP%3E3.%20Edit%20App.js%20and%20replace%20all%20the%20code%20with%20the%20following%20%3A%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E'use%20strict'%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20hostweburl%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20appweburl%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%2F%2F%20This%20code%20runs%20when%20the%20DOM%20is%20ready%20and%20creates%20a%20context%20object%20which%20is%20needed%20to%20use%20the%20SharePoint%20object%20model%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24(document).ready(function%20()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%3D%20decodeURIComponent(getQueryStringParameter(%22SPHostUrl%22))%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eappweburl%20%3D%20decodeURIComponent(getQueryStringParameter(%22SPAppWebUrl%22))%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPWeb()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Fwebinfos%2Fadd%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'parameters'%3A%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.WebInfoCreationInformation'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Url'%3A%20'RestSubWeb'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'RestSubWeb'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Description'%3A%20'REST%20created%20web'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Language'%3A%201033%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'WebTemplate'%3A%20'sts'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'UseUniquePermissions'%3A%20false%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPList()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22%2FRestSubWeb'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.List'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'AllowContentTypes'%3A%20true%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'BaseTemplate'%3A%20100%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'ContentTypesEnabled'%3A%20true%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Description'%3A%20'My%20TestCustomList%20description'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'TestCustomList'%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPListItem()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%2FGetByTitle('TestCustomList')%2Fitems%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22%2FRestSubWeb'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.Data.TestCustomListListItem'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'Added%20from%20RESTSPApp'%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20successHandler()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24('%23message').text('Success')%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20errorHandler(data%2C%20errorCode%2C%20errorMessage)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24('%23message').text('Error%20'%20%2B%20errorMessage)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20getQueryStringParameter(paramToRetrieve)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20params%20%3D%20%3CBR%20%2F%3E%3CBR%20%2F%3Edocument.URL.split(%22%3F%22)%5B1%5D.split(%22%26amp%3B%22)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20strParams%20%3D%20%22%22%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Efor%20(var%20i%20%3D%200%3B%20i%20%26lt%3B%20params.length%3B%20i%20%3D%20i%20%2B%201)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20singleParam%20%3D%20params%5Bi%5D.split(%22%3D%22)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eif%20(singleParam%5B0%5D%20%3D%3D%20paramToRetrieve)%20%3CBR%20%2F%3E%3CBR%20%2F%3Ereturn%20singleParam%5B1%5D%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%3C%2FP%3E%0A%3CP%3E4.%20Next%20navigate%20to%20AppManifest%20%E2%80%93%26gt%3B%20Permissions.%20Select%20Scope%3DSite%20Collection%20and%20Permission%3DFull%20Control%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E5.%20Deploy%20the%20App.%20Once%20deployed%2C%20the%20default%20page%20should%20load%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20407px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F111472iABE0AE80C2C9D894%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E6.%20Click%20%E2%80%9C%20%3CEM%3E%20Create%20SPWeb%20on%20HostWeb%20%3C%2FEM%3E%20%E2%80%9D.%20Once%20you%20see%20the%20text%20%E2%80%9CSuccess%E2%80%9D%20above%20the%20button%2C%20go%20to%20the%20Host%20web%20where%20you%20will%20see%20the%20new%20sub-site%20%E2%80%9C%20%3CEM%3E%20RestSubWeb%20%3C%2FEM%3E%20%E2%80%9D%20created%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E7.%20Create%20a%20List%26nbsp%3B%20and%20List%20item%20using%20%E2%80%9CCreate%20SPList%20on%20HostWeb%E2%80%9D%20and%20%E2%80%9CCreate%20SPListIiem%E2%80%9D%20buttons.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere%E2%80%99s%20how%20the%20code%20works%20without%20using%20cross-domain%20JavaScript%20library.%20The%20AppContextSite%20object%20will%20create%20appropriate%20context%20based%20on%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F430686%22%20target%3D%22_blank%22%3E%40target%3C%2FA%3E%20parameter%20and%20call%20the%20appropriate%20REST%20endpoint%20to%20do%20POST%20to%20SharePoint.%20REST%20url%20syntax%20used%20here%20is%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%3F%40target%3D'http%3A%2F%2Fdevsite'%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhere%20%3CSTRONG%3E%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2F%20%3C%2FSTRONG%3E%20does%20not%20change%20but%20the%20parameters%20%3CSTRONG%3E%20web%3F%20%3C%2FSTRONG%3E%20is%20the%20based%20the%20object%20that%20you%E2%80%99re%20accessing%20and%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F430686%22%20target%3D%22_blank%22%3E%40target%3C%2FA%3E%20value%26nbsp%3B%20is%20the%20url%20of%20the%20site%20from%20where%20you%20are%20trying%20to%20access%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20example%20to%20access%20list%20on%20the%20host%20web%20use%26nbsp%3B%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%3F%40target%3D'%E2%80%9D%20%2BhostWebUrl%2B%20%E2%80%9C%E2%80%99%E2%80%9D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20create%20custom%20field%20for%20a%20list%20in%20host%20web%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EappWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists(guid%20%E2%80%98list%20GUID%E2%80%99)%2FFields%3F%40target%3D'%E2%80%9D%20%2BhostWebUrl%2B%20%E2%80%9C%E2%80%99%E2%80%9D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20simple%20demo%20helps%20writing%20robust%20Apps%20for%20SharePoint%20using%20REST%20API.%3C%2FP%3E%3CLINGO-SUB%20id%3D%22lingo-sub-509776%22%20slang%3D%22en-US%22%3EHOW%20TO%3A%20Use%20REST%20to%20POST%20in%20Hosted%20SharePoint%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-509776%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3E%20First%20published%20on%20TECHNET%20on%20Apr%2015%2C%202013%20%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20blog%20post%20is%20a%20contribution%20from%20Mustaq%20Patel%2C%20an%20engineer%20with%20the%20SharePoint%20Developer%20Support%20team.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20blog%20post%20demonstrates%20the%20use%20of%20SharePoint%202013%20REST%20from%20AppWeb%20to%20issue%20HTTP%20POST%20on%20HostWeb.%20This%26nbsp%3B%20does%20not%20require%20cross%20domain%20calls%20or%20the%20use%20of%20SP.RequestExecutor.js.%26nbsp%3B%20Cross-site%20collection%20calls%20are%20demonstrated%20in%20%3CA%20href%3D%22http%3A%2F%2Fblogs.msdn.com%2Fb%2Fofficeapps%2Farchive%2F2012%2F11%2F29%2Fsolving-cross-domain-problems-in-apps-for-sharepoint.aspx%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%20Solving%20cross-domain%20problems%20in%20apps%20for%20SharePoint%20%3C%2FA%3E%20.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESo%20let%E2%80%99s%20dive%20into%20the%20App.%20This%20App%20is%20an%20OnPrem%20SharePoint%20hosted%20app%20which%20will%20create%20a%20sub-site%20in%20the%20hostweb%2C%20create%20a%20custom%20List%20within%20that%20sub-site%20and%20create%20list%20item%20in%20the%20custom%20list.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20can%20be%20further%20enhanced%20to%20do%20the%20full%20CRUD%20operations%20using%20REST%20as%20demonstrated%20in%20%3CA%20href%3D%22http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fjj164022.aspx%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%20http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fjj164022.aspx%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E%20Prerequisite%20%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20will%20need%20a%20SharePoint%202013%20environment%20that%20is%20configured%20to%20develop%20and%20deploy%20SharePoint%20Apps.%20If%20not%20please%20follow%20below%20MSDN%20to%20configure%20your%20environment%20for%20SharePoint%20Apps%20%3A%20%3CA%20href%3D%22http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Ffp179923.aspx%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%20How%20to%3A%20Set%20up%20an%20on-premises%20development%20environment%20for%20apps%20for%20SharePoint%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E%20Steps%20%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E1.%20Create%20a%20SharePoint%20Hosted%20App%20using%20Visual%20Studio%202012%26nbsp%3B%20using%20your%20on%20premise%20Site%20Url%20to%20deploy%20the%20App.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E2.%20Edit%20default.aspx%20markup%20and%20add%20the%20following%20to%20PlaceHolderMain%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%3CCONTENT%20contentplaceholderid%3D%22%26quot%3BPlaceHolderMain%26quot%3B%22%20runat%3D%22%26quot%3Bserver%26quot%3B%22%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FCONTENT%3E%3C%2FP%3E%3CDIV%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CP%20id%3D%22%26quot%3Bmessage%26quot%3B%22%3E%3C%2FP%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FDIV%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CINPUT%20id%3D%22%26quot%3Bbtncreatespweb%26quot%3B%22%20type%3D%22%26quot%3Bbutton%26quot%3B%22%20value%3D%22%26quot%3BCreate%22%20spweb%3D%22%22%20on%3D%22%22%20hostweb%3D%22%22%20%2F%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%26amp%3Bnbsp%3B%26amp%3Bnbsp%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CINPUT%20id%3D%22%26quot%3Bbtncreatesplist%26quot%3B%22%20type%3D%22%26quot%3Bbutton%26quot%3B%22%20value%3D%22%26quot%3BCreate%22%20splist%3D%22%22%20on%3D%22%22%20hostweb%3D%22%22%20%2F%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%26amp%3Bnbsp%3B%26amp%3Bnbsp%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CINPUT%20id%3D%22%26quot%3Bbtncreatesplistitem%26quot%3B%22%20type%3D%22%26quot%3Bbutton%26quot%3B%22%20value%3D%22%26quot%3BCreate%22%20splistitem%3D%22%22%20%2F%3E%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CP%3E%3C%2FP%3E%0A%3CP%3E3.%20Edit%20App.js%20and%20replace%20all%20the%20code%20with%20the%20following%20%3A%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E'use%20strict'%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20hostweburl%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20appweburl%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%2F%2F%20This%20code%20runs%20when%20the%20DOM%20is%20ready%20and%20creates%20a%20context%20object%20which%20is%20needed%20to%20use%20the%20SharePoint%20object%20model%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24(document).ready(function%20()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%3D%20decodeURIComponent(getQueryStringParameter(%22SPHostUrl%22))%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eappweburl%20%3D%20decodeURIComponent(getQueryStringParameter(%22SPAppWebUrl%22))%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPWeb()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Fwebinfos%2Fadd%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'parameters'%3A%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.WebInfoCreationInformation'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Url'%3A%20'RestSubWeb'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'RestSubWeb'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Description'%3A%20'REST%20created%20web'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Language'%3A%201033%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'WebTemplate'%3A%20'sts'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'UseUniquePermissions'%3A%20false%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPList()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22%2FRestSubWeb'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.List'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'AllowContentTypes'%3A%20true%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'BaseTemplate'%3A%20100%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'ContentTypesEnabled'%3A%20true%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Description'%3A%20'My%20TestCustomList%20description'%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'TestCustomList'%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20createSPListItem()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24.ajax(%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eurl%3A%20appweburl%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%2FGetByTitle('TestCustomList')%2Fitems%3F%40target%3D'%22%20%2B%20%3CBR%20%2F%3E%3CBR%20%2F%3Ehostweburl%20%2B%20%22%2FRestSubWeb'%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Etype%3A%20%22POST%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Edata%3A%20JSON.stringify(%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E'__metadata'%3A%20%7B%20'type'%3A%20'SP.Data.TestCustomListListItem'%20%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E'Title'%3A%20'Added%20from%20RESTSPApp'%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eheaders%3A%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22accept%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22content-type%22%3A%20%22application%2Fjson%3Bodata%3Dverbose%22%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3E%22X-RequestDigest%22%3A%20%24(%22%23__REQUESTDIGEST%22).val()%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Esuccess%3A%20successHandler%2C%20%3CBR%20%2F%3E%3CBR%20%2F%3Eerror%3A%20errorHandler%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20successHandler()%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24('%23message').text('Success')%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20errorHandler(data%2C%20errorCode%2C%20errorMessage)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%24('%23message').text('Error%20'%20%2B%20errorMessage)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3Efunction%20getQueryStringParameter(paramToRetrieve)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20params%20%3D%20%3CBR%20%2F%3E%3CBR%20%2F%3Edocument.URL.split(%22%3F%22)%5B1%5D.split(%22%26amp%3B%22)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20strParams%20%3D%20%22%22%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Efor%20(var%20i%20%3D%200%3B%20i%20%26lt%3B%20params.length%3B%20i%20%3D%20i%20%2B%201)%20%7B%20%3CBR%20%2F%3E%3CBR%20%2F%3Evar%20singleParam%20%3D%20params%5Bi%5D.split(%22%3D%22)%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3Eif%20(singleParam%5B0%5D%20%3D%3D%20paramToRetrieve)%20%3CBR%20%2F%3E%3CBR%20%2F%3Ereturn%20singleParam%5B1%5D%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%20%3CBR%20%2F%3E%3CBR%20%2F%3E%7D%3C%2FP%3E%0A%3CP%3E4.%20Next%20navigate%20to%20AppManifest%20%E2%80%93%26gt%3B%20Permissions.%20Select%20Scope%3DSite%20Collection%20and%20Permission%3DFull%20Control%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E5.%20Deploy%20the%20App.%20Once%20deployed%2C%20the%20default%20page%20should%20load%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20407px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F111472iABE0AE80C2C9D894%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E6.%20Click%20%E2%80%9C%20%3CEM%3E%20Create%20SPWeb%20on%20HostWeb%20%3C%2FEM%3E%20%E2%80%9D.%20Once%20you%20see%20the%20text%20%E2%80%9CSuccess%E2%80%9D%20above%20the%20button%2C%20go%20to%20the%20Host%20web%20where%20you%20will%20see%20the%20new%20sub-site%20%E2%80%9C%20%3CEM%3E%20RestSubWeb%20%3C%2FEM%3E%20%E2%80%9D%20created%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E7.%20Create%20a%20List%26nbsp%3B%20and%20List%20item%20using%20%E2%80%9CCreate%20SPList%20on%20HostWeb%E2%80%9D%20and%20%E2%80%9CCreate%20SPListIiem%E2%80%9D%20buttons.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere%E2%80%99s%20how%20the%20code%20works%20without%20using%20cross-domain%20JavaScript%20library.%20The%20AppContextSite%20object%20will%20create%20appropriate%20context%20based%20on%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F430686%22%20target%3D%22_blank%22%3E%40target%3C%2FA%3E%20parameter%20and%20call%20the%20appropriate%20REST%20endpoint%20to%20do%20POST%20to%20SharePoint.%20REST%20url%20syntax%20used%20here%20is%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%3F%40target%3D'http%3A%2F%2Fdevsite'%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhere%20%3CSTRONG%3E%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2F%20%3C%2FSTRONG%3E%20does%20not%20change%20but%20the%20parameters%20%3CSTRONG%3E%20web%3F%20%3C%2FSTRONG%3E%20is%20the%20based%20the%20object%20that%20you%E2%80%99re%20accessing%20and%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F430686%22%20target%3D%22_blank%22%3E%40target%3C%2FA%3E%20value%26nbsp%3B%20is%20the%20url%20of%20the%20site%20from%20where%20you%20are%20trying%20to%20access%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20example%20to%20access%20list%20on%20the%20host%20web%20use%26nbsp%3B%20appWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists%3F%40target%3D'%E2%80%9D%20%2BhostWebUrl%2B%20%E2%80%9C%E2%80%99%E2%80%9D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20create%20custom%20field%20for%20a%20list%20in%20host%20web%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EappWebUrl%2F_api%2FSP.AppContextSite(%40target)%2Fweb%2Flists(guid%20%E2%80%98list%20GUID%E2%80%99)%2FFields%3F%40target%3D'%E2%80%9D%20%2BhostWebUrl%2B%20%E2%80%9C%E2%80%99%E2%80%9D%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20simple%20demo%20helps%20writing%20robust%20Apps%20for%20SharePoint%20using%20REST%20API.%3C%2FP%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-509776%22%20slang%3D%22en-US%22%3E%3CP%3EFirst%20published%20on%20TECHNET%20on%20Apr%2015%2C%202013%20%26nbsp%3BThis%20blog%20post%20is%20a%20contribution%20from%20Mustaq%20Patel%2C%20an%20engineer%20with%20the%20SharePoint%20Developer%20Support%20team.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-509776%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Sep 01 2020 02:30 PM
Updated by: