SharePoint Saturday Belgium 2017 • October 21 • Brussels Track: IT PRO | Level: 000

Yo Office! Use your SPFx Skillzto Build Add-ins for Word, Excel, Outlook and PowerPoint

Bill Ayers

Pla

tin

um

Go

ldSi

lver

Bill Ayers

Flow Simulation Ltd.

www.SPDoctor.net

BillA@flosim.com

@SPDoctor

Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development

MCM/MCSM Charter SharePoint, MCT, MVP, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, MSc, Professional Scrum Master, etc.

Agenda

• Background

• Office Add-in Shapes

• Building Office Add-ins

• Distributing Add-ins

• Conclusions

• Q & A

2-3 hours/day in Office Apps

Mobile Devices

1.2B in 2014

1.8B in 2018

1B+

• The de-facto standard for business

• Now available on iOS, Android, OS X, Windows

Phone and in browsers

Office is Everywhere!

Add-in vision

• Native and intuitive feel

• Use UI framework of host client (Office UI Fabric)

• Write once, run everywhere

• Simple point solutions to automate existing manual processes

Reactor

Extensions for Office

VSTOCOM

Office Add-ins

VBAMacros

*all still supported

Behind the Scenes

Hosted Add-In Web Page

XML Manifest file in Exchange, catalog or file store

Could do with something interesting here…

Office Add-in Shapes

Add-in that runs within a document content with

read/write access: Excel, PowerPoint, Access

Add-in launched contextually from a mail message or appointment:

Outlook and Outlook Web Access (OWA), and could include actionable

messages

Command in the Office UI to launch add-in or execute

JavaScript: Outlook, Outlook Web Access (OWA)

Add-in that runs beside a document/mail with read/write access:

Word, Excel, PowerPoint, Project, Outlook

Module extension for the Outlook navigation bar: Outlook

Task Pane Add-in

Content Add-in

Add-in Command

• “1-click” way for users to invoke add-ins

• Launch task pane

• Execute a JavaScript function without showing UI

• Dropdown (menu) with different types of buttons as options

• Up to 6 buttons per group

• 1 group on default tab, up to 10 groups on custom tab

• Commands that don’t launch UI can show status messages on

the mail item or appointment

• Supported starting with Office Developer Tools for Visual Studio

Update 1

Win32 Online iPad iPhone Mac Android UWA

Read Read

Compose Compose

Add-in Roadmap

https://dev.office.com/add-in-availability

Office.js

• Access to body and attachments, content

• Launch native forms (e.g. reply, new message, appointment)

• Modify fields and add attachments

• Set/get custom properties on items

• Persist user settings

JavaScript API Reference: http://dev.office.com/docs/add-ins/overview/office-add-ins

JavaScript API for Office

Building an Office Add-in

• Napa in-browser web editor – zero install -https://www.napacloudapp.com/ *retired*

• Script Lab add-in

• Microsoft Visual Studio

• Any Web Editor of you choice (e.g. VS Code) plus Yeoman project generator https://dev.office.com/blogs/creating-office-add-ins-with-any-editor-introducing-yo-office

Getting Started at dev.office.com – can use MSDN subscription, sign up for Office Developer Program for free 1 year licence, or get a free 30-day Office 365 trial

Using Visual Studio 2015

