4/27/2018 4:11 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Create the Modern Workplace with the SharePoint Framework 4/27/2018 4:11 PM P8032 Create the Modern Workplace with the SharePoint Framework Daniel Kogan Principal GPM OneDrive-SharePoint Vesa Juvonen Senior Program Manager OneDrive-SharePoint © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

STANDALONE WEB AND DEVICE APPS Office 365 Platform CANVASES EXTENSIONS STANDALONE WEB AND DEVICE APPS DOCUMENTS  PAGES  EMBEDDED CANVASES CONVERSATIONS Microsoft Graph

Office 365 Platform CANVASES EXTENSIONS Common across canvases Action Task pane Dialog box Event DOCUMENTS  PAGES  CONVERSATIONS Data import Bot Connector Navigation Branding Canvas specific extensions

Office 365 Platform CANVASES EXTENSIONS Images Messages Static cards DOCUMENTS  PAGES  CONVERSATIONS LIVE POLL Yes No Maybe SIMPLE TEXT Images Messages DECLARATIVE MARKUP Static cards DECLARATIVE + ACTIONS Actionable messages DECLARATIVE + DYNAMIC DATA CONTROLS + HTML + JS Fabric React based UX SPFx HTML + JS Content add-ins Web parts

4/27/2018 4:11 PM SharePoint Extensibility Principles Build long-term, value-added services for enterprise mobility Principles To provide an Application Development Framework that aligns 1st and 3rd parties To build industry leading client side solutions On-Premises and in the Cloud Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo SharePoint Framework as the foundation for modern SharePoint experience

Open source tooling Build Process & Tooling JavaScript Frameworks Yeoman Templates Gulp-based Build Process NodeJS/NPM SystemJS Webpack SASS TypeScript Build Process & Tooling React Angular Knockout and more … your choice! JavaScript Frameworks Visual Studio Code Atom Sublime and more … your choice! Code Editors

SPFx Technologies C# XAML MSBuild Project Templates IIS Express Microsoft 2016 4/27/2018 4:11 PM SPFx Technologies Project Templates IIS Express C# XAML MSBuild © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Office 365 CloudRoadShow 4/27/2018 4:11 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Office 365 CloudRoadShow 4/27/2018 4:11 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Office 365 CloudRoadShow 4/27/2018 4:11 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Office 365 CloudRoadShow 4/27/2018 4:11 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Web part to web part connections Announcement Web part to web part connections Communicate between multiple web parts in a page through SharePoint Framework… #1

Web part to web part connections - Preview Typical subscribe and event model based on event identifier Web part connections can be done using code Web parts can raise and subscribe to events using centralized service provided from SharePoint Framework

SharePoint Framework Web Part Events Client-side web part Client-side web part Client side web part can subscribe to events from the SharePoint Framework either using event name or by using instance identifier of event originator. js js Web part raises an event towards SharePoint Framework. SharePoint Framework will handle notification flow towards other web parts (subscribers) in the page. 2 <<Subscribe>> <<event>> <<event>> 1 SharePoint Framework

