How to create an App Part or Build-In Part in SharePoint

 

 

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 App.js. This script retrieves the display name of the current user and puts it in the

on the default App page Default.aspx.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
 getUserName();
});
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
 context.load(user);
 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 to your developer site and starts debugging it.




Did you know that you can debug your JavaScript straight in Visual Studio without the need of browser developer tools

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 Elements.xml.

When you open the App Part ASPX page you will notice that it looks different compared to the Default.aspx. Where the Default.aspx is using the SharePoint master page, the App Part Page is an empty page with no master page whatsoever. This is because the App Part Page will be shown in an IFrame, so we need an empty page. The only code Visual Studio generates out of the box are some JavaScript references and a script that will reference the right CSS.




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:

1
2
3
4
5
6
<div>
 <p id="message">
  
  initializing...
 p>

div>

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!




Be Connected…

Satyendra

 

THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

, ,

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *