Yes, you can use Modern React on SharePoint 2016

Audience: developers.

While we are following the Microsoft 365 buzz in conferences and on social media, many organizations are still on an older platform, such as SharePoint 2016. I expect that many of you in this case are looking to migrate to the Cloud, in particular government agencies with the return of the JEDI contract.

SP 2016 site owners have been relying on the Content Editor Web Part (CEWP) or the Script Editor Web Part (SEWP) for page customization. Neither is available in modern SharePoint Online, and a transition roadmap is needed.

Let’s start with the good news. In recent years, the Microsoft 365 platform has embraced JavaScript, bringing in its own typed flavor called TypeScript. It can be used on SharePoint of course but also in Teams, Outlook, Power Apps or Power BI. In SharePoint and Teams, the points of entry are called the SharePoint Framework (aka SPFx, version 1.12 expected in February) and the Microsoft Teams Toolkit. Since 2019, Microsoft has also embraced React as the main engine for its client side frameworks, and consolidated its UI library under the Fluent UI brand.

That’s very exciting news for SharePoint Online users, but what if you are still on SharePoint 2016?

Microsoft included SPFx in a SP2016 upgrade back in 2018. That made the migration to the cloud straightforward:

Now the not so good news: in 2019 and 2020, Microsoft kept upgrading the SPFx in the Cloud, but didn’t bring any improvement to the 2016 platform. That makes the migration more challenging than it used to:

Hugo Bernier has an excellent compatibility matrix that shows us SP 2016 is restricted to v1.1 and SP 2019 is restricted to v1.4.1, while SP Online has skyrocketed to v1.11. In practice, it means that neither 2016 nor 2019 can leverage the recent versions of React with hooks.

While the above diagram describes the standard roadmap, I’d like to offer another perspective. Instead of getting stuck on premises with old React, here is a different roadmap I suggested in a recent project:

Instead of SPFx 1.1, the idea is to simply leverage the Content Editor Web Part (CEWP) or the Script Editor Web Part (SEWP), which can host any script including modern React. It means that developers can already build , on premises, solutions that leverage modern scripting such as hooks or Fluent UI. In a migration the code can then be transferred to SPFx 1.11.

There’s a number of challenges with this approach and, although it worked in my case, it won’t fit every scenario.

  • First, SPFx comes with a Yeoman scaffolding tool that sets up the dev environment for you. Without SPFx you’ll have to find another way. Fortunately React offers a number of options, including the Create React App toolchain that I used. Version 4 was released on 10/23/2020. Compared to SPFx, it doesn’t come with SharePoint integration, such as no publishing or workbench. Also, there is no built-in property pane. It is not completely foreign to the Microsoft 365 universe though: the Microsoft Teams dev team has chosen Create React App as the foundation of the Microsoft Teams Toolkit.
  • Because you are leveraging the CEWP/SEWP, it also means that site owners will have access to the underlying code. SPFx does a better job at encapsulating the code.
  • As it is the route less travelled, you’ll also have difficulties finding code samples. But to be fair, recent SPFx samples won’t work on SP 2016 either.

If you are still developing on SharePoint 2016, hopefully this article will encourage you to get off the beaten path, and get better prepared for both SharePoint Online and Microsoft Teams. Feel free to share in the comments your challenges and successes!

New terminology in the Power Platform dataverse

Microsoft recently pushed several terminology updates to the Power Platform.

Dataverse is the new name of the Common Data Service, the database leg of the Microsoft Power Platform. Its lightweight version that runs in Microsoft Teams is now called Dataverse for Teams.

Earlier this month, Microsoft already made terminology updates:

Legacy termCurrent term
Entity, entitiesTable, tables
Field, fields
Attribute, attributes
Column, columns
Record, recordsRow, rows
Option set, multi select option sets
Picklist, picklists
Choice, choices
Two OptionsYes/No

Notice how the new terms match the Microsoft Lists terms.

Check out the Microsoft docs for more details.

Trick or treat? Group items by month in Microsoft Lists

Objective: get documents or list items grouped by month. It could be for example invoices, receipts, or meeting minutes. For the above screenshot, I used the “Travel requests” template available in Microsoft Lists.

The challenge is to get the months in chronological order rather than alphabetical order, for example January-February-March-April rather than April-February-January-March.

This post is actually an update for Microsoft Lists of a SharePoint trick I posted 7 years ago. It still works! For a full explanation of the trick see the original article. I’ll only repost here the final formula for the calculated column:

=REPT(" ",13-MONTH([Travel start date]))&TEXT([Travel start date],"mmmm")

