SharePoint Field Customizer extensions are powerful components that can customize the display of field content far more than methods such as JSON field formatter
SharePoint Field Customizers are client-side components that run inside the context of a SharePoint page.
Setup your Development Environment
This article is not going to go into the details on how to set up your development environment. A good article can be found here.
My only recommendation is to use NVM instead of the default installation of NodeJS.
NVM allows you to install multiple versions of NodeJS and handles the heavy-lifting in swapping between them.
Create a Field Customizer Extension
As part of the article, I will demonstrate how to create a Field Customizer Extension that will display human-readable file size in Bytes, Kb, Mb, Gb, Tb, Pb, Eb, Zb, Yb from a number value store in a Sharepoint number column. In my project, I use a React component called file-bytes-formatter, but once you get the hang of it, you will be able to extend these to most React components.
1) Create a new project directory in a convenient location
2) Go to the project directory
3) Run the Yeoman SharePoint Generator
4) When prompted, enter the following values (select the default option for all prompts omitted below):
What is your solution name?: bytes-field-extension
Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: (y/n) n
Which type of client-side component to create?: Extension
Which type of client-side extension to create?: Field Customizer
What is your Field Customizer name?: Bytes Field Extension
What is your Field Customizer description?: This Field Customizer Extension will return human-readable file size in Bytes, Kb, Mb, Gb, Tb, Pb, Eb, Zb, Yb
Which framework would you like to use?: React
At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld extension. This might take a few minutes. When prompted, enter the following values (select the default option for all prompts omitted below):
5) Install file-bytes-formatter React component
npm install file-bytes-formatter
6) Type the following into the console to start Visual Studio Code or open project in your favourite editor
7) Within src\extensions\bytesFieldExtension\BytesFieldExtensionFieldCustomizer.ts add the following line under the last import command.
import Fsf from "file-bytes-formatter"
This will make the file-bytes-formatter component available in your project.
8) Within src\extensions\bytesFieldExtension\BytesFieldExtensionFieldCustomizer.ts change this line
3) Set the GUID from CREATE A FIELD CUSTOMIZER EXTENSION step 9
$field.ClientSideComponentId = "YOURGUID"
4) Mark the field as updates
5) Execute the pending update
TEST FIELD CUSTOMIZER EXTENSION
If all sets are followed correctly any number column that has this Field Customizer Extension will take input like this. and change it to a nice human-readable format like below
I hope you found this tutorial useful. You are encouraged to ask questions, report any bugs or make any other comments about it below.
Note: If you need more "Support" about this topic, please consider using the Ask a Question feature of Experts Exchange. I monitor questions asked and would be pleased to provide any additional support required in questions asked in this manner, along with other EE experts...
Please do not forget to press the "Thumbs Up" button if you think this article was helpful and valuable for EE members.
It also provides me with positive feedback. Thank you!