Post on 09-Jan-2017
Patterns and Practices in Building Office Add-Ins
Mostafa ElzoghbiSr. Technical Evangelist@MostafaElzoghbiwww.MostafaElzoghbi.com
Office Add-Ins OverviewAdd-Ins development best practicesAdd-In development in VS 2015Azure AD & Add-Ins security
Agenda
What is an Office Add-In? A Web page loaded inside an Office Application Embedded inline or as task pane within documents, mails or
appointments. Works in both Office Applications 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 Add-In can use any JS frameworks in Office Add-Ins such as:
AngularJS, Bootstrap…etc.
Designing Office Add-Ins - Shapes Office Add-Ins come in three different shapes/types Task Pane Add-In (only shape supported by Microsoft Word) 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 Available in Mail Add-In only*
Custom HTML-based interfaces Using Office UI Fabric
Demo: Using Napa Tools to build Office Add-Ins
Add-In development best practices
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.
Create an engaging first-run experience Easy on-boarding process.
Teaching UI to educate users. Include sample data. Re-Inforce the VP of your add-in.
UX is so important! Don’t let your devs design your add-in.
User Add-In commands Provide meaningful icons. Use supported sizes with transparent background color.
Clear button labels. Group related commands under a menu control.
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 for design UI elements (OSS)
Optimize and monitor add-in performance
Load time should be <= 500ms All users interactions respond in less than a second.
Use CDN for content. Use Standard web standards to optimize your web page.
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
Publishing Basics
18
Demo: Using Office UI Fabric in Office Add-In
Visual Studio for Office Add-Ins
Visual Studio Experience1. Create new Office Add-In project2. Create/design user interface for Web page3. Enhance Web page with CSS and
JavaScript4. Set project properties in manifest5. Run!
Create New Office Add-In ProjectCreate project based on Office Add-In 2015 project template
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 Website Contains HTML, CSS and JavaScript source files Integration with jQuery library already included
App Manifest Designer
App Manifest - XML View
Create the HTML for a Web Page
DEMO: Stock Excel Add-In in VS 2015
Azure + o365
• Fully flexible: Private, on premises, hybrid or cloud
• The power of o365: Leverage Office, SharePoint and Exchange Online as your application building blocks
• Identity is the glue that makes all of that possible
Your identity goes with you
PCs and devices
3rd party clouds/hosting
Azure AD
You
When accessing Graph API to access o365 sevcies, you need to register you application in AAD.
Step 1: Register your apps on Azure AD
AD needs to know which web app/service the o365 app is actually referring to.
Step 2: Map the AD app to the actual web service
The client app must be allowed to call the web service. It is also allowed to logon to Azure Active Directory (by default)
Step 3: Set permissions
The app is allowed to call Graph API features
Step 3: Set permissions
DEMO: App registration in AAD & Connected Services in VS2015 Add-Ins
1) Office Development Centerhttp://dev.office.com/ 2) Office 365 PnP homepagehttp://dev.office.com/patterns-and-practices 3) Office Add-In Sampleshttps://github.com/OfficeDev/PnP-OfficeAddins
References
35