Microsoft is switching gears by focusing on developers and web technologies. Office Add-ins enable you to extend Office clients such as Word, Excel, PowerPoint, and Outlook using web technologies like HTML, CSS and JavaScript.This presentation will cover Add-in architecture as well as development tools and process.
2. FEW STARTING WORDS…
• Office Add-ins enable you to extend Office clients:
• Word, Excel, and PowerPoint add-ins that extend functionality
• Excel and PowerPoint add-ins that create new objects
• Outlook add-ins that extend functionality
• HTML+CSS+JS
5. TOOLS OF THE TRADE
• Develop with Visual Studio on Windows (Mac not supported)
• native Office Add-in support ✓
• debugging ✓
• Develop with any editor ← I use VS Code
• native Office Add-in support ✗
• debugging ✗
6. 1. SETTING UP PROJECT
1. Generate project structure with create-react-app
https://github.com/facebookincubator/create-react-app
2. In separate folder generate Office application with Yeoman: yo office
https://github.com/OfficeDev/generator-office
3. Copy generated manifest to your react app folder
4. Run app (requires HTTPS)
• Mac: HTTPS=true npm start
• Windows: set HTTPS=true&&npm start
7. 2. SIDELOADING
• Run in application
Copy manifest to appropriate folder
• Windows: use shared folder
https://dev.office.com/docs/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins
• Mac & iPad: use predefined folder in Library
https://dev.office.com/docs/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac
• Run in browser
• Run Office application i.e. https://office.live.com/start/Word.aspx
• Upload manifest: Insert > Add-Ins > Upload My Add-in
8. 3. DEBUG
• Browser > Use Developer tools
• Application > Use Vorlon (or similar)
• Locate config.json
• Mac - /usr/local/lib/node_modules/vorlon/Server
• Windows XP - %USERPROFILE%Application Datanpmnode_modulesvorlonServer
• Windows 7 - %AppData%npmnode_modulesvorlonServer
• Change "useSSL": true
• Use Admin center preview to share in your organization
9. 4. TIPS & TRICKS
• Use Office Fabric UI as front-end framework (React, Angular, vanilla)
https://dev.office.com/fabric
• Application context ≠ Office (shared) context
• Use Dialog API for authentication
• Fallback to OOXML if there is no support in JS API
• API reference
https://dev.office.com/reference/add-ins/javascript-api-for-office
10.
11. HOW TO MAKE MONEY?
• Deploy add-in to Office Store
• Free (allowed to run ads)
• One-time payment
• Subscription
• Give 20% to M$
• Office store guidelines
• https://msdn.microsoft.com/en-us/library/office/jj220035.aspx
12. WE’RE LOOKING FOR JS DEV!
ReadCube's web, desktop, and mobile reference management apps, improve the way researchers discover, organize, read, share,
and cite research literature.
ReadCube’s core technology, the Enhanced PDF - core reading environment by leading publication platforms.
create-react-app will generate correct project structure and enable us to run npm start
install Yeoman
install office extension and use yo office to create project structure but more importantly - manifest
