Step by step guide to create Provider hosted Add-in : SharePoint online : Office 365 : Azure

In this article we will see how to create SharePoint provider hosted Add-in

Step 1- Open Visual Studio. Create new project of type ‘SharePoint Add-in’ as shown below.

Step 2- After entering Office 365 credentials, select SharePoint online version as shown below.

Step 3- Select ASP.NET MVC web application as shown below.

Step 4- Select Azure Access Control Service for authentication as shown below.

Step 5- Now your solution with SharePoint Add-in and ASP.NET application is created as shown below.

Step 6- Publish ASP.NET web application to Azure.

Step 7- Click on Start button under Publish as shown below.

Step 8- Select App Service, Create New.

Step 9- If you are not already logged in to your Azure account then you need to login to your azure account. Now all fields as show below will be auto populated. Click of Create button. It will publish your ASP.NET application in azure.

Step 10- Once your application is published to azure it will open it will open new web app in browser with error as shown below. Now copy the url this web app for further configuration. We will use it to register add-in.

Register the Add-in in SharePoint Online

Step 11- Open add-in registration page for your SharePoint online site and generate client id and client secret as shown below. Provide all other details as shown below. In Redirect url, add https in place of http for your azure web app.

Step 12- Copy all the details of app identifier to notepad for future use.

Setup Azure Web Site’s App Settings

Step 13- Go to Application settings of your Azure web app which we created earlier. Click on ‘Add new setting’ under Application settings as show below and add settings for ClientId and ClientSecret.

Step 14- Now you have settings in your azure web app for client id and client secret. Click on Save button to save it.

Step 15- Edit AppManifest.xml file in SharePoint add-in and change start page to url of your azure web app (with https) and client id to client id we generated earlier.

Step 16- Now publish you add-in to SharePoint.

Step 17- You will see yellow alert message as shown below. Click on Edit button.

Step 18- Add client id and client secret values in it and click Finish.

Step 19- Package Add-In by clicking on Package the add-in button. In URL change http to https. Click on Finish button to create package.

Step 20-  Package is created on your local system.

Step 21- Now upload package to your app catalog.

Step 22- Go to site contents to see your provider host add-in

Step 23- Click on your add-in, it will go to the app redirect page and it will be navigated to the remote Azure Web app.

As you can see in the Browser address bar, the redirection has been completed and Azure Web app has come up in the Browser. Here, we can see the current logged in user name, which was fetched, using controller and was displayed in the view of the MVC project. We can add more logic to MVC project, as per the requirement. 

Deploy SharePoint Add-In as App Part

In previous post ‘SharePoint hosted Add-In : Read list data : JSOM’, we saw how to create SharePoint hosted Add-In to read data from SharePoint. In this post, we will see how to deploy SharePoint Add-In as App Part. So that, this Add-In can be added to any page in SharePoint.

Step 1- Add new Client Web Part to your Add -In project.

Step 2- Create a new page or you can also use existing Default.aspx page of Add-In for client web part content.

Step 3- Create a blog subsite ‘Vendor’. In App part, we will read data from this blog posts.

Step 4- Open Client web part Element.xml file and update Title and Description.

Step 5- Deploy your Add-In

Step 6- Add your App Part from Apps category as shown below.

Step 7- Now you can see your Add-In as App part in your SharePoint sites page.

Code of App Part

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

<%@ 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" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>

<head>

    <title></title>

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

    <script type="text/javascript">

        // Set the style of the client web part page to be consistent with the host web.

        (function () {

            'use strict';

            var hostUrl = '';

            var link = document.createElement('link');

            link.setAttribute('rel', 'stylesheet');

            if (document.URL.indexOf('?') != -1) {

                var params = document.URL.split('?')[1].split('&');

                for (var i = 0; i < params.length; i++) {

                    var p = decodeURIComponent(params[i]);

                    if (/^SPHostUrl=/i.test(p)) {

                        hostUrl = p.split('=')[1];

                        link.setAttribute('href', hostUrl + '/_layouts/15/defaultcss.ashx');

                        break;

                    }

                }

            }

            if (hostUrl == '') {

                link.setAttribute('href', '/_layouts/15/1033/styles/themable/corev15.css');

            }

            document.head.appendChild(link);

        })();

    </script>

   

    <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('Posts')/items?@target='" + hostweburl + "/Vendor'&$top=3",

                    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 blogsHTML = "";

            var results = jsonObject.d.results;

            for (var i = 0; i < results.length; i++) {

                blogsHTML = blogsHTML + "<div><a href=\"" + hostweburl + "/Vendor/Lists/Posts/Post.aspx?ID=" + results[i].ID + "\" target=\"_blank\">" + results[i].Title + "</a></div><br>";

            }

            $('#myDiv').append(blogsHTML);

        }

        // Function to handle the error event.

        // Prints the error message to the page.

        function errorHandler(data, errorCode, errorMessage) {

            document.getElementById("myDiv").innerText =

                "Could not complete cross-domain call: " + errorMessage;

        }

        // Function to retrieve a query string value.       

        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> Vendors</strong></div>

        <div id="myDiv"></div>

       

    </div>

</body>

</html>