• Make sure Office Add-ins toolset installed (Visual Studio 2015 setup or http://www.visualstudio.com/features/office-tools-vs)

• Office Developer Tools for Visual Studio 2015 Update 2available

• Design user interface as a web site

• Edit manifest

• Implement logic with client-side JavaScript or server-side code

• Run or debug – will host Add-in locally

• Publish from Visual Studio

Using Visual Studio 2017

• Visual Studio 2017 (including community edition) – check the installer option

• Create new project: Add-in for Office App for Office Web Add-in

• Design user interface as a web site, edit manifest, etc…

Project Structure

• First project contains just the XML add-in manifest (VS includes a design wizard)

• Second project is the supporting ASP.NET Website with HTML, CSS and JavaScript files (including jQuery library)

• Use any other technology, but you will have to provision it yourself

• Things like alerts, pop-up browser windows and anything modal will be blocked by the hosting Office app

Build Add-in with Visual Studio

More Development Choices…

• Use any technology that delivers for the web

• Microsoft offering Yeoman generator for skeleton add-in project (similar to SPFx toolchain)

• Keep in mind that add-ins need SSL/HTTPS

Hosted on GitHub

yo office!

• > npm install -g yo

• > npm install -g generator-office

• > yo office

Building an Add-in Using Command-line Tooling and Visual Studio Code

Reference: https://code.visualstudio.com/Docs/runtimes/office

Office UI Fabric

• Responsive framework (kind-of)

• Office Design Language for web

• Designed for Office Add-ins by

OneDrive and SharePoint Design Studio

• Consistent look-and-feel with Office

• About 100k, 200k with components

• Available as raw CSS or versions for Angular and React

• Dev.office.com/fabric

• Open source (github.com/OfficeDev/Office-UI-Fabric)

Office UI Fabric

• Design elements to give add-ins the same look and feel as the rest of the Office suite

• Consistent typography, icons and behaviour

Link to UI Fabric Stylesheets:<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.components.min.css">

Decorate elements with UI Fabric classes:<button class="ms-Button" id="get-data-from-selection"> <span class="ms-Button-icon"><em class="ms-Icon ms-Icon--plus"></em></span> <span class="ms-Button-label">Get Data from selection</span> <span class="ms-Button-description">Get Data from the document selection</span> </button>

http://dev.office.com/fabric

Link to UI Fabric JS:<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

Office UI Fabric ReactJS Components• 30 re-useable React components, ready to use

• Used by Microsoft to build Office and SharePoint

• Angular? See ngOfficeUIFabric

import Button from 'office-ui-fabric-react';Var b = <Button onClick={() => this.getData() } className="ms-Button--primary">Refresh List</Button>

BreadcrumbButton

CalloutCheckboxChoiceGroup

ColorPickerCommandBarContextualMenuDatePicker

DetailsListDialogDocumentCard

DropdownFacepileGroupedList

LabelLayer

LinkListMessageBar

NavOverlayPanelPersona

PickersPeoplePickerPivot

ProgressIndicatorSearchBoxSlider

TextFieldToggle

Captain Klepto

Office Design Patterns

•Apply solutions to common customer scenarios

•Apply design best practices

• Incorporate Office UI Fabric components and styles

•Build add-ins that visually integrate with the default Office UI

•“Steal” HTML and CSS from samples on GitHub

https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code

Distribution through Office Store

Great to have a cross-platform model, but how will people find add-ins?

Easy access to the Office

Store where users can get

add-ins

* New options for IT management of add-ins now in preview

How to install an Office add-in?

Side-loading

• During development of add-in

➢ Upload manifest

➢ For testing

Distribute publicly

• Office store

➢ Validated against policies

➢ Free or Paid

➢ Not for internal

Deploy within Organization

• Admin uses

➢ Add-in Catalog

➢ EAC for Outlook

➢ Centralized deployment

New PowerShell cmdlets for Centralized Deployment management: New-OrganizationAddIn, etc.

TASKS

manag

er

member

Of

FILES

MESSAGES

workingWit

h

Shared with

me

directRepor

ts

createdB

y

FILES

CONVERSATIONS

created

By

workingWit

h

EVENTS

trendingAroun

d

GROUPS

TASKS

NOTES

NOTES

publ

ic

modifiedB

y

USER

trendingAroun

d

Microsoft Graph API

• Outlook (Mail) add-ins

now support the 400

million users of

Outlook.com

• This is in addition to the

billion users of Outlook

client across Windows

and iOS and users of

Office 365

Using with Protected Web Services• Use displayDialog to handle auth. flow

• Office-js-helpers.js• https://github.com/OfficeDev/office-js-helpers

• Use with any OAuth 2.0 service

• Supports both Implicit and Authorization Code OAuth 2.0 flows

• Connect using Server-side code

• Outlook add-in SSO - Exchange generates token - Add-in can validate and map to known user id

Office.context.ui.displayDialogAsync(dialogURL,

{ width:100, height: 100, requireHTTPS: true },

function(result) {

// handle the result…

});

New Add-in SSO

• https://dev.office.com/docs/add-ins/develop/sso-in-office-add-ins

Conclusions:

• Office Add-ins – potential for huge business benefit for your users with minimal effort

• > 1.5bn potential users across multiple platforms

• Use same skillset across Office Add-ins, SharePoint, Web, Universal Apps and Mobile Cross-platform Apps

• Your choice of developer tooling

• Sign up for Office 365 Developer Program to get started – dev.office.com

• Platform continuing to get more capabilities and better reach

• Think about how add-ins could help your business

Resources:

• Office 365 Dev Center (dev.office.com)• https://dev.office.com/docs/add-ins/overview/office-add-ins• Samples and training content: github.com/OfficeDev• Visit dev.office.com and click the Sign Up button to join the

Office 365 Developer Program• Microsoft Virtual Academy course “App Model Deep Dive”

with Ted Pattison and Scott Hillier• Get started with Office development:

dev.office.com/getting-started• UX Patterns: https://dev.office.com/docs/add-ins/design/ux-

design-patterns• https://dev.office.com/fabric

SharePoint Saturday Belgium 2017 • October 21 • Brussels

Thank You!

Feedbackhttp://spsbe.be