Building Responsive Intranet using Sharepoint Framework solutions - Asish Padhy - Sydney Meetup Jan 2018
Download as PPTX, PDF0 likes410 views
This document discusses building responsive intranet solutions in SharePoint modern experience sites using the SharePoint Framework with React. It outlines some modern experience customization challenges and intranet possibilities. The SharePoint Framework is introduced as a way to create client-side web parts and extensions to integrate with modern pages. Tips are provided for using React and Office Fabric/Bootstrap in SPFx solutions. A demo is included.
Ad
More Related Content
What's hot (20)
Similar to Building Responsive Intranet using Sharepoint Framework solutions - Asish Padhy - Sydney Meetup Jan 2018 (20)
Ad
More from Asish Padhy (7)
Ad
Recently uploaded (20)
Building Responsive Intranet using Sharepoint Framework solutions - Asish Padhy - Sydney Meetup Jan 2018
- 1. Building Responsive Intranet Solutions in SharePoint Modern Experience Sites using SharePoint Framework with React Asish Padhy
- 2. About me - SharePoint, Office 365 and Azure Solutions Consultant at Kloud Solutions - 12 years of experience working on SharePoint and MS Technologies - I am a Consultant, Architect, Project Lead and always a Developer. - Microsoft Certified Professional in SharePoint https://www.linkedin.com/in/asishpadhy https://asishpadhy.com https://blog.kloud.com.au/author/asishpadhykloud/ @asishpadhy
- 3. PnP Updates
- 4. Modern Experience Features • Inbuilt Responsive and Mobile design support • Support for client end frameworks for development • Contain native news, quick links, and activity capabilities through pre-built web parts • ModernTeam Sites support Groups features • Tenant wide fast deployment support
- 5. Modern Experience Customization Challenges • MS list of limitations - https://docs.microsoft.com/en-us/sharepoint/dev/solution- guidance/modern-experience-customizations-customize-sites • No custom master page support • No direct access to master page elements. Indirectly through Javascript or JQuery scripting. JQuery can be used to locate static div • Hard to use CSS extensibility when trying to use children. Use ‘aria-label’ property if want to • No availability to create in place navigation menu items for current navigation or left hand navigation.Cannot realign navigation or header items • No support for SharePoint hosted apps and Provider hosted apps • React routing makes it hard to put a handler for events
- 6. Intranet Possibilities ? • Communication Sites • For full content layout ( the home layout in team sites doesn’t give full content layout • Easy to use user managed multi level navigation (it is quick launch of classic sites, so will not inherit navigation to children) • Current update of News posts - Link • Gives the most closest experience to Intranet • Cannot update publishing feature (Dec 2017) • ModernTeam Sites • Group Options – Conversations, email alias, outlook integration • Managing members is different than Classic Sites • Can enable publishing feature • Completely different lifecycle
- 7. Intranet Possibilities? • ClassicTeam Sites with Modern Pages • Hybrid solution • Keep content in classic team sites to take advantages of functionalities • Get more control in customizing master • Create Modern pages and use modern list view, programmatically even • JS Scripting and JS Link supported
- 8. So what are our options with Modern ? • SPFx - Client Side web parts hosted and deployed through CDN • SPFx - Extension components on Header, Footer and List Menus (Not navigation bar) • Section and layout choices (cannot have custom grid layout options) • Apply SharePoint themes (new) • Apply Site Designs and Site Scripts (new) – Link • SharePoint Field Formatting (Column formatter or SPFx Field formatter) • PowerApps and Flow Integration options directly from list views • Upcoming latest OOB SharePoint client side web parts
- 9. SharePoint Framework (SPFx) ? • The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side development and open source tooling. • SPFx allows to create Client side web parts and extensions which can be integrated with Modern experience pages • SPFx integrates with React, Office Fabric UI and many other third party JavaScript and CSS Libraries (a welcome change) • Support Local development and not required connection to SharePoint
- 10. Mapping of Old approaches to the NewTooling SP Components Old Approach (On-Prem and Classic) New Approach (Modern Experience) Web Parts FullTrust Solution or Sandbox SPFx Client side web parts Apps SharePoint Hosted or Provider Hosted SPFxWPs with REST Calls or Functions Master Page Branding Custom Branding Solutions SharePoint themes Content on Pages CEWPs or Script Editor Client side web parts or Content Only Field Customization JS Link Column Formatter or SPFx field formatter List Menu Custom User Actions SPFx ListView Extension Navigation Custom Branding solution SPFx ApplicationCustomizer Extension Site Pages Page Layouts andTemplates SharePoint Online CSOM options Programming Options Server (C#,VB.Net) and Client Side Client Side Frameworks such as React, Knockout and Angular etc.
- 11. SharePoint Framework SDLC • Devs – JavaScript ,TypeScript, (not much JQuery) and SASS (SCSS) • Set up SharePoint Framework components on Local computer • Set up a debug configuration inVS Code – Install Debugger for Chrome • Deploy,Test and fix locally on SharePoint • Deploy assets to a CDN (Office 365 Public or Azure CDN) • Enable CORS with Container • Deploy package to SharePointApps Catalog • Choose betweenTenant wide and Site deployment
- 12. SPFx with React and Office Fabric/Bootstrap • Component based • Controlled and managed via States • HTML in object encapsulated • It will automatically update and render the component when data changes. • Responsive controls through Office Fabric and Bootstrap • Office Fabric React is already included as part of SPFx solution • Bootstrap needs to be explicitly included from NPM
- 13. ImportantTips • Know about the component lifecycle events in React components to prevent erroneous looping such as ComponentDidUpdate() and shouldComponentUpdate() https://reactjs.org/docs/react-component.html • Don’t update the state variables directly, use setState method for state updates • Don’t update the npm packages to their latest versions such as Jquery (~3.2) and office-fabric-ui-react. There are conflicts with latest versions • If using PnP JS modules, remember to use await or then clauses, in order to get the results before chaining the operations
- 14. Important tips • Await can only be called in Async methods. • Not everything in CSOM or Object model is directly available in PnP JS or SharePoint REST • Typescript strict rules such as object level binding and mapping • Not all versions of JQuery are supported, so might have to install particular types - npm install @types/[email protected] --save-dev
- 15. Demo
- 17. Quick Links • PnP Pattern and Practices - https://dev.office.com/patterns-and-practices • Build Documentation - https://docs.microsoft.com/en-us/sharepoint/dev/ • SharePoint Framework - https://docs.microsoft.com/en- us/sharepoint/dev/spfx/sharepoint-framework-overview • Office Fabric - https://developer.microsoft.com/en-us/fabric • Github (Client Web parts) - https://github.com/SharePoint/sp-dev-fx-webparts/ • Github (Extensions) - https://github.com/SharePoint/sp-dev-fx-extensions