SharePoint Pals
 | Sign In
Creating an App Part and Displaying an App inside the App Part in SharePoint 2013
by Sathish Nadarajan 29 May 2013
Author
SharePoint MVP
Visits   
Today  :   21     Total  :    36855

In the previous articles, we saw how to create a Provider Hosted App and launching the App from our SharePoint Site. Let us see, how to create an App Part and display our App inside the App Part. With our same old image, let me recollect the Apps once again.

clip_image002

In the above image, we have a zone call App Part. The App Part Zone is nothing but the Web Part Zone. Before start creating the AppPart, let us have a brief introduction about AppPart.

App Part:

It is similar to WebPart, but inside that, you will not be finding any ascx files or any of the custom layouts pages to achieve the functionality. It can be described as a container to hold the Apps and can be rendered on the SharePoint SitePages as well as Application Pages. The creation will be somewhat similar to the WebPart Creation.

Steps to an App Part:

1. Open the Visual Studio 2012 as Administrator

clip_image003

2. Click New Project.

3. Select the Template App for SharePoint 2013.

clip_image005

4. On the Creation of the Solution, Visual Studio will ask for the Site Collection against which we are going to deploy our app. And on the same screen, we need to choose the type of hosting which we are planning. In our case, it is going to be Provider Hosted Application.

clip_image007

5. On the selection of Provider Hosted, Click Next. The below screen will be asking the Certificate.

clip_image009

6. On the previous articles(http://www.sharepointpals.com/post/Converting-a-Basic-Provider-Hosted-Application-into-Claims-Aware-Provider-Hosted-Application-in-SharePoint-2013, http://www.sharepointpals.com/post/Step-by-Step-approach-to-create-a-Provider-Hosted-Application-in-SharePoint-2013. ) we had discussed about the creation of ProviderHosted Application. Hence, I am moving on to the next topic. i.e., directly to the creation of the App Part. It is assumed that, we created our provider Hosted Application successfully.

7. Now, the Solution has been created. The basic solution is as follows.

clip_image011

8. Our solution will comprise of 2 projects.

a. App Project

b. AppWeb Project

9. App Project – This is going to be deployed on the SharePoint.

10. AppWeb Project – This is going to be the .Net Web Application. This application can be hosted on any IIS.

11. Now go to the Default.aspx.cs and comment the default lines created by Visual Studio. These lines are meant to get the client context and accessing the SharePoint objects from our Application. Regarding this, I am planning to write a series of article on this. As of now, let us comment the client context related stuff. Let us assume that our application will not require any context from the SharePoint.

12. Now do a Deployment of our solution on the SharePoint Farm.

13. From visual studio, right click the solution and select DeploySolution.

clip_image013

14. Trust our App.

clip_image015

15. Once after the deployment, we will be able to see our App on the Site Content as well as the Recent on the left navigation.

clip_image017

16. On the click of the App, our .Net App will be launched on the context of SharePoint. Till then, it will be a recap of our previous articles.

17. Now, the actual requirement comes. On the SharePoint, Container Page, I need to render my App. For that, I need to create an App Part and pass the URL of of App as parameter to the App Part. Let us, how to do that.

18. The first, step, we are planning to create a site page. For that, click “Site Contents”.

clip_image019

19. Click on the “Site Pages”.

clip_image021

20. On Site pages, screen, click on the files.

clip_image022

21. Click on the “new Web Part Page”

clip_image024

22. Give a name for our Container Page.

clip_image026

23. Now, the page will get created. We are planning to place our App Part on the page.

24. Our page will look like this.

clip_image028

25. Now, coming back to the Visual Studio to Create our App Part.

26. Right click on the App Project and Select Add new Item.

clip_image030

27. Select the Client Web Part Item and give a name for that.

clip_image031

28. On the web part page, select the Existing page.

clip_image033

29. Select Finish.

30. New App Part will get created as shown below.

clip_image035

31. The App Part Comprises of an Elements.xml file.

32. The xml file will contains the following elements.

 <?xml version="1.0" encoding="utf-8"?>  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">   <ClientWebPart Name="MyAppPart" Title="MyAppPart Title" Description="MyAppPart Description" DefaultWidth="300" DefaultHeight="200">     <!-- Content element identifies the location of the page that will render inside the client web part   Properties are referenced on the query string using the pattern _propertyName_   Example: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->   <Content Type="html" Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}" />     <!-- Define properties in the Properties element.   Remember to put Property Name on the Src attribute of the Content element above. -->   <Properties>   </Properties>     </ClientWebPart>  </Elements>

33. On the Elements.xml, we need to change the Src Element to the landing page of our App.

34. Hence the Content Tag will looks like

<Content Type="html" Src="https://win8x64.dc07.loc/AppPart.SampleWeb/Pages/Default.aspx?{StandardTokens}" />

35. The {StandardTokens} Query string will be replaced by the required parameters from the SharePoint to Provider Hosted Application. It is mandatory to have the StandardTokens, by that only we will be able to communicate with to the SharePoint from our .Net Application.

36. We will discuss about the StandardTokens, elaborately later on this article. Now, let us build and deploy the solution once again. ON the successful installation of the solution, our App Part will get listed on the App Part Gallery, similar to that of the Web Part.

37. Let us go back to our SharePoint Site page and edit the page.

38. Click on the “Add Web Part”.

clip_image036

39. On the “App” tab, our new App part will get created.

clip_image038

40. After, Add, our App will get rendered inside the App Part.

clip_image040

Now coming back to the importance of StandardTokens Query String,

StandardTokens, will be replaced by the following QueryString attributes by SharePoint on the runtime.

SPHostUrl=https%3a%2f%2fc4968397007.dc07.loc%3a9470%2fsites2fMySite&

SPHostTitle=MySite&

SPAppWebUrl=%22%22&SPLanguage=en-S&

SPClientTag=0&

SPProductNumber=15.0.4420.1017&

SenderId=5A4787620

This SPHostUrl, will be used to take the clientContext of the SharePoint from our .Net Applications. That we will look into the next article.

Thus, we created our Provider Hosted Application and Created the App Part to load the App.

 

Download the source Code

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation