build an office add-in
TRANSCRIPT
• Tom Jebo
Build an Office Add-in
Objectives
Agenda
Prerequisites:
Office 365 dev account w/admin
Visual Studio Ent/Pro/Community
Introduction
Module 1: Word API
Module 2: Excel API
Summary
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
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
Demonstration
Introduction
Module 1: Word API
Module 2: Excel API
Summary
Take inventory
Introduction
Module 1: Word API
Module 2: Excel API
Summary
http://office.com
Ready, set, go!
Introduction
Module 1: Word API
Module 2: Excel API
Summary
http://office.com
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
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
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
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
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
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
Module 2 Section 1
Handle change events
Excel.run
context.workbook.worksheets
worksheet.onChanged
Introduction
Module 1: Word API
Module 2: Excel API
Summary
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
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
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
