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.
- Then Visual Studio will create a project for you.
- 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
- 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.
- When you and you will get a Client App Part with a element.xml
- 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
- 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.
- <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.
<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.
App Part with SharePoint