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