Sep 20, 2012

First Touchdown With Napa - Building Apps for SharePoint 2013

"Napa" is the new tool set for building cloud based apps for Office and SharePoint 2013, hosted in Office 365. Getting hands-on with it, I was quite impressed. See instructions for how to get started on the MSDN Office Developer site, where you can of course also find more detailed documentation on building the apps.

I signed up for my own developer site yesterday, and tried it out today for the first time. And I must say, it is a nice and fluent way of creating apps for SharePoint!

Once you have the site and Napa all set up in your development environment, you will find the Napa tools in the Site Contents:

After launching the tools, you can create a new app project with a couple clikcs, and later on, you will find all your apps here, in the Napa Tools.

You can create both different types of Office apps and SharePoint Apps by clicking Add New Project.

The most simple way to create your app is to do it right in the browser! The default SharePoint app has several sample files to get you started:

The references between these files have already been made, so add your stuff an click Run Project:

and Napa takes care of packaging and installing, and uninstalling the old version when needed.

Just to get a small taste of how this thing works, I did a couple small customizations to the project, like 
  • adding some text, an iFrame to display the web part, an a button on the default page

  • a little bit of JavaScript in the App.js file to display the web part on the page (displaying the initially hidden iFrame)
  • adding an editable paragraph in the web part 

  • and slightly changing the css style of the Web Part content and adding some styling for the button.

There is something of an intellisense and error checking in the browser editor too; not full, e.g. it will not supply you with intellisense for JavaScript (most editors don't), but it does give hints and notify about errors:

When this little demo is run, this is how it looks after clicking the button to display the Web Part:

If you want to, you can also open a copy of the project to VisualStudio for editing.


pruitt said...

Hi ... william.. thanks for sharing information.This has to be one of my favorite posts! And on top of thats its also very helpful topic for newbies. Thanks a lot for informative information on sharepoint.

SM said...

Hi, thanks :) Good to hear!