Working With Sharepoint 2013 Apps Development
2 likes1,392 views
This document discusses SharePoint app development using the REST API and JavaScript. It begins by explaining the purpose of the SharePoint app model and the types of apps: SharePoint-hosted, Provider-hosted, and Auto-hosted. It then covers key REST API concepts like OData and endpoints. Examples are provided for performing CRUD operations on a SharePoint list using the REST API and jQuery, including getting, adding, updating, and deleting list items. Thorough explanations are given for each method. The document aims to provide developers with the knowledge needed to create SharePoint-hosted apps that interact with data via the REST API.
![Examples GET Method:-
Get List Items Form SharePoint List Using REST API with Ajax.
$.ajax(
{
url: _spPageContextInfo.webServerRelativeUrl +
"/_api/web/lists/getByTitle('Employee')/items/",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
// so once Service called Successfully it will return data in json format.
If(data.d.results.length>0)
{
//Foreach loop
$.each(data.d.results, function (i, item) {
“<table><tr><td>”+ data.d.results[i].Title +”</td></tr></table>”
});
}
},
error: function (err) {
console.log(JSON.stringify(err));
}
});
Example POST Method:-
Add an Item in SharePoint List Using POST Method.
var postitem = {
"__metadata": {
"type": SP.Data.EmployeeListItem
},
"Title": “Pankaj”,
"EMPID”:”51446959”,
"Comments": “Test Commnets”,
};
$.ajax({
url: _spPageContextInfo.webServerRelativeUrl +
"/_api/web/lists/getByTitle('Employee')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: postitem,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function () {
alert(“An Item Added SuccessFully”);
},
error: function (err) {
console.log(JSON.stringify(err));
}
});
The important thing to understand is that you must send the form digest along with any POST request
or nothing will get updated
form digest is stored as the value of a well known element on the page: the element with id
‘__REQUESTDIGEST’
It must be passed as the value of the X-RequestDigest header, It must be passed as the value of the X-
RequestDigest header.](https://image.slidesharecdn.com/shareppointappdev-140522111420-phpapp02/85/Working-With-Sharepoint-2013-Apps-Development-5-320.jpg)
Working With Sharepoint 2013 Apps Development
- 1. SharePoint Development, Training & Consulting By Pankaj Srivastava Skills: SharePoint 2013, Apps Development, .Net, C#, JQuery, JSON, Javascript Working With SharePoint 2013 App Model Using REST API-JQuery, JSON, AJAX Author: - Pankaj Kumar Srivastava Contact:-pankajshrivastav6@gmail.com Blog: - http://pshrivastavadotnet.blogspot.in/ Before we dive deep into SharePoint App Model first we have to understand the basic concept behind App Model. Why Microsoft born a new baby and named it “App Model”?? Don’t be panic I am sure once you read my whitepaper you guys will feel comfort to create a SharePoint Hosted App. So let’s begins the journey with me:- Why Apps?? App for SharePoint is a stand-alone, self-contained piece of functionality that extends the features and capabilities of a SharePoint site. Apps are targeted, lightweight, and easy-to-use, and do a great job at solving a user need. Apps will be executed outside the SharePoint Server, and in the Client machine or in the Cloud. This makes Apps makes easier installation& cleanup. In short it is just like ready to use plug-in in SharePoint. Types of Apps in SharePoint 2013:- 1. SharePoint Hosted: SharePoint-hosted apps contain only declarative content, such as HTML and JavaScript, and don’t have any server-side code that is packaged with them. SharePoint-hosted apps interact with SharePoint via the JavaScript object model or Representational State Transfer (REST) end-points and are client-side based. The design and interaction of these types of apps are similar to client-side design patterns used with sandboxed solutions. 2. Provider Hosted: A Provider-hosted app is one that has server-side components. These components are usually contained within an ASP.NET application and you have to provide a separate environment to host them. These server-side pieces can be developed in any technology as long as you can leverage OAuth and make REST calls. 3. Auto-Hosted: This new type of app only relates to Office 365 and SharePoint Online. It has server-side components similar to Provider-Hosted Apps. What makes it unique is that it not only provisions the app in SharePoint, but also automatically provisions components into Azure.
- 2. Where my apps deployed? Two Birds come into picture if you talk about deployment App Web: - The special website to which the app is deployed is called an app web, the app for SharePoint components and content, such as lists, content types, workflows, and pages, are deployed to a different website in a special isolated domain. Host Web:-The website to which the app is installed is called the host web http://app-bdf2016ea7dacb.abcapps.com/sites/TestPankaj/EmployeeManagment https:// App_Prefix App_ID . App_Base_Domain / Domain_Relative_URL_of_Host_Web / App_Na me Lets Understand How REST actually work and What is ODATA? ODATA:-The Open Data Protocol (OData) is a Web protocol for querying and updating data How to create or consume the Open Data Protocol? OData defines a standard syntax which defines how resource representations (entities) are queried via a Restful URI: ex {http://site url/_api/web/lists} ODATA Restful Service:- SharePoint 2013 Rest API service Access Point basic understanding:- Site :-http: //server/site/_api/site Web:-http: //server/site/_api/web User Profile:-http: // server/site/_api/SP.UserProfiles.PeopleManager Search:-http: // server/site/_api/search Publishing: - http:// server/site/_api/publishing So if once you are familiar with REST API SharePoint 2013 you would like to do more with REST so let’s dive deep.
- 3. ODATA - SharePoint 2013 REST API Query Operators $select - Specifies which fields are included in the returned data. EX:-http://abc-sharepoint.com/Test/ _api/web/lists/getByTitle ('Employee')/items? $select=Title, EmpID $filter - Specifies which members of a collection, such as the items in a list, are returned. Ex.:-http://abc-sharepoint.com/Test /_api/web/lists/getByTitle('Employee')/items?$filter=EMPID eq '123‘ $expand: - Specifies which projected fields from a joined list are returned. $top- Returns only the first n items of a collection or list. http://abc-sharepoint.com/Test _api/web/lists/getByTitle( Employee)/items?$select=Title&$filter=Title eq ‘Pankaj'&$top=2 $skip: - Skips the first n items of a collection or list and returns the rest. _api/web/lists/getbytitle('Employee')/items?$skip=100&$top=100 $orderby: - Specifies the field that’s used to sort the data before it’s returned http://abc-sharepoint.com/Test _api/web/lists/getByTitle( Employee)/items? orderby =EMPID Logical Query with ODATA SharePoint 2013 REST API:- ODATA SharePoint 2013 REST API String Functions :-
- 4. ODATA SharePoint 2013 REST API Date/Math/Type Functions:- CRUD - Creating, Reading, Updating and Deleting Entries SharePoint 2013 Using REST API Let’s understand some basic method which is used while CRUD Operation: GET: Get a collection of entries (read) POST: Create a new entry from an entry document (insert). MERGE: Update an existing entry with an entry document. DELETE: Remove an entry. So I have one list in my App I named it Employee and it will be located at AppWeb after deployment as I discuss above. Important:- The _spPageContextInfo JavaScript object has been around since SharePoint 2007. It provides really easy way to start building the correct _api URI, The point of note here is that the odata=verbose appended to the end is required in order for the service call to succeed.
- 5. Examples GET Method:- Get List Items Form SharePoint List Using REST API with Ajax. $.ajax( { url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Employee')/items/", type: "GET", headers: { "accept": "application/json;odata=verbose", }, success: function (data) { // so once Service called Successfully it will return data in json format. If(data.d.results.length>0) { //Foreach loop $.each(data.d.results, function (i, item) { “<table><tr><td>”+ data.d.results[i].Title +”</td></tr></table>” }); } }, error: function (err) { console.log(JSON.stringify(err)); } }); Example POST Method:- Add an Item in SharePoint List Using POST Method. var postitem = { "__metadata": { "type": SP.Data.EmployeeListItem }, "Title": “Pankaj”, "EMPID”:”51446959”, "Comments": “Test Commnets”, }; $.ajax({ url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Employee')/items", type: "POST", contentType: "application/json;odata=verbose", data: postitem, headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val() }, success: function () { alert(“An Item Added SuccessFully”); }, error: function (err) { console.log(JSON.stringify(err)); } }); The important thing to understand is that you must send the form digest along with any POST request or nothing will get updated form digest is stored as the value of a well known element on the page: the element with id ‘__REQUESTDIGEST’ It must be passed as the value of the X-RequestDigest header, It must be passed as the value of the X- RequestDigest header.
- 6. __metadata 'type' property with the list item entity type of the list. Examples DELETE Method:- Delete an item from list Using DELETE Method. $.ajax( { url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Employee')/items('1234')", type: "DELETE", headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val(), "IF-MATCH": "*" }, success: function (data) { alert(‘Item Deleted successfully’); }, error: function (err) { console.log(JSON.stringify(err)); } } ); Examples MERGE Method:- Update an existing item from list Using MERGE Method. var Updateitem = { "__metadata": { "type": SP.Data.EmployeeListItem }, "Title": “Pankaj Kumar Srivastav”, "EMPID”:”51446959”, "Comments": “ My Updated Test Commnets”, }; $.ajax( { url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Employee')/items('1234')", type: "POST", contentType: "application/json;odata=verbose", data: Updateitem, headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val(), "X-HTTP-Method": "MERGE", "IF-MATCH": "*" }, success: function () { alert(‘Item Upodated Successfully’); }, error: function (err) { console.log(JSON.stringify(err)); } } I Hope this will help you a lot to develop a New SharepointHostedApp Using REST API in SharePoint 2013/Office 365.
- 7. You have to be good knowledge in Javascript, Jquery, and JSON before Start Development on SharePoint Hosted App Model or AppPart. If you have any Doubt let me drop a mail: - pankajshrivastav6@gmail.com (Pankaj Kumar Srivastava)