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
Bill Ayers
Flow Simulation Ltd.
www.SPDoctor.net
@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
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
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
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
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
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…
});
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