Working With Sharepoint 2013 Apps Development

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.

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.

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 :-

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.

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({
"/_api/web/lists/getByTitle('Employee')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: postitem,
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function () {
alert(“An Item Added SuccessFully”);
},
}
});
 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.

 __metadata 'type' property with the list item entity type of the list.
Examples DELETE Method:-
Delete an item from list Using DELETE Method.
$.ajax(
{
"/_api/web/lists/getByTitle('Employee')/items('1234')",
type: "DELETE",
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*"
},
success: function (data) {
alert(‘Item Deleted successfully’);
},
}
}
);
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(
{
"/_api/web/lists/getByTitle('Employee')/items('1234')",
type: "POST",
contentType: "application/json;odata=verbose",
data: Updateitem,
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"IF-MATCH": "*"
},
success: function () {
alert(‘Item Upodated Successfully’);
},
}
}
I Hope this will help you a lot to develop a New SharepointHostedApp Using REST API in SharePoint
2013/Office 365.

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)

Working With Sharepoint 2013 Apps Development

Recommended

More Related Content

What's hot (20)

Similar to Working With Sharepoint 2013 Apps Development (20)

Recently uploaded (20)

Working With Sharepoint 2013 Apps Development