Welcome!

XML Authors: Jnan Dash, Sandi Mappic, Max Katz, Yakov Fain, Keith Mayer

Blog Feed Post

How to: Build Client Web Parts in SharePoint 2013 with Office Developer Tools Preview 2

During SPC12, Preview 2 of the Microsoft Office Developer Tools for Visual Studio 2012 came out.  You can get it using the Web Platform Installer.  This made a few improvements in how we build Client Web Parts (App Parts).  Earlier this year, I provided a step-by-step on how to create SharePoint-hosted Client Web Parts as well as use the Client Object Model with it.  Although you can still follow the steps outlined there, this post will tell you what’s different between Preview 1 and Preview 2.

When you create the project, the first two steps look pretty much the same.

P2ClientWebPartNewProject

The next step has a new link to allow you to create a developer account with Office 365 Preview.

P2ClientWebPartAppSettings

The good news is, they’ve added a wizard that helps you get stared with client web parts.  This wizard does three things for you.  It creates an application page for the client web part, it add it to elements.xml, and it registers the CSS files from SharePoint so that the content inside the IFRAME is styled appropriately.   Once you have created the project, add a new item, and choose Client Web Part (Host Web).

P2ClientWebPartSPI

When you go to the next step, you get a new page in the wizard that gives you the option to create a new page for the client web part.

P2ClientWebPartCreatePage

This is a nice addition because with Preview 1, we had to create this page manually and we had to add the necessary AllowFraming tag as well as everything else.  Now, this tag is created for us as well as JavaScript to load the CSS from the host web.  This lets you get started right away without having to worry about the wrong styles being used.

P2ClientWebPartPage

Now, if you want to use the SharePoint Object Model, you will still need to follow the steps I outlined in my previous post.  This includes adding a JavaScript file for this page and loading the SP.Runtime.js and SP.js files.  The wizard also wires up the elements.xml file for you, so that you don’t have to manually type this in anymore.

P2ClientWebPartElements

You will still need to add the properties yourself which I still owe you all a post for, but I promise it’s coming soon. :)  When you run the app, and add the app part, it should look something like this.

P2ClientWebPartOnHostWeb

One thing, that you need to watch out for is that there is a bug that affects Internet Explorer 9.  When you add the App Part to the host web with the Visual Studio debugger attached, you will get multiple JavaScript errors.  However, if you keep clicking continue, you will eventually get through them.  The work-around is to either add the app part to the page in a browser not attached to the debugger or to upgrade to Internet Explorer 10 (or use another browser).

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is a consultant at Hitachi Consulting specializing in SharePoint and Office 365 for clients in the energy sector. He has more than ten years of experience delivering solutions in the energy, travel, advertising and consumer electronics verticals.

Corey specializes in delivering ECM and search solutions to clients using SharePoint. Corey has always focused on rapid adoption of new Microsoft technologies including Visual Studio 2013, Office 365, and SharePoint.

He is a member of the .NET Mafia (www.dotnetmafia.com) where he blogs about the latest technology and SharePoint. He is dedicated to the community and speaks regularly at user groups and SharePoint Saturdays.