SPFx web parts on classic SharePoint

Posted 13 June 2018 12:00 AM by Matthew Sammut, Business Productivity Lead Consultant @ ClearPeople

Classic SharePoint vs Modern SharePoint from a technical point of view

Classic SharePoint has been around since almost 2002 and throughout the years Microsoft have improved the end user experience by adding new features and improving the look and feel while still relying on the same underlying technology. With Modern SharePoint, Microsoft built the new experience from the ground up based on a new framework which is more in line with today's technologies and other supporting frameworks ensuring that SharePoint will be a reliable platform for many more years.

Modern SharePoint has an impact on other areas and not just from a technology point of view. It requires new approaches for dealing with the Information Architecture. Have a look at my colleague's blog, explaining how Modern's SharePoint will become a disruption stories and how ClearPeople offerings can assist your company with the change.

Customisations on classic SharePoint rely on a custom master page to deliver a branded site, custom page layouts for improved page templates and custom web parts for delivering additional functionality. With Modern SharePoint, you cannot have custom page layouts or a custom master page which may sound very limiting. However, Microsoft are working hard on alternate solutions for delivering customisations such as custom site designs, placeholders for custom extensions and custom web parts.

Even though custom web parts are possible for both Classic and Modern SharePoint, it is important to point out that for Modern SharePoint, custom web parts are different as they have to be client-side and based on the new SPFx framework. In order to ease the transition from Classic to Modern for our clients in the future, we are investing time to build new web parts using SPFx and be compliant with modern frameworks even when using Classic SharePoint. 

Yes, that's right, SPFx web parts do work on classic SharePoint and can be added to a traditional publishing page just like any other web part. There are a few differences of course; you still need to save web part properties explicitly before they are applied to the web parts, however, other than that the web part itself will pretty much work the same way. 

Using SPFx web part on a classic page

The cool part is that there are no differences when building the web part and Microsoft is taking care of making the old templates compatible with SPFx. This means that you can easily follow the new standards when creating new SharePoint client-side web parts using the new SPFx framework. Note, that for the more complex scenarios, one must still be careful in case there are dependencies which may not be available on a classic publishing page. However, in principle this works very well!

Basically, once the web part is ready, packaged and deployed to the app catalog; then just add the custom app to the sub-site from Site Contents. This will make the packaged web parts available from the web part gallery.

Classic SharePoint vs Modern SharePoint 1

Once added, content administrators can find the web parts in the web part gallery and use them like any other traditional web part.

Classic SharePoint vs Modern SharePoint 2

First thing you can notice is a new section which shows automatically; 'Configure web part'. On clicking the configure button within this section, it will open the custom property pane which allows you to configure the web part.

Besides, the web part has the usual standard properties found within the Appearance, Layout and Advanced sections. 

Classic SharePoint vs Modern SharePoint 3

The custom property pane below is then used to update the web part properties. This property pane is what you would get immediately if you add the web part to a modern page.

Classic SharePoint vs Modern SharePoint 4

Voila! Once that's done, you can see the updated description below.

Classic SharePoint vs Modern SharePoint 5

Using PnP to deploy client-side web parts

Another nice thing is that new client side web parts can be deployed to pages pretty much the same way as traditional web parts.

At ClearPeople we use latest PnP framework and other technologies recommended by Microsoft and approved by the SharePoint community to ensure compliant and future proof solutions. If your organisation needs help getting started with SharePoint Online we can guide you through the journey. Give us a quick call and we'll see how we can assist.


Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath