Napa Development Tools offer a fast, convenient way to prototype add-in development for SharePoint Online, Office Apps and Outlook Web Mail.

1. CREATING SHAREPOINT ONLINE
ADD-INS WITH NAPA TOOLS
Erik Noren – Solutions Architect
SharePoint Saturday NYC - 30 July 2016

2. THANK YOU
EVENT SPONSORS
We appreciated you supporting the
New York SharePoint Community!
• Diamond, Platinum, Gold, & Silver have
tables scattered throughout
• Please visit them and inquire about their
products & services
• To be eligible for prizes make sure to get
your bingo card stamped by ALL sponsors
• Raffle at the end of the day and you must
be present to win!

3. CONFERENCE MATERIALS
• Slides / Demo will be posted on Lanyrd.com
• http://lanyrd.com/2016/spsnyc
• Photos posted to our Facebook page
• https://www.facebook.com/sharepointsaturdaynyc
• Tweet Us - @SPSNYC or #SPSNYC
• Sign Up for our NO SPAM mailing list for all conference
news & announcements
• http://goo.gl/7WzmPW
• Problems / Questions / Complaints / Suggestions
• Info@SPSNYMetro.com

4. • Visit ExtaCloud’s booth for wrist bands!
Scallywag's Irish Pub
508 9th Ave, between 38th & 39th.
[6 minutes walk]
Scallywags also serves food.
http://www.scallywagsnyc.com/

5. ABOUT ME
• Erik Noren
Solutions Architect
Ropes & Gray LLP
• @ErikNoren
• http://tiny.cc/ErikNoren

6. AN ADD-IN CONSISTS OF…
Web Server Catalog
Server
App ManifestWeb Page
<XML><script
src="Office.js"/>

7. APP PUBLISHING
Office
Store
Shared
folder app
catalog
Corporate
app
catalog
in SP
Exchange
Server
x x x
x x x
x x
http://msdn.microsoft.com/en-us/library/office/jj220037.aspx

8. WHAT IS NAPA
Napa is a great way to get started building Office Add-Ins
right in a browser window. You don’t need to install any tools
such as Visual Studio. All you need is an Office 365 account
and a supported browser. To get started, simply sign up for
an Office 365 Developer Site.

9. ADVANTAGES OF NAPA
• Office 365, SharePoint Online
• Develop using Standards Compliant Web Browsers
• Optionally Open in Visual Studio for Advanced Needs
• Online Editor Resembles Visual Studio Code
• Basic autocomplete
• Syntax Highlighting
• Jump to definition
• ...
• SharePoint Hosted
• Your work is in the cloud!
• Download for local source control

10. DISADVANTAGES OF NAPA
• It‘s JavaScript + HTML
• Authentication around REST services is tricky

11. NAPA TIPS
• Napa gets fixated on site collections
• When you click the Napa tools add-in, the site collection you‘re on is
remembered for your session in the Napa Cloud App
• If you have or install the Napa tools in other site collections and want to
publish apps to those, you need to Sign Out of Napa and go back in from
the site collection you want to use
• Napa will refuse to publish an add-in if an older version with the same
version number is already installed
• If this happens you have to find and delete all instances of your add-ins
then remove them from the recycle bin
• If all else fails, start a new project

12. HOW DO WE GET STARTED?

13. WHAT TYPE OF PROJECTS?

14. DEMO
INSTALLING THE NAPA TOOLS

15. DEMO
CREATING A NAPA APP

16. FAST PROJECT CREATION
• New Napa add-in comes with an app and an app part
• You can add to or delete the template files
• You specify the page to be displayed when starting the app
• You can add the app part just like any other add-in
• An app part by default will link to the full app page
• Your app part is a slim view of information
• Your app page displays extra content and information

17. DEMO
WORKING WITH LISTS AND PERMISSIONS

18. GET DATA FROM REST OR CSOM
• An add-in is built like any web page
• You have full control to add scripts, content and make calls to services
• Use jQuery, AngularJS, Knockout, React, ...
• An app part is rendered inside an IFRAME
• This isolates your app part from impacting the rest of your page
• This also means you don‘t have shared access to JavaScript objects
• Your parts can still communicate using messages and window listeners

19. QUESTIONS?
• Erik Noren
Solutions Architect
Ropes & Gray LLP
• @ErikNoren
• http://tiny.cc/ErikNoren

20. THANK YOU
EVENT SPONSORS
We appreciated you supporting the
New York SharePoint Community!
• Diamond, Platinum, Gold, & Silver have
tables scattered throughout
• Please visit them and inquire about their
products & services
• To be eligible for prizes make sure to get
your bingo card stamped by ALL sponsors
• Raffle at the end of the day and you must
be present to win!

21. CONFERENCE MATERIALS
• Slides / Demo will be posted on Lanyrd.com
• http://lanyrd.com/2016/spsnyc
• Photos posted to our Facebook page
• https://www.facebook.com/sharepointsaturdaynyc
• Tweet Us - @SPSNYC or #SPSNYC
• Sign Up for our NO SPAM mailing list for all conference
news & announcements
• http://goo.gl/7WzmPW
• Problems / Questions / Complaints / Suggestions
• Info@SPSNYMetro.com

22. • Visit ExtaCloud’s booth for wrist bands!
Scallywag's Irish Pub
508 9th Ave, between 38th & 39th.
[6 minutes walk]
Scallywags also serves food.
http://www.scallywagsnyc.com/