Patterns and Practices in Building Office Add-Ins

Mostafa ElzoghbiSr. Technical Evangelist @ Microsoft Twitter: @MostafaElzoghbiwww.MostafaElzoghbi.com

Office Add-Ins OverviewAdd-Ins development best practicesAdd-In development in VS 2015

Agenda

What is an Office Add-In? A Web page loaded inside an Office Application

Office Add-ins enable you to extend Office clients such as Word, Excel, PowerPoint, and Outlook using web technologies like HTML, CSS and JavaScript.

Embedded inline or as task pane within documents, mails or appointments.

Works in both Office Apps, Office for Mac, and Office Web Applications

Office application extensions using Web technologies HTML 5 and CSS used to construct user interface JavaScript and jQuery used to add executable logic and event

handlers Add-In can provide code to read/write content to/from Office

documents Add-In can call web services hosted over Internet or running within

local network

Designing Office Add-Ins - Shapes Office Add-Ins come in three different shapes/types

Task Pane Add-In Content Add-In Outlook Add-In

Office Add-In Runtime Environment Web Extensibility Framework (WEF)

Allows Web page content to render inside Office Application Allows Web page code to run within a set of constraints Allows Web page code to interact with Office documents Allows Web page code to interact with Exchange items

WEF provides runtime environment for Office Add-Ins Office Add-Ins provide basis for a component architecture Office Add-Ins provide Add-Ins ability to publish to Add-In Catalog

(SP) and/or Office Store Office Add-Ins can be deployed in private networks

Anatomy of an Office Add-Ins Each Office Add-In is based on XML-based manifest

Manifest points to a Web page Manifest defines the type of the Office Add-In Manifest defines which Office applications it supports Manifest defines required capabilities

App for OfficeManifest

<XML>

WebPage

HTML+JS

Office Add-In Catalog Server Web Server

Office Add-In

Adding Add-In UI Elements You can use two types of UI

elements in your Office Add-ins: Add-in commands

Insertable Task Panes Using Office UI Fabric

8

Add-In development best practices

1) Provide Clear Value Help users complete tasks quickly & efficiently.

Enable new scenarios within Office.

Embed complementary services within office.

Create an effective Office Store listing.

2) Create an engaging first-run experience Easy on-boarding process.

Teaching UI to educate users that includes sample data. Re-Inforce the VP of your add-in. Avoid Pop ups. Make sign up process simple. Offer free trials. If your add-in requires a subscription, make some

functionality available without a subscription.

12

3)Use Add-In commands Provide meaningful icons.

Use supported sizes with transparent background color.

Clear & simple button labels.

Group related commands under a menu control.

Provide a version of your add-in that also works on hosts that do not support commands. (Office 2013)

15

4) Apply UX design principles Ensure that the look and feel and functionality of your add-in

complements the Office experience.

Keep users in control, favor content over chrome.

Avoid scrolling, Optimize for 1366x768.

Don’t include unlicensed images.

Apply UX design principles – Cont. Account for accessibility.

Make sure that your Add-In UI is responsive for all input platforms (including mouse/keyboard and touch)

Optimize for touch. (Context.touchEnabled)

Test Add-in in different modes (portrait and landscape)

USE Office UI Fabric: dev.office.com/fabric

5) Optimize and monitor add-in performance

Load time should be <= 500ms (Typical)

All users interactions respond in less than a second. (Important)

Use CDN for content/assets.

Use web standards to optimize your web page.

6) Market your add-in List your add-in with full profile including short descriptions,

images, What it does?

Convey the VP of your add-in in the title and description.

Create a website to help users find your add-in

Publish to Office Store & promote it from your website.

Office Store—This is a public marketplace that Microsoft hosts and regulates on Office.com.

Office Add-ins catalog on SharePoint—For task pane and content add-ins.

Exchange catalog—This is a private catalog for Outlook add-ins that is available to users of the Exchange server

Network shared folder add-in catalog

7) Publishing Basics

20

Demo: Using yeoman tool to develop add-ins

Visual Studio for Office Add-Ins

Visual Studio Experience1. Create new Office Add-In project

2. Create/design user interface for Web page

3. Enhance Web page with CSS and JavaScript

4. Set project properties in manifest

5. Run!

Create New Office Add-In Project

Office Add-In Project Structure App for Office solution has two projects

Top project contains add-In manifest Bottom project for remote web

Remote Web Project is ASP.NET or Node.js Website Contains HTML, CSS and JavaScript source files Integration with jQuery library already included

App Manifest Designer

App Manifest - XML View

DEMO: UPS Tracker Add-In

1) Office Development Center

http://dev.office.com/

2) Office 365 PnP homepage

http://aka.ms/OfficeDevPnP

3) Office 365 Office Add-Ins PnP in GitHub

https://github.com/OfficeDev/PnP-OfficeAddins

References

29

Thank YouTwitter: @MostafaElzoghbi

Blog: MostafaElzoghbi.com