Build SharePoint Framework solutions for on-premises SharePoint with ANY version of React, TypeScript or Office UI Fabric React

Any version? -Yes, any. Including the latest versions of React, TypeScript, etc. ? -Yes.

The problem

SharePoint Framework is supported not only by SharePoint Online but by on-premises SharePoint as well (2019 and 2016 with Feature Pack). SharePoint Framework Yeoman generator has different options for different SharePoint versions and it generates different project templates depending on the environment selection.

On-premises SharePoint is always behind SharePoint Online in terms of features and codebase. And the same issue applies to SharePoint Framework. If you generate a "Hello world" SharePoint Framework web part for SharePoint 2019, you will see that it uses React 15.6, TypeScript 2.4 and Office UI Fabric React (OUIFR) 5.21. The most recent versions (as of today, August 2019) are React 16.8.6, TypeScript 3.5.3 and OUIFR 7.21.0.

Now you see the issue - you always have to work with an older version of packages. You miss a lot of potential features, bug fixes, and other things. Additionally, from a developer perspective, it's not exciting to work with outdated technologies or frameworks. The situation will be even worse in 2020 when we see React 17, TypeScript 4 and OUIFR 8. Will Microsoft update yeoman generator for on-premises to add support to the most recent version of packages? I don't think so. On-premises are not in the priority list today. 

For those who want to jump and explore the code right away - the full source code for this post is here at GitHub. More...

Introducing SP Formatter: a Google Chrome extension which enhances your SharePoint Column (View) formatting experience

Column formatting allows you to customize look and feel for columns and views in modern SharePoint. That's a cool feature and gives you a lot of space for applying nice styling for your SharePoint data. It's called column formatting despite that you can customize views as well. You do not have to be a developer to use column formatting, yet you should have some knowledge of CSS and HTML. To learn more about this feature please read Use column formatting to customize SharePoint and check out an awesome list of community samples around column formatting.

To apply formatting, you should enter a special JSON into the textarea on a SharePoint list page. There is one thing here which I don't like very much. As a developer, I expect that column formatting experience provides code suggestions (also called intellisense in developer world), live preview, search and replace, brace matching and some other things available in a normal integrated development environment. You can partially improve the situation if you edit your formatting JSON in Visual Studio Code with custom JSON schema applied. However even in that case, if you want to see how your column formatting looks like in SharePoint, you have to copy-paste it into SharePoint and click Preview, which is inconvenient. Also, the schema in Visual Studio Code lacks some additional features available in SP Formatter

Of course, default SharePoint column formatting experience doesn't provide rich editing features, because it's simply a textarea element. To improve it I created SP Formatter - a Google Chrome extension which transforms default column formatting into the full-featured editor. More...

Building Single Page Application with React, MSAL.js and PnPjs

A month ago (May 2019) Microsoft Authentication Libraries (aka MSAL) for .NET and JavaScript went GA. If you haven't heard or used MSAL before it's a good time to try it. 

Ok, what is all this stuff is about? 

A few theory here. Let's imagine you have a need to authenticate a user against organizational Azure AD. Most likely you will start looking at Azure Active Directory Authentication Libraries (aka ADAL). They help you to authenticate your application against Azure Active Directory. Under the hood, they use V1.0 Azure Active Directory endpoints for authentication. This approach is pretty old (and proven) if you have a need to authenticate work (for example Office 365) or school accounts.

What about personal accounts and social networks? It's possible to implement such authentication in your app using V2.0 endpoints. These V2.0 endpoints also called Microsoft identity platform. For new applications, it's recommended to use Microsoft identity platform. However, there are some limitations you should be aware of before starting a new application. 

v1.0 VS v2.0 (Azure Active Directory Authentication VS Microsoft identity platform)

The main differences are:

  • v2.0 adds personal accounts and social login (via Azure AD B2C)
  • v2.0 supports dynamic permissions (request permissions "on the fly")
  • v2.0 uses a "scope" notion instead of a resource like in v1.0

For the full list of differences as well as some limitation of v2.0 I really encourage you to read this article - Why update to Microsoft identity platform (v2.0)? 

ADAL vs MSAL

Now it should become clear what is MSAL. While ADAL libraries work with v1.0 endpoints (Azure Active Directory), MSAL work with v2.0 (Microsoft identity platform). Both provide libraries for convenient authentication and token generation. However, MSAL went GA only a month ago as stated at the beginning. 

Building the app

In this post, I'm going to build a SPA with react, PnPjs and MSAL.js as authentication library. Additional interesting reading here - Differences between MSAL JS and ADAL JS

The app reads information about the current user, SharePoint web site and all Azure AD groups available at a tenant and displays information in tabs. This is how it looks like when running:

The source code for the post is available here at GitHub. More...

Microsoft Flow guides: How to run a flow when a document is published?

What if you have a need to run a flow every time when a document is published in SharePoint? Out of the box SharePoint connector doesn't have "published" trigger, the only triggers are a document created or modified. 