In the above formula, “Travel start date” is a column of type date that comes with the Microsoft Lists template.

You’ll probably want the year too. For this you can use another level of grouping, or just include it in the formula:

=YEAR([Travel start date])&" -"&REPT(" ",13-MONTH([Travel start date]))&TEXT([Travel start date],"mmmm")

The result:

If you are not familiar with calculated columns, you can check out an introduction I wrote… 12 years ago. It seems that the rewriting of the official documentation is still in progress, when there’s an update I’ll share it on this blog. In the meantime feel free to post your questions below.

For a list of functions that can be used in formulas, see here.

A temporary message on top of your SharePoint Page

Audience: site owners, developers

I mentioned in my last post that a CEWP or its modern equivalent still have a place in SharePoint. An example is to display a temporary message, like in special occasions such as Halloween or New Year.

Before we get to the code, let me start with a couple disclaimers.

  1. Code injection can be dangerous, especially scripts. In this example we’ll only be using a few safe lines of styling (CSS) to decorate the page.
  2. There are better options for site-wide customizations, or more permanent needs such as recurring messages
  3. The customization relies on a CEWP for classic sites. On modern you’ll need to install a “modern CEWP“.
  4. I have only tested the code in Chrome and the new Edge.

Steps to our Halloween banner

  1. Get an image, and upload it to a SharePoint library users have read access to. I got mine from Openclipart which allows for unlimited commercial use.
  2. Save the CSS below to a text file and upload it to the SharePoint library, after you replace the image link with your own. You can also adjust the height and background color as needed.
  3. Insert a CEWP or “Modern CEWP” to your page and link it to the text file. Voila!
<style type="text/css">
body::before {
display:block;
width:100%;
height:80px;
background: url('https://pathto.sharepoint.com/.../pumpkin.svg');
background-color: black;
content:"";
}
</style>

Here is another example where I used #E34602 as background color:

You can also insert text, using the content property:

  <style type="text/css">
body::before {
 display:block;
 width:100%;
 height:80px;
 background-color: #E34602;
 content: "Happy Halloween!";
}
</style>

Transitioning from classic Content Editor Web Part to modern

Audience: SharePoint admins, Citizen Developers.

The Content Editor Web Part (CEWP) was a pillar of Power User and Citizen Developer work on classic SharePoint. Countless posts on this blog are dedicated to it and its siblings, the Script Editor Web Part and the Page Viewer Web Part.

With the migration to modern, the CEWP is not available anymore and site owners have been looking for alternatives.

My first advice is to clearly understand what problem you are trying to address, and look at out-of-the-box options. For example, if you need to insert some HTML in the page, maybe the Markdown Web Part has you covered? If you are trying to trigger an action, maybe Power Automate or Power Apps could fit the bill?

There are still situations where there is no easy path forward. What if you just need light adjustments to styles in the page? What if you want a news-like layout, with text wrapped around an image, like in the example below?

Microsoft’s answer is the SharePoint Framework (SPFx). The SPFx allows us to build Client Side Web Parts to complement the out-of-the-box solutions.

Several developers have leveraged the SharePoint Framework (SPFx), to release a modern version of the CEWP. Just to name a couple, check out the spjs blog or the Microsoft 365 PnP community.

I have decided to publish my own version on github. It is the first of a series of Client Side Web Parts I plan to release in the next couple months. Note that it is still in preview (version 0.9), and – like any Client Side Web Part – you’ll need an admin to install it on your environment.

But why yet another solution when there are already several available?

Beyond just offering a patch, I have a plan in mind. You’ll notice that my solution is named “Dangerous Content Web Part“, rather than “modern CEWP”. The first objective is to pass the message, and alert users on the risk when using such a Web Part. The other intent is to start working with clients on a “Safe Content Web Part” to smoothly transition out of the danger zone. If you are interested, contact me!

Walkthrough: download in bulk your favorite resources from MS Ignite

Audience: end users.

Microsoft Ignite has poured on us tons of Microsoft 365 announcements, and thankfully tons of resources to help us get started. Your first step to access those resources is to head to myignite.microsoft.com. There, you can explore the sessions, and for each you’ll get access, in the right hand pane, to a number of resources.

Notice in particular the one that says “Download Resources”. It’s actually the exact same for every session, and lets you download a PowerShell script that in turn will help you download resources.

Great and easy for a techie. For the regular business user, PowerShell can be a little bit intimidating. However, it has become an essential tool in modern Microsoft 365, where some settings get released through PowerShell first, before being surfaced in the admin or setting menus.

