SharePoint Framework is in General Availability from several months, Microsoft has spent a great effort to improve and driving the end users towards the modern UI on SharePoint Online, with amazing results from my point of view.

As I mentioned in the previous article, Microsoft has introduced SharePoint Framework Extensions, this allow the developers to extend the capabilities of the modern UI, through the following new extension types:

• Application Customizers
• Field Customizers
• Command Sets

In this article I’ll consider the “Field Customizers”, with this extension type is possible to improve the user experience in a list view, modifying the UI during the rendering. I developed a SharePoint Framework Extensions solution using the robust front end framework Office UI Fabric, that offers many components (React, Javascript, Angular…..), for my scope I used the Toggle component. The great benefit that my solution offers, is the possibility to modify inline without open in edit mode the list item, the toggle component is disabled if the user has not enough permission to edit the item. I used also the amazing pnp js core library to perform rest api call, towards SharePoint, I encourage you to use this library developed by an amazing community. Here’s a quick look at the pnp js core library code:

Here the final result:

My solution is available on github: https://github.com/giuleon/react-field-toggle

Source code of this web part is also available on the official GitHub of Microsoft SharePoint Framework Extensions samples & tutorials: https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-field-toggle