office add-in development
TRANSCRIPT
![Page 1: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/1.jpg)
EARNING CA$H ON MS OFFICE WITH JSVjekoslav Ratkajec
![Page 2: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/2.jpg)
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
![Page 3: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/3.jpg)
ADD-IN AVAILABILITY
![Page 4: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/4.jpg)
ADD-IN ANATOMY
![Page 5: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/5.jpg)
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 ✗
![Page 6: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/6.jpg)
1. SETTING UP PROJECT1. 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
![Page 7: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/7.jpg)
2. SIDELOADING• Run in application
Copy manifest to appropriate folder• Windows: use shared folderhttps://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 Libraryhttps://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
![Page 8: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/8.jpg)
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 Data\npm\node_modules\vorlon\Server• Windows 7 - %AppData%\npm\node_modules\vorlon\Server
• Change "useSSL": true
• Use Admin center preview to share in your organization
![Page 9: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/9.jpg)
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 referencehttps://dev.office.com/reference/add-ins/javascript-api-for-office
![Page 10: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/10.jpg)
![Page 11: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/11.jpg)
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
![Page 12: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/12.jpg)
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.
![Page 13: Office Add-in development](https://reader035.vdocuments.mx/reader035/viewer/2022070520/58f222e21a28abe6098b4599/html5/thumbnails/13.jpg)
THANK YOU!Interested in working with us? Shoot me an email.