4. Agenda
• Why Office Add-ins?
• How Office Add-ins Work
• Tools for Building Office Add-ins
• Using the Web Development Toolchain
• SPFx
• Distributing Add-ins
• Conclusions
• Q & A
5. AGENDA:
WHY OFFICE ADD-INS?
HOW OFFICE ADD-INS WORK
TOOLS FOR BUILDING OFFICE ADD-INS
USING THE WEB DEVELOPMENT TOOLCHAIN
SPFX
DISTRIBUTING ADD-INS
CONCLUSIONS
Q & A
6. • The de-facto standard for business
• > 1.2 b users + 400m outlook.com
• Now available on iOS, Android, OS X, Windows Phone and in browsers
Office is Everywhere!
7. 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
12. 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, Excel, PowerPoint, Word, OneNote
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
Excel Custom FunctionsF
13. Win32 Online iPad iPhone Mac Android UWA
Read Read
Compose Compose
Add-in Roadmap
https://dev.office.com/add-in-availability
14. 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
16. Building an Office Add-in
• 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
18. 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…
19. More Development Choices…
• Use any technology that delivers for the web
• Yeoman generator for skeleton add-in project
(similar to SharePoint Framework toolchain)
Hosted on
GitHub
20. yo office!
• Go to https://nodejs.org/ and install LTS version
• npm install -g yo
• npm install -g generator-office
• yo office
22. React
• Open-source framework backed by Facebook
• Component model
• Virtual DOM
• “Weird” JSX/TSX syntax
• Go to https://reactjs.org/
23. App component with title property
Component has properties
Component’s render function returns one
root element with child elements (can wrap in
div or empty element <>)
Elements are converted into valid JavaScript
by the JSX compiler
Events are bound with function.bind syntax or
lambda expressions: e=>add(e)
Component props are immutable, but
component state can change using setState
method
ReactDOM.render method used to bind initial
App element to the element in the DOM with
the ID “app”.
React App class App extends React.Component {
constructor(props) {
super(props);
this.state = { items: [] }
}
render() {
const stocks = this.state.items.map((item, index) => (
<li>{item}</li>
));
return (
<div>
<h1>{this.props.title}</h1>
<div>
<input type="text" ref="newItem“ onKeyPress={this.add.bind(this)}/>
</div>
<ul>{stocks}</ul>
</div>
);
}
add(event) {
if (event.key == "Enter") {
var list = this.state.items;
list.unshift(this.refs.newItem.value);
this.setState({items: list});
this.refs.newItem.value = "";
}
}
}
ReactDOM.render(<App title="Hello World!" />, document.getElementById("app"));
25. Office UI Fabric React Components
React component library with more than 40
reusable components
Add the office-ui-fabric-react npm package
Typing available for TypeScript
Office UI Fabric Core
Includes styles, icons, typography, brand
icons, colors, grids, and more as CSS and
JavaScript if not using React.
PnP SPFx React Components:
http://github.com/SharePoint/sp-dev-fx-controls-react/
28. Design Guidelines
• Design explicitly for Office
• Focus on key tasks
• Favour content over chrome
• Go easy on the branding
• Keep users in control
• Design for all Office platforms and input methods
• First Run experience
• See: https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-design
29. Simplified component structure – no this, no
classes, no constructor, no
componentDidMount, etc.
Pure functional components
Use functions instead of classes
Functional (Stateless) Components were
introduced with React 1.4
React Hooks new in React 16.8
Current generator-office uses React 16.8
Current SPFx generator (1.8) uses React 16.7
One more thing -
React Hooks
function App(props) {
const [items, setItems] = React.useState([]);
const stocks = items.map((item, index) => (
<li>{item}</li>
));
function add(event) {
if (event.key == "Enter") {
var list = items;
list.unshift(event.target.value);
setItems({items: list});
}
}
return (
<div>
<h1>{props.title}</h1>
<div>
<input type="text“ onKeyPress={event=>add(event)} />
</div>
<ul>{stocks}</ul>
</div>
);
}
}
ReactDOM.render(<App title="Hello World!" />, document.getElementById("app"));
30. Refactored function Stocks({items}) {
return (
<ul>
{items.map(item => <li>{item}</li>)}
</ul>
);
}
function App(props) {
const [items, setItems] = useState([]);
function add(event) {
if (event.key == "Enter") {
var list = items;
list.unshift(event.target.value);
setItems({items: list});
}
}
return (
<div>
<h1>{props.title}</h1>
<div>
<input type="text“ onKeyPress={event=>add(event)} />
</div>
<Stocks items={items} />
</div>
);
}
}
ReactDOM.render(<App title="Hello World!" />, document.getElementById("app"));
Stocks is extracted as a separate component.
Stocks only depends on its props so it is a pure
or “stateless” functional component; no state, no
side-effects.
This makes Stocks very easy to test.
Implicit object destructuring operator {} used
instead of props.items.
33. Dialog API
• Dialog API allows you to open
a dialog box from an Office
Add-in.
• Typically used for
authentication prompts with
external systems.
• Can also be used to show UI
elements that are too big for
the task pane.
35. What if we could just use SPFx?
Introduced at //build/ 2019
Still in early stages
SPFx component in task pane includes a call to Office.js
Get access to SharePoint data (if authenticated)
Get access to Microsoft Graph through MSGraphClient
No need to worry about where to host the Add-in
Currently planned for preview in 1.9 release of SPFx
38. Deployment Options
• Debugging – launch from Visual Studio or Visual Studio Code
• Side-loading – ad-hoc pull-driven deployment
• App Catalog – for internal distribution
• App Store – for broader distribution
• App Store – commercial distribution
• Centralized Deployment
39. 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, possibly even code, across Office
Add-ins, SharePoint, Web, Universal Apps and Mobile
Cross-platform Apps
• Your choice of developer tooling – use what you know
• Platform continuing to get more capabilities and better
reach
• Watch out for SPFx Office Add-in component in SPFx
version 1.9
40. Sign up for the Office 365
Developer Program
Start at http://dev.office.com
Build your first Office Add-
in
Use Yeoman, Visual Studio Code,
ReactJS and other familiar tools from
SPFx development right now
Think about how Office
Add-ins could help your
business
Solve real business problems,
delight users, watch out for SPFx 1.9
CALL TO ACTION
41. thank you
questions?
SPDOCTOR.COM@SPDOCTOR
Bill Ayers
Technical Director
Flow Simulation Ltd.
Office 365 Dev Center dev.office.com (redirect)
Office Add-ins
Documentation
https://docs.microsoft.com/e
n-us/office/dev/add-ins/
Training content on GitHub https://github.com/OfficeDev/
TrainingContent/
Office UI Fabric https://developer.microsoft.c
om/en-us/fabric
Script Lab https://github.com/OfficeDev/
script-lab
Discover what’s coming with
the Microsoft 365 Roadmap
aka.ms/M365Roadmap
Follow me and share this
session
@SPDoctor #Collabsummit