in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

This Blog

Syndication

Archives

Corey Roth [MVP]

A SharePoint MVP bringing you the latest time saving tips for SharePoint 2013, Office 365 / SharePoint Online and Visual Studio 2013.

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).

Comments

 

My SharePoint links January 5, 2013 | Jeremy Thake's musingsJeremy Thake's musings said:

Pingback from  My SharePoint links January 5, 2013 | Jeremy Thake's musingsJeremy Thake's musings

January 5, 2013 1:17 PM
 

SharePoint Daily » Blog Archive » Collaboration Hampered by Governance; Microsoft’s Mobile Strategy was a Mistake; Waiting for Windows 9 said:

Pingback from  SharePoint Daily  » Blog Archive   » Collaboration Hampered by Governance; Microsoft’s Mobile Strategy was a Mistake; Waiting for Windows 9

February 19, 2013 7:22 AM
 

SharePoint Daily said:

WOOHOO! First day back to work and it isn't Monday. - Dooley Top News Stories Collaboration Tools

February 19, 2013 7:30 AM
 

Build a SharePoint-hosted Client Web Part in SharePoint 2013 said:

Pingback from  Build a SharePoint-hosted Client Web Part in SharePoint 2013

July 10, 2013 10:24 PM

Leave a Comment

(required)  
(optional)
(required)  
Add

About CoreyRoth

Corey Roth is an independent SharePoint consultant specializing in ECM, Apps, and Search.
2012 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems