ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
Download as PPTX, PDF•1 like•894 views
The document contains an agenda for a conference with topics related to SharePoint, Microsoft Graph, and Office 365. The agenda includes sessions on SharePoint Framework, building portals, provisioning assets, Azure Functions, and Microsoft Graph. Breaks are scheduled between sessions. Speaker bios are also included at the end.
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
- 2. ♡ ♡
- 3. Agenda for today • 9:00 – 9:30 – Overview and introductions - Vesa • 9:30 – 10:30 – SharePoint Framework for solution architects - Vesa • 10:30 – 11:00 – Break • 11:00 – 12:00 – Building portals with modern SharePoint experiences - Paolo • 12:00 – 13:00 – Lunch • 13:00 – 13:45 – Transforming classic experiences to modern - Bert • 13:45 – 14:30 – Provisioning SharePoint and Office 365 assets - Erwin • 14:30 – 15:00 – Break • 15:00 – 15:30 – Using Azure Functions as your business logic layer - Radi • 15:30 – 16:15 – View and column formatting - Chris • 16:15 – 17:00 – Microsoft Graph - Laura
- 6. Teamwork Content Processes Email and Calendar App Elements Microsoft Teams Office Apps and OneDrive SharePoint Outlook Flow and Planner Lists, Search & App Hosting in SharePoint Microsoft Graph Microsoft Identity People & Teams Pages & Sites Windows 10 App Experiences
- 7. 18 trillion Microsoft Graph nodes 180 million monthly active users of Office 365 commercial 90% Fortune 500 1 billion users across work, life and edu 100 billion Microsoft Graph requests per month 1 million monthly active apps using Microsoft Identity Your tailored experiences or customizations
- 10. SharePoint Framework usage growth curve
- 12. SharePoint Framework (SPFx) Extensions Application customizer Command set Field customizer Add script to modern pages Adjust top and bottom sections of page with custom renderings Extend the modern list command surface with new actions that run custom code Visualize data inside columns in the list view Extend the user experience of SharePoint, leveraging the familiar tools and libraries for client-side development coming from the SharePoint Framework.
- 13. Toolkits for Sketch/Figma Code for Fabric Core and Fabric React UI Fabric Documentation for uifabric.io
- 14. PnP SPFx reusable open-source controls React content controls Use in the web parts and extensions sharepoint.github.io/sp-dev-fx-controls-react sharepoint.github.io/sp-dev-fx-property-controls Property pane controls Configuration options
- 15. Teams TabsApp pagesWeb Parts Office add-ins* SharePoint Framework platform Extensions
- 16. SharePoint Framework in different services
- 17. SharePoint Framework Architecture For 3rd party components Support ALM capabilities REST APIs and UX Hosted in SharePoint Provides context pre-fetch data TypeScript libraries Handles load Handles execution Gives access to Web APIs Serves AAD access tokens Wraps to ADAL.js Integrated in Yeoman IDE agnostic Uses Node and NPM
- 18. SharePoint Framework Evolves Constantly
- 19. Tenant wide deployment of SPFx extensions
- 20. Enable developers to build SPFx based Tabs solutions Full Teams context and SDK available at development and run time Hosting, authentication, and API access handled by SharePoint directly Full support for rich clients Develop Teams Tabs using SPFx
- 21. Enable developers to build SPFx based Tabs solutions Full Teams context and SDK available at development and run time Hosting, authentication, and API access handled by SharePoint directly Full support for rich clients Develop Teams Tabs using SPFx
- 22. Building Tabs using SPFx Development Model Enable developers to build SPFx based Tabs solutions Full Teams context and SDK available at development and run time Hosting, authentication, and API access handled by SharePoint directly Full support for rich clients
- 23. Partners who were involved in the preview program and contributed on the design Microsoft Teams tabs with SharePoint Framework partners
- 24. Uses the same infrastructure / package as Microsoft Teams Supported both as Web Part and App Page Provides the SharePoint Page Context as part of the SDK Requires minimal or no changes to existing solutions Supports both js/client solutions as well as traditional server-side solutions (.Net / C# or even Python) "Teams" Provider Hosted Solutions in SharePoint
- 27. Partners which Solutions work on Teams and SharePoint TODAY "Teams" Provider Hosted Solutions in SharePoint
- 28. Teams Solutions in SharePoint
- 29. A Full Modern Page with pre configured application content and no authoring experience – only optional configuration Created as part of the “new Page” flow, or viewed using a query string driven _Layouts page. Uses the same “chrome” as other pages in the site Supports all the same extensions as authored pages App Pages
- 32. App Pages in SharePoint Online
- 33. Code runs in an auto-generated domain w/ different API permissions than the main tenant, and is iFramed into the main page Same context as the hosting page Framework handles AAD App registration and permission scopes and authentication Support for Web Parts, App Pages and Teams tabs Useful for a Web Part that needs extra permissions (mail.read) or a Web Part that wants extra protection (other parts can't access your back end data) Domain Isolated Web Parts
- 34. Few architectural discussion points on common discussion topics…
- 35. Web API end point WebAPI https://connection.contoso.com Custom On-prem LOB System SPFx Call WebAPIs hosted in Azure securely using the corporate identities. Identity flows through as an access token, which is verified as WebAPI is secured with Azure Active Directory. SQL Azure Multiple different options on accessing relevant data from the on- premises using Azure technologies Surfacing business information in SharePoint Online
- 36. SPFx Adjust data presentation loading based on user profile information stored in oob profile properties or in custom properties js User Profile service There is no 3rd party audience capability currently available for SharePoint Framework, so implementation will need to be web part specific and typically based on user profile attributes. Personalization with the SharePoint Framework solutions
- 37. Currently in development / planning – Coming soon…
- 38. Using SPFx for building Personal tabs Like group chat tabs, developers target Personal tabs using supportedHost property in the manifest Manifest in Teams gets generated automatically from SharePoint App Catalog In Teams, all personal tabs surface as static tabs: no configuration capability is provided
- 39. Allow independently versioned and deployed code, to be served automatically for the SharePoint Framework components Libraries are deployed in the app catalog then they can be referenced across other components Things to be aware of: • All components in the tenant get the same instance of the library • A solution cannot contain webparts/extensions and libraries. It's one or the other. • You have to reference library components at development time from a package manager or using npm link Library Components – General Availability
- 40. Developers will target Office client using supportedHost property in the manifest Available to enterprises through Tenant Centralized Deployment Full Office SDK available at development and run times Hosting, Authentication and API access handled by SharePoint directly Some questions still to be decided: • Do we want to target different clients (Outlook / Word / WAC) as supportedHost or leave that to the developer? • How do we work with the enterprise office add-in catalog? • Office Manifests are complex. We'll need a way to make it easy to incorporate them into the solution. Using SPFx for building Office Add-ins
- 41. Strongly Typed Extensions for Modern Portals Navigation Data Extension Developer get the default navigation data from the site They can change that data in any way they wish The page is responsible for rendering the new nodes using the normal rendering
- 42. Strongly Typed Extensions for Modern Portals Navigation Rendering Extension Developer get the navigation data and a pre-created DIV. They are responsible for rendering the new nodes in the DIV Doesn't allow for changing the size or location of navigation. Doesn’t allow removal or customization of Hub nav for hub connected sites
- 43. Strongly Typed Extensions for Modern Portals Footer Extension A way to replace our existing footer with custom code In pages where footer doesn’t exist this extension will not run Loading extension code will happen after the OOB components load
- 44. Support for WebPack 4 Smaller packages / node_modules Faster inner loop Reduce Logging in debug console Developer Tools Improvements
- 45. A developer technology for building a new class of shared, interactive experiences on the web: • support multi-person coauthoring on web and document content • provides a componentized document model that allows authors to deconstruct content into collaborative building blocks, use them across applications, and combine them in a new, more flexible kind of document • makes room for intelligent agents to work alongside humans to translate text, fetch content, suggest edits, perform compliance checks, and more Fluid Framework
- 46. Fluid Framework with SharePoint Framework
- 47. SharePoint Dev Roadmap SharePoint Dev next steps – current plans • Smaller, more rapid SharePoint Framework releases • Teams Integration Improvements • General availability of Library components • Office add-ins with SharePoint Framework • CSP – Content Security Policy • CSOM .NET Standard • Open-sourcing Yeoman generator • and more… Top of mind • Additional content extensions for modern pages • Fluid Framework • Throttling updates – Guidance • Developer tools improvements in SPFx • Store story for SPFx solutions
- 48. Views in YouTube 42,242 Unique tenants # 22,417 Unique visitors in GitHub 55, 353 (avg 2 weeks) Views in GitHub 271,219 (avg 2 weeks) Watch time in YouTube 232,251 minutes Views in docs.microsoft.com – SharePoint Dev 1,170,325 Http Requests # 15,2 Billion Most used capability - Provisioning Engine (2972 tenants) http://aka.ms/sppnp Sharing is caring!
- 51. Build SharePoint Framework extensibility Explore Patterns and Practices open- source assets Extend and integrate with Microsoft ecosystem Sign up for the Office 365 Dev Program - https://aka.ms/offdp
Editor's Notes
- #7: Objective: Reinforce our teamwork position - Microsoft 365 meets the diverse needs of teams with an integrated solution that is secure We’ve designed Microsoft 365 to meet the unique needs of every group. For each of those categories of teamwork, Microsoft 365 includes a purpose-built application. Teams as a hub for teamwork where groups that actively engage and are working on core projects can connect and collaborate Yammer for people to connect across their company, sharing ideas on common topics of interest Outlook where teams can communicate in a familiar place, and can easily create modern distribution list with groups in Outlook SharePoint for keeping content at the center of teamwork, making files, sites and all types of content easily shareable and accessible across teams Office Apps – enabling co-authoring in familiar apps like Word, Excel, and PowerPoint With these tools coming together in Microsoft 365 – teams get a holistic solution. What’s unique about teamwork in Microsoft 365 is that all of these applications are built on an intelligent fabric - suite-wide membership service with O365 Groups; suite-wide discovery and intelligence with Microsoft Graph, and suite-wide security and compliance. Office 365 Groups - A membership service providing a single identity for teams across Office applications and services Microsoft Graph - Suite-wide intelligence that maps the connection of people and content to surface insights Security and Compliance - Proactive security that simplifies IT management with intelligence built-in
- #10: 2169917126 to
- #19: WebParts Extensions Services available on all components Life cycle events (onInit) Context object (this.context.*) Various HttpClients (SharePoint, Graph, AAD, Generic) Service Scopes (a way to share services across components) Dialog framework Placeholders Well known divs on a page that are reserved for 3rd party use May or may not be present on a given page May or may not be present on a given view (say mobile) Available to any component (but often used in the Application Customizer Extension) Placeholders != Extensions. There is no “Top” extension, but there is a “Top” placeholder Default UX provided by framework, expandable by developer Integrated in the Property Panel
- #33: Create a "new Page" app page Static _layouts aspx app page
- #35: Mail web part on Page and in Teams