1

Is it a good idea to use a SharePoint List as a database for a SharePoint Add-In?

If so, is it possible for an Add-In in the "Add-In Web" to use a SharePoint List outside of its Add-In Web?

Like say, I have Developer Site containing ListX and Add-InX. Can Add-InX use ListX as a database? If so, how?

1

Yes its always a good idea to use SharePoint list from host web. This way it will ensure that whenever you upgrade the addin, your data wouldnt be lost.

Its possible to access to host web data from add in web using SP.RequestExecutor.js. To do it, you can use below code. Paste it inside the aspx page of your add-in. In my case, its the default.aspx page.

<html>
    <head>
        <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.js"></script>

        <%-- Access ListX --%>
        <script type="text/javascript">
            var hostweburl;
            var appweburl;
            // Load the required SharePoint libraries
            $(document).ready(function () {
                //Get the URI decoded URLs.
                hostweburl =
                    decodeURIComponent(
                        getQueryStringParameter("SPHostUrl")
                );
                appweburl =
                    decodeURIComponent(
                        getQueryStringParameter("SPAppWebUrl")
                );
                // resources are in URLs in the form:
                // web_url/_layouts/15/resource
                var scriptbase = hostweburl + "/_layouts/15/";
                // Load the js files and continue to the successHandler
                $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest);
            });
            // Function to prepare and issue the request to get
            //  SharePoint data
            function execCrossDomainRequest() {
                // executor: The RequestExecutor object
                // Initialize the RequestExecutor with the app web URL.
                var executor = new SP.RequestExecutor(appweburl);
                // Issue the call against the app web.
                // To get the title using REST we can hit the endpoint:
                //      appweburl/_api/web/lists/getbytitle('listname')/items
                // The response formats the data in the JSON format.
                // The functions successHandler and errorHandler attend the
                //      sucess and error events respectively.
                executor.executeAsync(
                    {
                        url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('ListX')/items?@target='" + hostweburl + "/'",
                        method: "GET",
                        headers: { "Accept": "application/json; odata=verbose" },
                        success: successHandler,
                        error: errorHandler
                    }
                );
            }
            // Function to handle the success event.
            // Prints the data to the page.
            function successHandler(data) {
                var jsonObject = JSON.parse(data.body);
                var listHTML = "";
                var results = jsonObject.d.results;
                for (var i = 0; i < results.length; i++) {
                    listHTML = listHTML + "<div><a href=\"" + hostweburl + "/ListsX/Dispform.aspx?ID=" + results[i].ID + "\" target=\"_blank\">" + results[i].Title + "</a></div><br>";
                }
                $('#divListX').append(listHTML);
            }
            // Function to handle the error event.
            // Prints the error message to the page.
            function errorHandler(data, errorCode, errorMessage) {
                document.getElementById("divListX").innerText =
                    "Something went wrong: " + errorMessage;
            }
            // Function to retrieve a query string value.
            // For production purposes you may want to use
            //  a library to handle the query string.
            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];
                }
            }
        </script>
        </head>
    <body>
    <div>
        <div><strong>ListX items</strong></div>
        <div id="divListX"></div>       
    </div>
</body>
</html>

Once you have done this, ensure that your Add-in web has permission to access host web. In the appmanifest.xml, ensure that alteast site collection read is there, else you will get 403 forbidden error. If you want to post data, you need write permission. You can get upto full control permission as well if you need.

enter image description here

After that, simply deploy the app and trust it. It will redirect you the add-in home page and will display the host web data.

Additionally, if you want to show on host web page, click on add App part and add it on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.