Post
Ask Question

SharePoint Hosted App For Reading All the List From the Host Web Using Cross-Domain Calls

In this article we will see a demonstration of a SharePoint hosted app for reading all the list items from the host web. Here I am showing you how we can use cross domain calls also. By following this article you can learn how to create a simple app for SharePoint using Visual Studio 2012. The app that you'll create includes controls and code for managing lists and list items, but most apps for SharePoint are far more powerful. For example, you can create an app for SharePoint that helps users track expenses and plan events. By using "Napa" Office 365 Development Tools, you can create your apps for SharePoint inside your browser instead of in Visual Studio. You can download your project and open it in Visual Studio for more advanced scenarios.

Prerequisites

You need the following components to complete this walkthrough:

  • In house SharePoint 2013 Environment or an Office 365 account
  • Visual Studio 2012 or the "Napa" Office 365 Development Tools app

In this procedure, you'll create a project for the app for SharePoint.

How to create an app for SharePoint

  1. Choose the Add New Project button.
  2. Choose the App for SharePoint tile, name the project Test app for SharePoint, and then choose the Create button.

The code editor opens and shows the default webpage, which already contains some sample code that you can run without doing anything else. In the app for SharePoint, add controls to the default home page for creating and deleting a generic SharePoint list and getting the current number of lists in the web of the app for SharePoint. You'll add code for the controls later.

To add controls to the home page:

  1. On the left side of the page under the Pages folder, choose the Default.aspx page if it isn't already selected.

    add-controls-to -the-home-page-in-SharePoint.png

Default.aspx page node

The Default.aspx webpage appears in the code editor.

Add code for getting all lists from the parent site

In this procedure, you'll add some JavaScript code so that users can create and delete lists in the app for SharePoint.

To add code for creating and deleting lists:

  1. Choose the Scripts folder, and then choose the App.js link.

    JS-folder-in-Application.jpg

The default JavaScript code file from the project template opens for editing. This file contains the code that's used in your app for SharePoint. You could add another .js file and add code to it instead of to the existing file. But, for this example, add it to the App.js file that's provided.

In the next step, you'll define the functions for the controls that you created in the previous procedure.

Code for Default.aspx

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"

    MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"

    Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

    Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>

    <!-- Add your CSS styles to the following file -->

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file here we are referring the app.js file -->

    <script type="text/javascript" src="../Scripts/App.js"></script>

</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>

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

    <div>

        <p id="message">

            <!-- The following content will be replaced with the user name when you run the app - see App.js -->

            initializing...

        </p>

    </div>

</asp:Content>

Code for App.JS

 

var web;

var hostweburl;

var appweburl

// This code runs when the DOM is ready. It ensures the SharePoint

// script file sp.js is loaded and then executes sharePointReady()

$(document).ready(function () {

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

});

// This function creates a context object which is needed to use the SharePoint object model

function sharePointReady() {

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

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

    var scriptbase = hostweburl + '/_layouts/15/';

    $.getScript(scriptbase + 'SP.Runtime.js', function () {

        $.getScript(scriptbase + 'SP.js', function () {

            $.getScript(scriptbase + 'SP.RequestExecutor.js', getAllList);

        }

);

    }

);

    getAllList();

}

function getQueryStringParameter(param) {

    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] == param) {

            return singleParam[1];

        }

    }

}

function getAllList() {

    var context;

    var factory;

    var appContextSite;

    var collList;

    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);

    context.set_webRequestExecutorFactory(factory);

    appContextSite = new SP.AppContextSite(context, hostweburl);

    this.web = appContextSite.get_web(); //Code to get the cross domain

    collList = this.web.get_lists();

    context.load(collList);

    context.executeQueryAsync(Function.createDelegate(this, successHandler), Function.createDelegate(this, errorHandler));

    function successHandler() {

        var listInfo = '';

        var listEnumerator = collList.getEnumerator();

        while (listEnumerator.moveNext()) {

            var oList = listEnumerator.get_current();

            listInfo += '<li>' + oList.get_title() + '</li>';

        }

        document.getElementById("message").innerHTML = 'Lists found:<ul>' + listInfo + '</ul>';

    }

    function errorHandler(sender, args) {

        document.getElementById("message").innerText = "Could not complete cross-domain call: " + args.get_message();

    }

}
 
The app in SharePoint

App-in-SharePoint.jpg


Similar Articles