• Tom Jebo & Ray Dixon

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