Create the Modern Workplace with the SharePoint Framework
•Download as PPTX, PDF•
1 like•424 views
Presentation from MS Build 2017 around latest on SharePoint Framework.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Create the Modern Workplace with the SharePoint Framework
Similar to Create the Modern Workplace with the SharePoint Framework (20)
More from SharePoint Patterns and Practices
More from SharePoint Patterns and Practices (13)
Recently uploaded
Recently uploaded (20)
Create the Modern Workplace with the SharePoint Framework
- 3. STANDALONE WEB AND DEVICE APPS EXTENSIONS EMBEDDED CANVASES Microsoft Graph
- 4. Action Task pane Dialog box Event Common across canvases Canvas specific extensions Data import Bot Connector Navigation Branding EXTENSIONS
- 8. Project Templates C#MSBuild IIS Express XAML
- 14. Web parts can raise and subscribe to events using centralized service provided from SharePoint Framework
- 15. SharePoint Framework Client-side web part Client-side web part Web part raises an event towards SharePoint Framework. SharePoint Framework will handle notification flow towards other web parts (subscribers) in the page. Client side web part can subscribe to events from the SharePoint Framework either using event name or by using instance identifier of event originator. 1 2
- 16. 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
- 17. 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) { … } } Subscribing to events based on their identifier can be done using eventAggregator available from the context. 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
- 20. 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. 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.
- 21. Field customizer to embed JavaScript code for field specific UI rendering
- 24. STANDALONE WEB AND DEVICE APPS EXTENSIONS EMBEDDED CANVASES Microsoft Graph
- 26. SharePoint Framework Add-ins • Azure AD registration • Native responsive support • Built using SharePoint Framework • … more … Additionalareas • More to come… js Extensions • Application Customizer • CommandSet Customizer • Field Customizer • … more … Webparts • Web part connections • JS Framework isolation • Maintenance mode • Workbench improvements • … more …
- 27. OpenId Connect support for 3rd party solutions
- 31. 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
- 34. 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 WSCC Room 612 (359) 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 Yina Arenas Pedro DeRose Rob Howard Tristan Davis Vesa Juvonen WSCC Hall 4C-4 (385) Thu 05:30PM B8064: Integrate presence, chat, audio, and video into custom apps with Skype for Business Andrew Bybee TCC L3 Tahoma 3 (639) 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 WSCC Room 612 (359) 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 20-min Tech Talks @ Tech Talk A Visit our booths and quick start challenges!
Editor's Notes
- We want to move from the products to a more developer-oriented view of Office as a platform. The apps on slide 2 are merged into Office canvases, and then split out based on the type of “canvas”. Developers can extend the User experience around these canvases by adding new commands, task panes, dialog, etc. Within the canvas, they can add in custom, dynamic blocks of content. We’ll have a deeper dive on both of those in subsequent slides. In addition, developers can build standalone web and device apps that are peers of our Office apps. From both standalone apps and extensions to Office apps, developers can connect to Office data through the Microsoft Graph. Build smarter apps by connecting to Office services Microsoft Graph is the API for accessing data and intelligence in the Microsoft Cloud Our own apps use the graph, and third-party applications can take advantage of it as well, to give their applications rich context, deep insights, and real-time awareness about the business-critical data within an organization, including people, documents, calendars, mail, and devices Embed Office canvases in your own standalone apps Some Office canvases are also embeddable in your own web and device apps Embedded documents Voice / video conversations Embedded calendars Make your solutions a native part of Office canvases Office apps have a collection of unique canvases for different modes of digital work: content authoring, conversations, sites/portals You can extend the UI that surrounds these canvases with things like commands, on-object UI, task panes, dialogs, etc These extensions are based on simple, open, web technologies Office automatically adapts these extensions to the right experience, depending on the app and platform where they appear. For example, a command in Outlook desktop shows up as a button in the ribbon, while it shows up in a separate menu in Outlook mobile We support a continuum of extensions, from simple, declarative extensions, to fully-custom experiences that require imperative code Each of these canvases also supports extensions that are unique to their experience Documents Conversations Bots Connectors Input Extensions Pages You can also extend the canvases themselves with custom content This custom content can be as simple as text or a static image, or it can scale up to fully custom HTML and JavaScript-powered content, depending on the needs of your scenario
- We want to move from the products to a more developer-oriented view of Office as a platform. The apps on slide 2 are merged into Office canvases, and then split out based on the type of “canvas”. Developers can extend the User experience around these canvases by adding new commands, task panes, dialog, etc. Within the canvas, they can add in custom, dynamic blocks of content. We’ll have a deeper dive on both of those in subsequent slides. In addition, developers can build standalone web and device apps that are peers of our Office apps. From both standalone apps and extensions to Office apps, developers can connect to Office data through the Microsoft Graph. Build smarter apps by connecting to Office services Microsoft Graph is the API for accessing data and intelligence in the Microsoft Cloud Our own apps use the graph, and third-party applications can take advantage of it as well, to give their applications rich context, deep insights, and real-time awareness about the business-critical data within an organization, including people, documents, calendars, mail, and devices Embed Office canvases in your own standalone apps Some Office canvases are also embeddable in your own web and device apps Embedded documents Voice / video conversations Embedded calendars Make your solutions a native part of Office canvases Office apps have a collection of unique canvases for different modes of digital work: content authoring, conversations, sites/portals You can extend the UI that surrounds these canvases with things like commands, on-object UI, task panes, dialogs, etc These extensions are based on simple, open, web technologies Office automatically adapts these extensions to the right experience, depending on the app and platform where they appear. For example, a command in Outlook desktop shows up as a button in the ribbon, while it shows up in a separate menu in Outlook mobile We support a continuum of extensions, from simple, declarative extensions, to fully-custom experiences that require imperative code Each of these canvases also supports extensions that are unique to their experience Documents Conversations Bots Connectors Input Extensions Pages You can also extend the canvases themselves with custom content This custom content can be as simple as text or a static image, or it can scale up to fully custom HTML and JavaScript-powered content, depending on the needs of your scenario
- Developers can embed customer content into our canvases, and they can choose any point along a continuum of increasingly complex and capable technologies, depending the needs of their particular scenario. This slide is essentially a drill-down into the white boxes on slide 4. [tristand] we should figure out how we note that many of the extension surfaces also follow this continuum (e.g. task panes, tabs, dialog boxes)
- Over the past several years, with the evolution of Office 365, development of SharePoint solutions has encountered a new set of challenges: while on one hand IT and Tenant administrators require a new set of tools to control how data get accessed and consumed in their tenancies, developers, on the other hand, want to programmatically control the whole lifecycle, experience, and data access capabilities of a Site. Unfortunately, developers today find themselves constraint around building app parts as a result of iFrames, a reduced set of APIs, and no integration with cross Office 365 workloads. This in turn limits their ability to develop powerful portals that extend SharePoint. The client-side development framework will deliver capabilities that will help both first party and third party developers build powerful, rich applications and provide an enjoyable web experience in Office 365 for end users that are both intuitive and simple to consume.
- We want to move from the products to a more developer-oriented view of Office as a platform. The apps on slide 2 are merged into Office canvases, and then split out based on the type of “canvas”. Developers can extend the User experience around these canvases by adding new commands, task panes, dialog, etc. Within the canvas, they can add in custom, dynamic blocks of content. We’ll have a deeper dive on both of those in subsequent slides. In addition, developers can build standalone web and device apps that are peers of our Office apps. From both standalone apps and extensions to Office apps, developers can connect to Office data through the Microsoft Graph. Build smarter apps by connecting to Office services Microsoft Graph is the API for accessing data and intelligence in the Microsoft Cloud Our own apps use the graph, and third-party applications can take advantage of it as well, to give their applications rich context, deep insights, and real-time awareness about the business-critical data within an organization, including people, documents, calendars, mail, and devices Embed Office canvases in your own standalone apps Some Office canvases are also embeddable in your own web and device apps Embedded documents Voice / video conversations Embedded calendars Make your solutions a native part of Office canvases Office apps have a collection of unique canvases for different modes of digital work: content authoring, conversations, sites/portals You can extend the UI that surrounds these canvases with things like commands, on-object UI, task panes, dialogs, etc These extensions are based on simple, open, web technologies Office automatically adapts these extensions to the right experience, depending on the app and platform where they appear. For example, a command in Outlook desktop shows up as a button in the ribbon, while it shows up in a separate menu in Outlook mobile We support a continuum of extensions, from simple, declarative extensions, to fully-custom experiences that require imperative code Each of these canvases also supports extensions that are unique to their experience Documents Conversations Bots Connectors Input Extensions Pages You can also extend the canvases themselves with custom content This custom content can be as simple as text or a static image, or it can scale up to fully custom HTML and JavaScript-powered content, depending on the needs of your scenario