"Send an HTTP request to SharePoint" to the rescue

While you technically can't use "Document published" trigger, you can use document updated trigger and check the status of a document using REST API. You can use _api/web/GetFileByServerRelativeUrl API to check the file state. There are some properties available for a file. The most interesting for us is below: More...

What’s new and what’s changed in SharePoint Online REST API in March-April 2019

What's new and what's changed in SharePoint REST API in March in April 2019? Explore the most interesting changes (additions and updates) here! 

Just a quick reminder, all data come from my SharePoint REST API Metadata Explorer. Go to the "API Changelog" tab and see what's changed in recent months in SharePoint REST API. 

Disclaimer

Please note, that all changes are gathered from Targeted tenant. Most likely these changes haven’t been officially introduced yet, use this post as spoilers to potential upcoming features. If you want to use APIs mentioned here in production, please check corresponding official documentation to make sure they are available.

Organizational News (aka authoritative news)

In the previous episode, I mentioned that OrgNews endpoint was added. Now, when corresponding PowerShell cmdlets (Get-SPOOrgNewsSite, Set-SPOOrgNewsSite, Remove-SPOOrgNewsSite) to manage Organizational news sources (also known as authoritative news) were announced, you can also use REST API to list all organizational news sources. However, I haven't found a way to add or remove authoritative news sources using the REST API. More...

SharePoint Framework development tips: create shortcut(s) for your common SharePoint Framework generator commands

This is a small tip for anybody who hates typing yo @microsoft/sharepoint because it's too long and error-prone (or you're lazy like me :)). Check out below animation: 

What if we can simply type sp in order to scaffold the project? Well, we are in 2019 and of course, it's possible :) 

NOTE: Solution windows users only. Sorry MacOs :(. I'm pretty sure there is an alternative for Mac as well, but I'm not a Mac user.

More...

Microsoft Flow guides: improve SharePoint modern pages approvals with Azure Content Moderation

SharePoint modern pages support approvals with preconfigured Microsoft Flow. What if we want to partially automate and improve this process with some smart services, which will automatically reject approval if a page contains not appropriate content. Or add a piece of information to an approver to pay special attention to a particular page? This is a nice place for Azure cognitive services to come into the play! 

For your convenience, the whole flow in png format is available by this link

Azure Content Moderator

Azure provides a lot of different cognitive services and one of them is Content Moderator:

The Azure Content Moderator API is a cognitive service that checks text, image, and video content for material that is potentially offensive, risky, or otherwise undesirable.

Sounds interesting! To be more precise, currently Content Moderator has below core features:

  • Detects profanity in over 100 languages. It includes profane words based on a built-in list. You have an option to provide your own inclusion or exclusion lists with your specific terms. 
  • Text classification. It detects a potential presence of language that may be considered sexually explicit or adult or offensive in certain situations. Text receives classification from 0 to 1. The higher the score, the higher the model is predicting that the category may be applicable (text is offensive or adult etc.)
  • Detects Personally Identifiable Information (PII) - any presence of emails, SSN, emails, phones, addresses in text. This is sensitive information and sometimes it's not desirable to have it available publicly.
  • Image and video moderation detects adult or racy content, face detection, and some other features

That's just basics. The content moderator is able to do a lot more cool things. More...

SharePoint Framework development tips: even more easily debug production version of your SharePoint Framework solution

Almost a year ago Waldek Mastykarz posted a great article on how to debug your SharePoint Framework solution in production, where all the code is minified and source maps are not available. While it works, there is a manual step of uploading source maps in google chrome's dev tools, which isn't very convenient. I extended Waldek's solution with fully automated implementation without any complexities. 

The problem

When you package your SharePoint Framework solution, spfx build pipeline minimizes and optimizes all your TypeScript code. It's not a problem for development, because in "serve" mode spfx build pipeline generates source maps for you. Source maps allow you to open original TypeScript source files in browser developer tools with full debugging experience. 

This is something not possible for "ship" or "production" mode of SharePoint Framework solution. When you run bundle and package-solution with "--ship" flag, spfx pipeline doesn't generate any source maps for you. Instead, you have minified and performance optimized javascript code without any notion of source maps. 

Here is your approximate production code revealed in Chrome dev tools (prettified): More...

A new beast in SharePoint Framework development: library component

SharePoint Framework 1.8 is out and gives us a lot of new things. Check out SPFx 1.8 release notes to learn more. Among different generally available features, we also received some items in "beta" mode. One of them is a library component type.

Library component currently is in preview and most likely will be generally available in SharePoint Framework 1.9

Let's find out what is that library component, when and how to use it. This post is not a step-by-step tutorial (you can find tutorials in the links section of the post in the very bottom), but rather an explanation of why and when we should use library components, why they were added to SharePoint Framework. The original entry in SharePoint User Voice received a lot of votes, thus this feature is long awaited. More...