Click here to Skip to main content
12,763,477 members (30,198 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

30.2K views
4 bookmarked
Posted 8 Jan 2013

Step by Step Guide to Create a Client App Part in SharePoint Hosted Development Environment

, 9 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
This is a step by step guide on how 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). There are similarities as well as differences. Thus there are slight differences in developing client app part in SharePoint Hosted Model.   

This is a 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 to 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 a 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 do so, you will get a Client App Part with an 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 to make it easy for you to 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 are 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 the 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" %>
  • <WebPartPages:AllowFraming runat="server" /> this tag allows the page to run as an iframe. In the Url also DisplayType=iframe allows to render like an 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

  • 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 inside your Client app page, refer to the following JavaScript as well. (mQuery,sp.ui.dialog,callout is commented because it may not be needed 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" %>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Melick
Sri Lanka Sri Lanka
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionWeb Part or App Part Pin
Brady Kelly9-Dec-14 0:58
memberBrady Kelly9-Dec-14 0:58 
QuestionQuestion - Client app part page asking for authentication on every page request Pin
Kausar Parveen23-Apr-14 12:23
memberKausar Parveen23-Apr-14 12:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 9 Jan 2013
Article Copyright 2013 by Melick
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid