Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual...
Transcript of Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual...
![Page 1: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/1.jpg)
• Tom Jebo & Ray Dixon
Build an Office Add-in
![Page 2: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/2.jpg)
Objectives
![Page 3: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/3.jpg)
Agenda
Prerequisites:
Office 365 dev account w/admin
Visual Studio Ent/Pro/Community
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 4: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/4.jpg)
Outcomes
▅ Core platform and features:
✓ Useful Modern Office Add-in
✓ Using Office.js
✓ Excel JavaScript API (events)
✓ Word JavaScript API (content controls)
Exposure to:
• Microsoft Graph
• Microsoft Graph JavaScript Client Library
• HTML/CSS/JavaScript
• Microsoft Fabric UI
• Microsoft Planner
• Office.js Helpers (Authentication)
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 5: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/5.jpg)
Big Picture
Microsoft Graph
PEOPLECOMMUNICATIONS
CONTENT
INSIGHTS
EXTENSIONS
OfficeCANVASES
DOCUMENTS
CONVERSATIONS
PAGES
STANDALONE WEB,
DEVICE, SERVICE APPS
EMBEDDED
CANVASES
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 6: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/6.jpg)
Demonstration
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 7: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/7.jpg)
Take inventory
Introduction
Module 1: Word API
Module 2: Excel API
Summary
http://office.com
![Page 8: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/8.jpg)
Ready, set, go!
Introduction
Module 1: Word API
Module 2: Excel API
Summary
http://office.com
![Page 9: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/9.jpg)
Steps to do:
1. Register the application to use Graph
2. Get the Planner Task URL from your tenant
3. Update the code for your tenant
4. You are now ready to build the Proseware Tasks sample add-in
![Page 10: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/10.jpg)
Module 1 Overview
Overview
Section 1 – Add content control
Section 2 – Test navigation
Summary
We’re using content controls in Word to link our planner tasks to specific locations in content.
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 11: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/11.jpg)
Module 1 Section 1
Add a content control to a selection in the Word edit session
Word.run
addFromSelectionAsync
range.insertContentControl
getSelection
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 12: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/12.jpg)
Module 1 Section 2
Test Word selection navigation
Run add-in (Ctrl-F5)
Debug (F12)
Verify scenarios:• Create new task in Proseware Tasks• Verify in task list view (click My Tasks)• Click on task• Verify navigation to the selection
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 13: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/13.jpg)
Module 1 SummaryOverview
Section 1 – Add content control
Section 2 – Test navigation
Summary
We successfully created a content control and added it to a document at a named selection location. Congratulations!
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 14: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/14.jpg)
Module 2 Overview
Overview
Section 1 – Handle change events
Section 2 – Test event handler
Summary
Excel’s event API’s will allow us to update our Planner tasks when a linked cell or range is changed.
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 15: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/15.jpg)
Module 2 Section 1
Handle change events
Excel.run
context.workbook.worksheets
worksheet.onChanged
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 16: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/16.jpg)
Module 2 Section 2
Test event handler code
Run add-in (Ctrl-F5)
Debug (F12 in browser)
Verify scenarios:• Create new task in Proseware Tasks• Verify in task list view (click on My tasks) • Click on the new task• Verify navigation to the selection• Modify the selection• Verify color of task changes
Yellow = local; Red = remote
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 17: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/17.jpg)
Module 2 Summary
Overview
Section 1 – Handle change events
Section 2 – Test event handler
Summary
We successfully added change event handler and watched it in action.
Way to go!
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 18: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/18.jpg)
Summary
Outcomes
✓Added Word content control for task
✓Added Excel onChanged event
✓ Learned to code add-ins
✓ Learned to debug add-ins
Next Steps
• Try: Extending Proseware Tasks to add
PowerPoint slide selection!
• Try (Advanced): Extend Proseware Tasks to send
an email link for the task.
• Upcoming Talks
• Data Portability on the Cloud with the Office
Open XML SDK
• Transform Office Documents with Open XML
SDK, Azure Functions, and Microsoft Flow
Introduction
Module 1: Word API
Module 2: Excel API
Summary
![Page 19: Build an Office Add-in - Microsoft...Agenda Prerequisites: Office 365 dev account w/admin Visual Studio Ent/Pro/Community Introduction Module 1: Word API Module 2: Excel API Summary](https://reader036.fdocuments.net/reader036/viewer/2022070719/5edefc2cad6a402d666a5839/html5/thumbnails/19.jpg)