Example for raising an event private _onItemClick() { this.props.spContext.eventAggregator.raiseEvent<DataModel.TrainingMasterItemSelectedEventProps>( 'TrainingMaster:ItemSelected’, { data: {selectedItem: this.props.listItem}, sourceId: this.props.spContext.instanceId, targetId: ‘’ } ); Method is raised using eventAggregator. You are providing an identifier for the event in code Developer defines the data structure to be sent as part of the event. SourceId and targetId can be currently provided in the structure, but targetId does not have a purpose. All events are raised for subscribers based on the event identifier

Example for subscribing to events Subscribing to events based on their identifier can be done using eventAggregator available from the context. public componentDidMount() { this.props.spContext.eventAggregator.subscribeByEventName< DataModel.TrainingMasterItemSelectedEventProps>('TrainingMaster:ItemSelected’, this.props.spContext.instanceId, this._receiveItemChangedEvent); …   } private _receiveItemChangedEvent(eventName: string, eventObject: IWebPartEvent<DataModel.TrainingMasterItemSelectedEventProps>) { const incomingItem: DataModel.TrainingMasterItemSelectedEventProps = eventObject.data as DataModel.TrainingMasterItemSelectedEventProps; if(incomingItem != null)    } } Developer defines a callback function which will be called when event happens in the page Callback function will receive the event. Developer will define the used data structure for the information to be passed over

Demo Connected web parts with SharePoint Framework 4/27/2018 4:11 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint Framework Extensions Announcement SharePoint Framework Extensions Customize your SharePoint experience by embedding custom JavaScript on pages by using SharePoint Framework #2

SharePoint Framework extensions in SharePoint page Field customizer can be used to customize experiences around the specific fields. You can associate field customizer component to a specific field instance to make a customization execute when it’s used. Areas in the page available for Application Customizer to embed customizations for end users. Application Customizer can be also invisible for the end users. Command Set customizer can be used to introduce new custom actions to a list. Can be configured to be active when numerous items are selected. Executes associated custom code when clicked.

SharePoint Framework Extensions Application customizer to embed JavaScript cross all pages in a scope Command set customizer for embedding JavaScript related on action buttons Field customizer to embed JavaScript code for field specific UI rendering * Additional known elements in a page to provide custom experiences, like with header

4/27/2018 4:11 PM Demo Getting started with SharePoint Framework extensions and more advance scenarios © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

OpenId Connect support for 3rd party solutions Announcement OpenId Connect support for 3rd party solutions Call easily other services hosted in Office 365 without complexity of additional consent. Gradual extension of capabilities. #3

SharePoint Dev Roadmap

SharePoint Framework Roadmap Extensions Application Customizer CommandSet Customizer Field Customizer … more … js Web parts Web part connections JS Framework isolation Maintenance mode Workbench improvements … more … js Add-ins Azure AD registration Native responsive support Built using SharePoint Framework … more … Additional areas More to come… js SharePoint Framework Roadmap

Today’s announcement in SharePoint Framework SharePoint Framework Extensions Web part to web part connections OpenId Connect support for 3rd party solutions

SharePoint Framework Extensions Dev Preview Coming soon… Capabilities Application Extensions Command Set Extensions Field Extensions What’s included? New Yeoman templates Updated documentation Tutorials and labs

Road map CY17 Spring Fall SharePoint WebHooks GA SharePoint Framework GA SharePoint Sites on Microsoft Graph GA Web part connection Preview SharePoint Framework Extensions Preview Fall SharePoint Extensions GA Web part connection GA Native Graph access from SharePoint Framework ALM APIs SharePoint Framework Web Parts on-premises as part of FP2

SharePoint Dev Resources I’m looking for documentation – http://dev.office.com/sharepoint looking for tutorials – http://aka.ms/sppnp-tutorials looking for samples – http://aka.ms/sppnp-samples looking for videos – http://aka.ms/sppnp-videos looking for announcements – http://dev.office.com/blogs looking for roadmap – http://aka.ms/sppnp-roadmap submit an SPFx issue – http://aka.ms/spfx-issues I want to submit feature request – http://aka.ms/sp-dev-uservoice contribute to community– http://aka.ms/sppnp

Sharing is caring… http://aka.ms/SharePointPnP Code samples Reusable components Guidance documentation Community calls SharePoint Framework SharePoint add-ins Remote API models with SharePoint development http://aka.ms/SharePointPnP

Office @ Build Track 20-min Tech Talks @ Tech Talk A Breakout Sessions When Tech Talk Speaker Wed 11:30 AM Integration with Microsoft Office 365 Data Loss Prevention with Remedy by BMC Darius Wallace Jeff Desroches Rick Nelson Wed 01:00PM What's New in Office UI Fabric Micah Godbolt Wed 03:00PM Build data driven solutions using Microsoft Visio Kulo Rajasekaran Rishabh Agrawal Wed 06:30PM New Virtual Health Templates extend Skype for Business as platform for developers Daniel Canning David Newman Wed 08:00PM Microsoft Teams Developer Tool Integrations Bill Bliss Mansoor Malik Thu 10:30AM Deploy, manage, and customize with SharePoint Patterns and Practices tools and guidance Vesa Juvonen Thu 11:00AM Script Lab, a Microsoft Garage project Michael Saunders Thu 12:00PM Adobe Creative Cloud and Adobe Document Cloud in Microsoft Teams Ashwani Chandil Rajeev Sharma Ram Prasad Thu 03:30PM Writing an awesome Mobile Outlook add-in Dwight Foster; ergey Shvets Thu 05:30PM DocuSign and Microsoft Office.js APIs integration Kiah Jones Fri 09:30AM From Zero to Hero: Building an Office add-in in one day Clive Goodinson Mike Ammerlaan Fri 11:30AM Building a Better Bot: How Pullstring built the Doctor Who Bot PullString Team Fri 12:00AM Dun & Bradstreet powers data driven insight in Microsoft Teams and Excel Chris Pardo Fri 12:30AM Using Microsoft Graph to connect to Office 365 data Yina Arenas Fri 02:00PM Sapho connects legacy systems with Microsoft Teams Peter Yared Fri 02:30PM Deep Dive: Office Add-in Single Sign On Tim McConnell Breakout Sessions When Title Speaker Where Wed 11:30 AM B8086: Office 365 as a platform: Reach 100 million Microsoft Office users with your web applications Rob Howard Tristan Davis WSCC Room 608 (614) Wed 02:00PM B8059: Introducing the Microsoft Teams Developer platform: Integrate your app to enable higher performing teams Bhrighu Sareen Jigar Thakkar WSCC Hall 6C (740) Wed 03:30PM B8015: Microsoft Graph: Build better apps with the API to your organization Yina Arenas WSCC Room 612 (359) Wed 05:00PM B8016: Build file collaboration and sharing experiences with OneDrive, SharePoint and Microsoft Graph Martin Alonso Rob Maguire Ryan Gregg TCC L3 Tahoma 3 (639) Thu 01:00PM B8032: Create the modern workplace with the SharePoint Framework Daniel Kogan Vesa Juvonen Thu 02:30PM B8053: Engage more users by bringing your apps to Microsoft Outlook web, mobile, and desktop Jyoti Pal Wey Love TCC L3 Tahoma 2 (378) Thu 04:00PM B8905: Open Q&A: Hear from experts from Office 365, SharePoint, Microsoft Teams, and Microsoft Graph Pedro DeRose WSCC Hall 4C-4 (385) Thu 05:30PM B8064: Integrate presence, chat, audio, and video into custom apps with Skype for Business Andrew Bybee Fri 09:00AM B8079: Slice, dice, and route your SharePoint documents with Microsoft Flow, Azure Logic Apps and Microsoft PowerApps Kerem Yuceturk Merwan Hade TCC L3 Tahoma 5 (200) Fri 10:30AM B8033: Give Your Conversations Superpowers – Building Intelligent Bots for Skype Steven Abrahams Oren Jacobs Visit our booths and quick start challenges!