The App Part in SharePoint 2013 and above is actually a Web Part version of an App. Like Web Parts in 2010 they reside in a small frame on the page. For the old Web Part this was some rendered ASPX, for an App Part this is an HTML-page in an IFrame.
In this post I want to explain, very shortly how to create an SharePoint-hosted App Part.
Build the App Part
I assume you have a developer site collection. If you haven’t yet, you can create one by selecting the Developer Site template under the Collaboration tab when creating a new site collection. This site collection has some build-in functionality that helps you deploy Apps from Visual Studio.
Ok, start off by creating a new SharePoint App in Visual Studio. The App will be the container for the App Part.
In this scenario we are building a SharePoint-hosted App (Part) which means we can only use client-side code. If you want to know more about the different hosting options, please read this overview on MSDN.
Visual Studio creates an App with an hello-worldish script in the. This script retrieves the display name of the current user and puts it in the
on the default App page.
You can run this app now and see that Visual Studio deploys the app to your developer site and starts debugging it.
We now add a Client Web Part item to the project. Despite of being called a Client Web Part, this will be the App Part.
We want the wizard to create a new page for the App Part.
This creates a Client Web Part and a page.
We can change the properties of the App Part, like the title, by modifying the.
Now let’s create the same hello-worldish script on this page. Therefore we need the following script reference in the header.
And the following markup in the body:
Run the App again, go to the developer site and add the App Part to the page.
Finally it would look something like this.
Subscribe for daily updates!