About Me

Having 12 years experience in Microsoft technologies.Since more than 7 years working in SharePoint technologies. Expert in providing consultation for SharePoint projects. Hands on with development and administration.

Wednesday, 19 November 2014

SharePoint 2013 Hosted App - Get data from SharePoint List using REST API

This is very interesting topic in SharePoint 2013 and we should tweak, because SharePoint Hosted App with with RSET API is bit tricky.
The challenge here is, as you know that, SharePoint and Apps are in different domains. How to build communication between these two domains is the key take away from this article.
Few articles says that using following method we can achieve

        url: siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        success: function (data) {
        error: function (data) {

But, we can't achieve
Hence, we will have to use cross domain script to build communication between SharePoint web and App web. Using following method
            url: dataUrl,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                    successHandler(data); // Returns JSON collection of the results
            error: function (data) {
Here is the detailed flow
1. Read data from list and display in the form of Carousal along with images kind of banner.
2. Provide option to set properties for SharePoint App
      1. Web Url (site/web)
       2. List Name (from where you want to get data)
       3. Refresh timer (how frequently we get data latest data from list)
       4. Feed Count (how many items to be displayed)
1. Create Announcement list - News
2. Create Picture library - Images
3. Develop SharePoint hosted app (assuming that, related app configuration settings have completed)
1. Create Announcement List
    1.a. Go to respective site collection or site and create Announcement list type called 'News'

No comments:

Post a Comment