Share via

Step by Step guide to create a Client App Part in SharePoint Hosted Development Environment.

  • Article

You may already know hosted approaches in SharePoint 2013. There are three types of hosted approaches (SharePoint-Hosted, Provider-Hosted, Auto-Hosted).  Though there are similarities as well as differences. Thus there are slight differences in developing client app part in SharePoint Hosted Model.   

This is step by step guide to create a client app part.

(If you look closely you can find out it is referring jQuery 1.6.2 version but that is quite old. So if you want you cright-clickick the project and go to NuGet Manager and install new version.)

  • Now we are going to add a Client App part. Client app part is a concept which allows SharePoint pages to run inside the iFrame. Therefore you can theoretically display any page inside the client app part.

  • There are two types of Client App Parts:

    • Simple App Part
    • App Part with SharePoint

    These two are separate because of JavaScript usage. Most of the online sources talk about the simple app part but when you try to use it with “SP.ClientContext” it is giving errors.

Simple App Part 

  • Adding a client web part is the same for both types. You need to right-click the project and add a Client Web Part with a desired name.

http://lh3.ggpht.com/-XgCVPjGGuxE/UOvjZLGzTfI/AAAAAAAABP0/D_u32g50XHI/image_thumb%25255B1%25255D.png?imgmax=800

  • When you do you will get a Client App Part with a Elements.xml

http://lh6.ggpht.com/-Wd_O8Zf3zE0/UOvjcT5dsXI/AAAAAAAABQE/KKqrPfwICzM/image_thumb%25255B3%25255D.png?imgmax=800

  • Elements.xml is used for specifying rendering width, height, what page to point to and define client app part properties (if any)
  • Now we need a page to point in the client app part. Create a folder under pages called AppPart (This is just for easiness. You can put the page inside the page folder as well) and create a page called Page.aspx

http://lh3.ggpht.com/-PTsU_MRosZc/UOvjgf4OYjI/AAAAAAAABQU/3nKJsjMmCkA/image_thumb%25255B5%25255D.png?imgmax=800

  • The page comes with two content place holders which is pointed to SharePoint master page. If you use this one your app part pages will have SharePoint master page with the ribbon and all. Since we are placing client app part inside a page we do not want ribbon and stuff in it. Delete the entire content n othe page.
  •   Put following code to the page:
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 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 following tells SharePoint to allow this page to be hosted in an IFrame -->
<WebPartPages:AllowFraming runat="server" />
 
<html>
<head></head>
<body >
    <div>Simple Client App Part</div>
</body>
</html>
  • <WebPartPages:AllowFraming runat="server" /> this tag allows the page to run as an iFrame. In the URL also DisplayType=iframe allows it to render like an iFrame. You do not need both of them, it's just illustrated for reference.
  • Now you are ready with the page. You need to give the page path to the client app part. Thus you need to open the Element.xml in the client app and put the URL there.

http://lh5.ggpht.com/-6jm7QH564J4/UOvy_HxRBpI/AAAAAAAABRA/uldDCqn3Fg4/image_thumb%25255B1%25255D.png?imgmax=800

    <Content Type="html" Src="~appWebUrl/Pages/AppPart/Simple.aspx?DisplayType=iframe" />

  • When adding the URL you need to use ~appweburl as a prefix to resolve the web URL. 
  • Now you can deploy app to the SharePoint and see whether it is working.

http://lh4.ggpht.com/-kse380UKeRQ/UOvzDWKDTNI/AAAAAAAABRQ/QnFOPKxeYbg/image_thumb%25255B4%25255D.png?imgmax=800

App Part with SharePoint

  • If you are going to use SharePoint Client Context inside your client app page refer to the following JavaScripts as well. (mQuery,sp.ui.dialog,callout is commented because it may not need for you all the time)
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 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 following tells SharePoint to allow this page to be hosted in an IFrame -->
<WebPartPages:AllowFraming runat="server" />

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

    <link href="../../Content/App.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/init.js"></script>
     <%--<script type="text/javascript" src="/_layouts/15/mQuery.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.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" src="/_layouts/15/callout.js"></script>--%>

    <script src="../../Scripts/App.js"></script> <%--/Yon can write your js here/--%>
    

    <script type="text/javascript">
        $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                // sharePointReady(); Any Code
                
            });
        });
    </script>
</head>

<body>
 
</body>
</html>