So let’s turn this to our advantage, and take this opportunity to get started with PowerShell and at the same time get a copy of our favorite resources.

Disclaimer: this is NOT an invitation to start downloading and running any PowerShell script available from the internet. Scripts can be harmful, especially as they can leverage your credentials. Only use trusted sources and use your own judgment. We are going to trust Microsoft on this specific one.

Click on “Download Resources” to download the zip file, and unzip it. It should look like this in file explorer:

The instructions are in the readme, let me just use an example to walk you through.

  1. First, you need to identify the sessions you are interested in, using their session code located toward the bottom of the page. Let’s pick two of my favorites:
    DB158 (Collaboration announcements)
    DB154 (Project Cortex)
  2. Back in file explorer, where we unzipped, open PowerShell from the file menu

3. You’ll get a blue screen, we’re doing just fine:

Now you can type the PowerShell command and let the script download your resources – just make sure you have room on your computer as these include large videos!

.\Download-Resources.ps1 -directory . -sessionCodes "DB158,DB154"

4. You’ll be presented with a warning, just type R and enter to run once.

5. You can now follow the progress as files get downloaded

6. We’re done! If that was your first PowerShell experience, congratulations!

The MS Ignite Book of News

Looking for the most extensive coverage of Microsoft Ignite? Still hungry for announcements even after reading my previous post and exploring the Power BI reports? (I refreshed mine at noon PST btw)

Microsoft has published the Ignite 2020 Book of News, with the goal to cover all the announcements from the Conference. You’ll wish you hadn’t asked πŸ˜‰

Thanks to Mark Kashman for bringing this to our attention in his own [always special] way.

MS Ignite: Day One Recap

As expected, Microsoft flooded us with announcements on this first day of the MS Ignite conference. I’ll only cover here my picks, on the collaboration and app building spectrum for desktop. There were a number of improvements on mobile I’ll need to get back to later. For a broader view, for example if you’re more into admin or compliance, I encourage you – just as I did yesterday – to directly browse my Power BI report. I refreshed it at 5pm PST, and won’t change until the refresh for day 2, around noon tomorrow.

I found out that there was another live report available, curated by John White. It offers a different perspective, so you can definitely explore both.

Remember that there are some contests with prizes going on. I already talked about Microsoft Mechanics Sweepstakes yesterday, but my preferred one is the Microsoft Ignite Cloud Skills Challenge which encourages you to learn.

Now to the announcements!

New Power Platform icons: the new look (see above) is more in line with the other products. You can check out the icons for yourself in your own Microsoft 365 waffle.

SharePoint Syntex: part of the broader Project Cortex, this app leverages AI and machine teaching to take on tasks such as document recognition and classification.

Project Oakdale: gives you a Power Platform like experience directly within Microsoft Teams, with the ability to create a table (up to 2 GB of data) and build a Power Apps app on top of it.
A benefit of this low-code approach, compared to a Microsoft list for example, is that it is scalable and can later be enhanced by developers.

Project Nucleus: Microsoft Lists hit back by bringing caching capabilities, promising fast response on large lists (bye bye 5,000 item limit) and the ability to work offline.

SharePoint global navigation: a new vertical bar positioned on the left hand side, similar to the experience you get in Microsoft Teams. You set it up on the Home Site.

SharePoint Framework: it now allows developers to build Microsoft Teams apps, in addition to the already available capabilities to build tabs and personal apps.

Microsoft Stream: videos are becoming first class citizens, benefiting from the same features as other files: external and anonymous sharing, integration with Microsoft Search, enhanced analytics, and new controls for security and compliance.

Microsoft Teams: a bunch of new features, including:

  • Upper limit of 25,000 members per team, instead of 10,000
  • Webinar registration
  • New search experience
  • SharePoint Home site in Teams
  • PowerPoint Presenter Mode
  • integration with github

Some more reading from Microsoft:
A new vision for Microsoft Stream
What’s New in Microsoft Teams | Microsoft Ignite 2020
Microsoft Lists Announcements

And to conclude this post, a selection of tweets with screenshots. Enjoy!
https://twitter.com/mkashman/status/1308424778252861440
https://twitter.com/Flow_Joe_/status/1308460764831784961
https://twitter.com/susanhanley/status/1308438094895603714
https://twitter.com/Path2SharePoint/status/1308495861156986880
https://twitter.com/jeffteper/status/1308429194418765825
https://twitter.com/Path2SharePoint/status/1308451066703302657
https://twitter.com/Path2SharePoint/status/1308429637970608129
https://twitter.com/Path2SharePoint/status/1308314373929091072