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. 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 <p id=”message”> 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 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.
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript"> 'use strict'; // Set the style of the client web part page to be consistent with the host web. (function () { var hostUrl = ''; if (document.URL.indexOf('?') != -1) { var params = document.URL.split('?')[1].split('&'); for (var i = 0; i < params.length; i++) { var p = decodeURIComponent(params[i]); if (/^SPHostUrl=/i.test(p)) { hostUrl = p.split('=')[1]; document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />'); break; } } } if (hostUrl == '') { document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />'); } })(); </script>
Now let’s create the same hello-worldish script on this page. Therefor we need the following script reference in the header:
<script type="text/javascript" src="../Scripts/App.js"></script>
And the following markup in the body:
<div> <p id="message"> <!-- The following content will be replaced with the user name when you run the app - see App.js --> 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.
Happy coding!
Very nice post. If possible, please let me know if we could add the app part to the aspx page using powershell. Thanks in advance for your help!
Great post, thanks! I am very new to SharePoint 2013 development, and this was just what I was looking for.
Thanks for this post, it is clear and concise. You should be working for Microsoft!
Great post, really helpful. Thanx.
Thanks, very nice post… i troubling to add same app on office 365 public site app part please let me know how we can do ?
Hi,
thanks for sharing this. Do the same cross-domain restrictions apply as they do for a “normal” SP2013 app or does the app part run in the host web domain?
Thanks in advance!
G’day There, great post…I am wondering if someone could shed some light on how I would go about accessing items in a list that is deployed as part of my App (so in the app web) from within the client web part which obviously get installed on the Host Web?
The App always runs on the App web. The App Part only shows a page with an IFrame.
Hi Jeffrey, Nice blog, but I have a question. You describe how to add an app-part to the sharepoint app. But you still have the full page app in the solution with it. Is it possible to “remove” the full page app and keep only the app-part
yes, you can remove the default.aspx file and the app-part will still function.
Excellent!! Very Helpful.
This is so complicated… sometime I’d like someone to explain me why do people bother using Sharepoint when almost any other technology brings you the same result (if not better) in an insanely shorter amount of time. Why not just use the REST API and use a web framework or regular CMS for everything else ?? I just don’t get it.
You know why SharePoint is so successful? Not because the local super has an HTML website running on it. No, because enterprises all over the wold have adopted it. On the user side you will see that a wide variety of people can work with the platform, from typical MS Office customers to hard core dev’s and everything in between. On the technical side it offers such a complete package that there are simply no words to describe what it actually is or does. Whilst I can go on and on I will just give you a small summary: Very good tooling, workflows, document management, solid permission management down to every level (not just a layer), very wide variety on API’s, using latest technology, etc. etc. etc.
And yeah, it’s complex!
Agree with you Jeffrey. For the developer it may seem far easier to do things a different way but in SharePoint, the barest user can work with data and run their own reports. Put together workflows and edit their own content. In my company with close to 2,000 users and only two support staff, this is a critical amount of autonomy. Even with it’s out of the box limitations it’s still a robust product.
Even though this is an old post, I just had to reply to this comment. I agree Michael. As a developer coming from not using Sharepoint and trying to tame it, the learning curve is absolutely massive and it is very unintuitive. Sure it may have all the bells and whistles, but … yeah. Things like not be able to have hierarchical permissions, so if you have sub sites with their own permissions and you make a change on the main site, you have to manually make the change on the sub sites that have their own permissions.
Hi, very nice post, I was wondering if is possible to create a worfflow using sharepoint apps, if you kno please can you post a demo please, and again is a great post….
I know it’s possible. In fact there are some workflow-powered apps now. Haven’t done anything with it yet, but please google it if you wan’t to know more about them.
it is really very helpful…can you plz tell me how can i access my custom list data in this app-part,.?
My list is in SharePoint site.Not in app domain.
The app-part is an IFrame and therefore runs in the app-domain. However, with the ClientContext object you’re able to retrieve data from the host web: http://www.mavention.nl/blog/sharePoint-app-reading-data-from-host-web
Pingback: How to add sharepoint hosted app to my office 365 page | DL-UAT
Pingback: How to create an App Part/Add-in Part in SharePoint 2013 | All about SharePoint
I am doing same but I am making am provide hosted app.. what src should i put in elements.xml..so that app part take link easliy and not show any error.
Email: [email protected]
I did this, but it only shows the user name from the VS Default.aspx part, the App part (on the home page) just shows ‘Initializing’.
Any Idea why this is happening?
I got an error “The required version of SharePoint Foundation or SharePoint Server is not installed on this system. The target version of the SharePoint project is 16.1.”
I apologize, I did not enter the correct credentials