rapid prototyping with "napa" office 365 development tools

CREATING SHAREPOINT ONLINE ADD-INS WITH NAPA TOOLS

Erik Noren – Solutions ArchitectSharePoint Saturday NYC - 30 July 2016

THANK YOUEVENT

SPONSORSWe 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!

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

• 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/

ABOUT ME

• Erik NorenSolutions ArchitectRopes & Gray LLP• @ErikNoren• http://tiny.cc/ErikNoren

AN ADD-IN CONSISTS OF…

Web Server Catalog Server

Add-in for Office or

SharePoint

App ManifestWeb Page<XML><script

src="Office.js"/>

APP PUBLISHING

OfficeStore

Shared folder app catalog

Corporate app

catalogin SP

Exchange Server

Task Pane app x x x

Content app x x x

Mail app x x

http://msdn.microsoft.com/en-us/library/office/jj220037.aspx

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.

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

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

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

HOW DO WE GET STARTED?

WHAT TYPE OF PROJECTS?

DEMOINSTALLING THE NAPA TOOLS

DEMOCREATING A NAPA APP

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

DEMOWORKING WITH LISTS AND PERMISSIONS

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

QUESTIONS?

• Erik NorenSolutions ArchitectRopes & Gray LLP• @ErikNoren• http://tiny.cc/ErikNoren

THANK YOUEVENT

SPONSORSWe 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!

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

• 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/