ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ADD-INS

2. RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO
BUILD OFFICE ADD-INS
Bill Ayers M[CM|VP|CT]
Flow Simulation Ltd, UK

3. ♡ DIAMOND AND PLATINUM SPONSORS ♡

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

8. Reactor

9. Extensions for Office
VSTOCOM
Office Add-ins
VBAMacros
*all still supported

10. Behind the Scenes
Hosted Add-In Web Page
(must be HTTPS)
XML Manifest file in
Exchange, catalog or
file store

11. DEMO
Could do with something interesting here…

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

15. JavaScript API for Office

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

17. DEMO

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

21. DEMO
Reference: https://code.visualstudio.com/Docs/runtimes/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"));

24. Office.initialize and React
// Bootstrap root component in Office.initialize
Office.initialize = () => {
ReactDOM.render(
<App title={title} />,
document.querySelector('#container')
);
};

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/

26. Office Add-ins Design Toolkit
• Adobe XD Document
• Download Adobe XD (free)
• Download toolkit from
https://aka.ms/addins_toolkit

27. DEMO
Reference: https://dev.office.com/

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.

31. DEMO

32. TASKS
manager
memberOf
FILES
MESSAGES
workingWith
Shared with me
directReports
createdBy
FILES
CONVERSATIONS
createdBy
workingWith
EVENTS
trendingAround
GROUPS
TASKS
NOTES
NOTES
public
modifiedBy
USER
trendingAround
Microsoft Graph API

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.

34. Dialog API
Office.context.ui.displayDialogAsync(“https://myaddin.contoso.com/login.html",
options, callbackFunction);
open to a page hosted from a valid
app domain (defined in manifest) and
then can display any page that is
hosted using HTTPS
e.g. height and
width
optional – enables host
page to get messages
from dialog

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

36. DEMO

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