How to create an App Part/Add-in Part in SharePoint 2013

Add-in Part/App Part

The App Part in SharePoint 2013 is actually a Web Part version of an App. Like Web Parts in 2010 they reside in a small frame on the page.With add-in parts/app parts, you can show your add-in/app user experience right in the SharePoint website pages.

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.

An add-in part is implemented with the ClientWebPart class, and like all Web Parts it is a available in the Web Part gallery after a user installs the SharePoint Add-in that includes it. Your users can further customize the add-in part using the properties that you provide.

Build the App Part

In this scenario we are building a SharePoint-hosted App (Part) which means we can only use client-side code.
start by creating a new SharePoint App in Visual Studio.[Select the template App for SharePoint 2013].The App will be the container for the App Part.

Select SharePoint-hosted app.

Visual Studio creates an App with an hello-worldish script in the App.js. This script retrieves the display name of the current user[logged-in user] and puts it in the <p id=”message”> control on the default App page Default.aspx.

‘use strict’;

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();// This code runs when a context object is created
//which is needed to use the SharePoint object model

$(document).ready(function () {
});// This function prepares, loads, and then executes a SharePoint query to get the current users

function getUserName() {
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}// This function is executed if the above call is successful
// It replaces the contents of the ‘message’ element with the user name

function onGetUserNameSuccess()
$(‘#message’).text(‘Hello ‘ + user.get_title());
}// This function is executed if the above call fails

function onGetUserNameFail(sender, args) {
alert(‘Failed to get user name. Error:’ + args.get_message());

You can run this app now and see that Visual Studio deploys the app/add-in to your developer site and starts debugging it.

Now, we are going to create the actual app-part/add-in part. On the SharePoint Container Page, we need to render the App/add-in that we created. For that, we need to create an App Part [Client Web Part] and pass the URL of of App as parameter to the App Part.

Right click on the App Project that we created[HelloWorldApp] in Visual Studio and Select Add new Item.

Select the Client Web Part Item and give it a name.

We want the wizard to create a new page for the App Part.
Click Finish and this creates the Client Web part/App Part [App Part Project]

The App Part Comprises of an Elements.xml file.On the Elements.xml, we need to change the Src Element to the landing page of our App.
Hence the Content Tag will looks like
<Content Type=”html” Src=”https://win8x64.dc07.loc/HelloWorldApp/Pages/Default.aspx?{StandardTokens}” />

Run the App again, go to the developer site and add the App Part to the page.