Download to read offline
![Building SPFx solutions across SharePoint, Teams and more Dipti Chhatrapati Modern Workplace Architect, AIS [Microsoft Regional Director]](https://image.slidesharecdn.com/buildingsharepointframeworksolutions-191202090325/75/Building-share-point-framework-solutions-1-2048.jpg)
Building share point framework solutions
- 1. Building SPFx solutions acrossSharePoint, Teams and more Dipti Chhatrapati Modern Workplace Architect, AIS [Microsoft Regional Director]
- 2. Microsoft 365 Developerplatform User-centered Graph of tasks, content, and activities Cross-team data including teams, conversations, events Organizational data, with device and security management Keep every employee focused in the flow of work with apps that integrate key data and experiences
- 3.
- 4.
- 5.
- 6. 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
- 8. The intelligent intranet Poweringmodern employee experiences Connecting the workplace
- 9. SharePoint news keep peopleinformed and engaged with relevant news delivered across apps & devices Communication sites share news & information, resources & services, vision and knowledge across the organization Hub sites connect and organize sites based on department, division, region, or project Intranet landing pages create employee experiences and modern portals that connect the digital workplace Innovations for intranets and portals SharePoint
- 10. Landing pages &portals Curate dynamic communications Deliver personalized, relevant content Create an actionable experience Engage employees Create experiences that connect the workplace
- 11. • Session Recordings •EBooks • $50 MicroJobs Voucher • Plus other goodies ALL-ACCESS PASS ($99) Expires soon! Demo SharePoint Look Book
- 13. Create a strongpresence across your organization Open Source: • • Tailored communication sites
- 14. Documentation for uifabric.io Toolkits for AdobeXD and Sketch Code for Fabric Core and Fabric React Microsoft Office UI Fabric
- 15. PnP Reusable SPFxControls https://sharepoint.github.io/sp-dev-fx-controls-react/ https://sharepoint.github.io/sp-dev-fx-property-controls/ Property Pane Controls Use for Webpart Configurations React Content Controls Use in the Webparts and Extensions
- 16.
- 18. SharePoint Provisioning Service previewat http://provisioning.sharepointpnp.com • Currently in public preview and available to be used world wide with initial set of Look Book templates, SharePoint Starter Kit and the Custom learning solution • Enables tenant administrator to provision demo structures with actual content on their tenant (site collection administrator support coming later) • Deploys automatically needed customizations in the tenant level and configures content in the site(s) based on template • Actual templates are SharePoint Tenant Templates Engine templates which can be easily added on the service by adding them to specific GitHub repository (replication) – Tenant templates supports defining tenant scoped elements, like site collections, Teams structures etc.
- 19. Office 365 tenanttemplates—complex solution configurations Microsoft Graph / SharePoint REST API / CSOM PnP Core Extension – Actual Tenant Provisioning Engine Tenant administratorsIT Pro admins ISVs and SIs Custom Provisioning Service
- 20.
- 22. Microsoft Teams Tabs Advantageson using SharePoint Framework as the UI implementation Access to Graph Easy Graph API access even without Azure admin UI configurations Reuse same implementation One codebase to implement extensibility which works in multiple platforms Simple deployment Simple centralized deployment Automated hosting Automated hosting with optimized CDN
- 23. Tabs in SharePointPages • Uses the same infrastructure / technology as the Microsoft Teams Tab • Even same package! • Logical successor to the existing SharePoint Add-In model • A common development methodology for iFramed solutions • Supports both js/client solutions as well as traditional server-side solutions (.aspx/C# or even Java)
- 24. Demo Building Microsoft Teamstab using SharePoint Framework
- 26. Your extension Gateway Your oryour customer’s data Office 365 Windows 10 Enterprise Mobility + Security 1Microsoft Graph Building intelligent portals and collaboration platforms
- 27. SharePoint Online Office add-in built with SPFx Building Office Add-insusing SPFx To simplify deployment and hosting for developers js JavaScript Library js JavaScript Library Office 365 public CDN js Deploy SPFx solution in App-Catalogue 1 Activate SPFx solution to be available in Office 365 2 Use SPFx Solution 3
- 28. Demo Building Office Add-Ins usingSharePoint Framework https://bit.ly/2ZtjuVi
- 29. SharePoint Framework DeveloperCommunity
- 30. Building engaging extensibilitywith SPFx 1 Build SharePoint Framework web parts and extensions 2 Take advantage of our open-source projects and assets 3 Extend and integrate with Microsoft Teams and Microsoft Graph Sign up for the Office Dev Program - https://aka.ms/o365devprogram
- 31. Join the Office365 Developer Program https://aka.ms/o365devprogram Benefits Free renewable Office 365 E3 subscription Be your own admin Dev sandbox creation tools Preload sample users and data for Microsoft Graph, and more Access to Microsoft 365 experts Join bootcamps and monthly community calls Tools, training and documentation Learn, discover and explore about Office 365 development Blogs, newsletters and social Stay up to date with the community
- 32.
- 33. • Session Recordings •EBooks • $50 MicroJobs Voucher • Plus other goodies ALL-ACCESS PASS ($99) Expires soon!
Editor's Notes
- #2 Hello and Welcome everyone in my session where we will be discussing about SPFx solutions across SharePoint and Teams.I assume that half of the audience here, would have already built SPFx solutions, while rest half of the people probably gone through what is available over internet to know and learn SPFx and then some of them would have been here to know what’s going on with SPFx and in next few minutes we will talk about how SPFx works across SharePoint and Teams from the top view before your start building the solutions. My name is Dipti Chhatrapati and currently I am working as Modern Workplace Architect at Applied information science.I am also the member of “Microsoft Regional Director Program” where we discuss about direction of Microsoft technologies at very high level point of view. I have started my SharePoint journey from MOSS 2007 back in year 2009 and since then I have not left the technology but infect kept learning more about what is around SharePoint and sharing the knowledge within the community through various events. And in this session, we will not discuss deep dive about how to develop solution around SPFx, but give you an idea about what can you built or possible in modern portals with SPFx from high level prospective and give you an insights about the assets that you can use to build SPFx solutions which are easily available over the internet.
- #3 So, let’s start from the base which is a Microsoft 365 Developer Platform. Microsoft focuses on creating people centric experiences. If we consider SharePoint legacy, It was started in year 2001 and started booming from year 2007 with massive customization capabilities, but now it’s SharePoint 2019 with lot’s of capabilities and it’s transforming to be natively being cloud centric and people centric. And, SharePoint falls under Microsoft 365 Developer platform, so it is around Microsoft graph to get personalized information, or showing the relevant information through the SharePoint UI and take advantage of SharePoint framework that we will see in multiple demos in this session what does that mean in real practice
- #4 So the latest SharePoint framework development methodology called SharePoint framework which was actually announced 3 years ago and publicily available since last 2 and half years. It was completely a new development model and new way of doing customizations to extend experiences on top of SharePoint. Although, It was more challenging for the classic SharePoint developer earlier, because they used to do heavy customizations with xmls and wsps and lot of other ways and now with SPFx transformation, any web developer can be a SharePoint Developer as Microsoft is moving towards more open technologies which is a good thing for SharePoint Developers as they are no more restricted to SharePoint platform
- #5 Microsoft Build 2017
- #6 Now, let’s quickly recap what SharePoint framework is and then we will move to the new stuffs as well. So SharePoint framework offers modern client-side development experience so you use all open source tools like node.js,npn, your desirable javascript framework, it could be angular, knockout, jquery, it could be react as you like using which you can build an extensibility on top of SharePoint. It’s lightweight web and mobile so everything you see is natively responsive in all the devices. And most importantly, Microsoft also uses the same tooling to build the UI of the SharePoint, which has happened first time in SharePoint history. In the past, there were farm solutions what Microsoft has built using different model, and as developer we created in different way like SP packages and feature xmls, then there was a SharePoiont Add-In model which was completely extensibility model, but Microsoft has not used that to make it available for us, however with SharePoint framework, Microsoft uses, exactly the same code base and API , then extensibility and versions which we use to extend the SharePoint functionalities and that’s a game changer because that means, there will not be any new model in coming years Then, it’s a backward compatible, meaning if you are building anything on SharePoint framework version 1.0, It will still work in SharePoint online even after 2/3 years from now which is one of the important factors as well of choosing SharePoint framework for development. And finally it supports modern way of doing extensibility and JavaScript implementation, meaning you are free to choose which framework you want to use although Microsoft uses react in the SharePoint engineering as that was chosen framework from the beginning for them, but we can really use any new javscript framework
- #7 Now, apart from developing the SharePoint framework webparts, SharePoint framework offers the capability called SharePoint Framework Extensions, so that you can embed JavaScript in the UI areas of the page, and there are many place holders and locations where you can place your functionalities on the page.So, it’s not only about adding webpart on the page, but you can develop headers, and footers and other functionalities for SharePoint through modern capabilities. And then there are command sets to add menu buttons and list view buttons, so when you are selecting an item, you can click the button and then execute the javascript and make a call to backend or call azure functions and execute over the selected item and then field customizers for rendering the UI at field level.
- #8 However now we have industry standard tooling for building SharePoint functionalities, but obviously when we are building something for SharePoint, there is always one thing to consider that there are already lots of out of the box capabilities which can be used in few clicks to implement your business requirement.
- #9 As SharePoint which is now The intelligent intranet for collaboration through various tools around it such as Yammer,Streams,Teams and other Microsoft 365 products and is completely modernize as well to power UI experiences for more better engagement.
- #10 9
- #11 On landing pages, there are lots of functionalities such as adding news, events and highlighted content webparts, you can then further down configure them to display relevant content. You can have more personalize experiences such as my documents, my emails or my calendars through out of the box functionalities and this way it exposes relevant information of the employees in the organization which is the core of the SharePoint
- #13 Alright so these were the out of the box functionalities and SharePoint look book is a great asset for finding what’s available out of the box. But this is more developer focused summit and you must be interested what is the development opportunities as partner or developer and how SharePoint Framework is related to this conversation ?
- #14 So SharePoint is really around those modern portals and there are multiple ways of extending those modern portals by adding webparts, custom headers and footers, embedding JavaScript including custom extensibilities based on business requirements. There are quite a lot of open source projects and experiences which you can adopt when you are building experiences for your customers. There is a starter kit as well and then there is SharePoint patterns and practices initiative with multiple projects available for you to take advantage from where you can get an idea of coding and experiences possibilities. And there are lot of partner solutions available which you can directly use from there, if you do not want to spend your own time to build extensibilities.
- #18 Now, let’s move back to the slides, we have seen quite a few demos and walk through and some of the cool ideas like SharePoint look book and SharePoint starter kit is pretty cool, so as a consultant you can really use this to demonstrate your customers about nice looking User interfaces of SharePoint However, wouldn't it be great, if you could add those SharePoint Look Book and Starter Kit templates easily to any tenant for demonstrational purposes?
- #19 So for that, there is a SharePoint provisioning Service, which lets you add samples, templates and solutions to your Office 365 tenant.It provisions content and configuration for site collections, sites, and tenants as documented in each sample, template and solution. So this provisioning service is hosted by Microsoft, but it’s supported by SharePoint community, so this is really open source again and if you need any guidance or support, just submit an issue on github. So, I think this is really pretty nice asset to use as developer. This service behind the scene uses Tenant Templates Engine that gives you an ability to define in one file, about the site collection, then Microsoft teams structure provisions, then Microsoft Channels and tabs to give you more insights which are then part of the template definition. It's just a one file, which you apply on a tenant and then you have a look for what you were looking for. So I encourage you to look at this cool and quick provisioning service
- #20 Now, the templating model which I just mentioned is something you can take advantage not only using the provisioning service , but also in your code. So this provisioning engine behind the scene is used to create site collection, use for creating Microsoft teams and tabs, then configurations and branding, you can also deploy solution packages for the tenant. This is available as nuget package and you can also call in PowerShell as well, so it’s actually upto you, how do you want to take an advantage of this engine. , basically pretty much similar as pnp provisioning engine.
- #22 So let’s get back to the slide and we have talked about the SharePoint framework, we have talked about the modern experiences and now there is a Microsoft Teams, a hot collaboration tool for the team work and it comes with really cool extensibility model as well. There are more and more customers now moving to Microsoft teams. If we think about the role of SharePoint and Microsoft Teams, we always had confusion whether it’s overlapping or not, however , technically every single file which you see in teams, is being stored in SharePoint, and actually lot of other experience what you see in Microsoft teams is really backed by SharePoint behind the scene. And since Microsoft already had existing cool SharePoint Framework model, Teams has adopted the same tooling for it’s customization in teams tab.so now, SharePoint and teams is having same consistent experience and same development experience
- #23 22
- #26 That’s awesome! – so same code base can work in both SharePoint and in Microsoft Teams and Implement once for the Office 365 level. However, what about the other stuffs in Microsoft Office 365?
- #28 So Microsoft is currently working on that for Office applications and will be soon available for the preview which supports to build office add-ins using the same SPFx tool chain and capabilities. So the objective of building office-addins with SPFx is to simplify deployment and hosting for developers, it will remove requirements for Azure AD specific apps or configurations through Azure Admin UI, so basically you will not be more dependent on Azure AD. For example, we think that we have Azure AD Subscription, but if we look at the enterprise scenario and their permission models and processes, it takes times, but there is a SharePoint Online, so why not taking advantage of hosting customizations in SharePint? Now, Office add-in application exposed in the Office product as a panel. JavaScript Solution Assets are hosted in SharePoint and published to Office clients using standard Office model. Only referenced URL for the manifest points to SharePoint. So there are three simple steps: Deploy the SPFx solution in App- Catalogue at tenant level which is a Typical options to install and host SPFx package file Activate that to be available from tenant app-catalogue in Office 365 Solutions Take advantage of all the goodies of SPFx such as asset packaging, CDN configuration, asset provisioning, native Microsoft Graph access with admin governance, custom 3rd party API access etc, then storing and accessing data from the SharePoint list if required.
- #30 Now, if you are interested in SPFx awesomeness and want to know more about what’s happening with SPFx there is once a week SPFx community call you can join and all of these information is available at aka.ms/sppnp that will redirect you to the in depth information about the SPFx community and related assets. SharePoint Framework Community is built under three principals – learn, reuse and share, It’s all about learning through Microsoft documentations, reusing as per your ideas and insights and share back to benefits of others
- #31 Now, if you are a begineer and want to know how to get started with SharePoint Framework. Build SPFx solutions such as webparts and extensions Use open source projects and assets from the github Finally deploy and integrate with SP And teams via Microsoft graph
- #32 Another reminder is Sing up with Office 365 developer program to acquire office 365 tenant for an year if you don’t have one. And this will automatically renew, if you are only using as a development purpose. With this benefit, you will get the platform to build application for your practices and stay upto date with the community and events around office 365 development.
- #33 And, that’s it form my side and I hope you have enjoyed this session, Thank you so much for being here to learn and grow