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.

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/jquery@2.0.48 --save-dev

15. Demo

16. Reusable Controls

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