Skip to main content

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

I think you already know about 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 slightly differences in developing client app part in SharePoint Hosted Model.   
This is Step by Step Guide to Create a Client App part.
  • Create a Visual Studio Project by specifying SharePoint Hosted option.
    image
  • Then Visual Studio will create a project for you.
    image
( If you looked closely you can find out it is referring jQuery 1.6.2 version that is quite old. So if you want you can right click the project and go to NuGet Manager and install new version. )
  • Now we are going to add a Client App part. Client App Apart is concept which allows to run SharePoint pages inside the iFrame. Therefore you can theoretically display any page inside the client app part.
  • As a guide I will show two types of Client App Parts.
    • Simple App Part
    • App Part with SharePoint
    I separated these two 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 same  for both types. You need to right click the project and add a Client Web part with a desired name.
image
  • When you and you will get a Client App Part with a element.xml
image
  • Element.xml is used for specifying rendering width, height,  what page to point and define client app part properties (if any)
  • Now we need a page to point in the client app part. Thus I'm creating folder under pages called AppPart (This is just for easiness you can put the page inside the page folder as well) and creating a page called Page.aspx
image
  • 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 simply ribbon and all. since we are placing client app part inside a page we do not want ribbon and staffs in it. Thus delete the entire content in the page.
  •   and 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 to page to run as a ifame. In the Url also DisplayType=iframe allows to render like a iframe. You do not need to put both of them I just illustrate it for reference.
  • Now you are ready with the page. you need to give the page path to client app part. thus you need to open the Element.xml in the client app and put the url there.

image

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

image

App Part with SharePoint



  • If you are going to use SharePoint Client Context in side your Client app page refer 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>



Labels:

Comments

Post a Comment

Popular posts from this blog

How to Link Two List and Create a combine view in the SharePoint 2010

In this way you can join multiple list together and can create a combine view. for an example assume that you are managing a list for some events. And also you are having a participants in separate list. Thus you want to join the two list and create a composite view. SharePoint 2010 allows you to create this kind of view using  Linked Data Source. in this approach you can create your own custom list in the SharePoint. How to Create a Linked Data source Go to SharePoint designer and  go to the link called data sources. And Click the Linked Data Source button in the ribbon. Then SharePoint designer will prompt following kind of a dialog. In there add two list, that you wan to linked together. I'm adding airline schedule and booking list. those are the two list that i wan to merge. then click next. And it will guide you another screen. it will ask you to select either Merge Merge use to combine list which are having same columns definition. for and example we can s...
32 comments
Read more

How to Improve Workflow Performance in SharePoint Server 2010

SharePoint workflows are getting  slow for several reasons. in my environment I'm having a problem with following performance issues, therefore in my environment i got following problems. When a item added to the library it takes some times to initiate the workflow. Workflow mail generating is not very fast sometimes. Workflows takes more time to process “Due to heavy load, the latest workflow operation has been queued. It will attempt to resume at a later time” is coming sometimes. I had a custom workflow approval web part and it is taking more than 30 seconds to proceed. Work Done I had a custom workflow approval web part and it is taking more than 30 seconds to proceed. here in my custom web part there is the function which is programmatically updating the workflow. SPWorkflowTask.AlterTask(item, data, false) the last parameter mentioning whether it is synchronous asynchronous. if  is it true it it will wait until workflow schedule accept the workflow task. ...
5 comments
Read more

Use Microsoft Sway Integrated with SharePoint Online /SharePoint 2013/2016

Microsoft Sway Microsoft Sway is a great online Presentation and Online Creativity Stack. Why we need Sway Assume that you are about to so a cooperate presentation for your colleagues. what are the options you have Firstly,You can create a PowerPoint presentation which you need a PowerPoint to run and if you want to share you need end users have PowerPoint client for view the deck. Secondly, You can create a simple web pages and share it with users where it can be access from all devices if it is responsive. Microsoft Sway address the second point. How to Access the Sway There are many ways that you can do this. Since I'm trying  use Sway with SharePoint Online; I will describe using SharePoint Online. First Login to the SharePoint Online Office 365 Login | Microsoft Office There You can go to all Apps   Then you can find the Sway as a App in the Menu   Click on the Sway and go the Sway web site. Here you can find standard available temples or you can start from the stre...
Post a Comment
Read more