 The SharePoint framework enables developers to customize the rendering of data in a SharePoint's list column. This is done by creating a custom field customizer and associating it with that column. Now the project template that's created by the Yeoman generator when you create a field customizer extension only has the necessary things in the extension to associate it with a site column or new site column that's created using the legacy feature schema and XML provisioning. But that doesn't help if you want to register your field customizer with an existing site column or a column in a SharePoint list it only works for new columns. To register your field customizer with an existing column you'll have to write some code and call the SharePoint REST API. So in this video not only am I going to show you how to do that but I'm also going to share with you a little utility that I created that you can use to do the same thing without writing any code. Interested to learn more? Cool then let's get started. Hey I'm Andrew and if you're new here subscribe to get notified of future videos for professional developers on Microsoft 365, Microsoft Azure, and SharePoint framework topics. Okay before we get started let's define the problem before we look at what the solution is going to be. The SharePoint framework field customizer extension lets developers create a custom rendering implementation for columns in SharePoint lists and like all extensions there are two parts to getting this extension working in your SharePoint sites. The first part is that you're going to create an extension and install it in your SharePoint site just like any component then you have to register the field customizer extension with a column and many developers think that this is only done when you install the component because the default default project includes a feature schema XML to create the new site column but like I said in the introduction this doesn't help you if you want to register the customizer with an existing site column or an existing column in a SharePoint list but thankfully you can use the SharePoint REST API to do this so let me demonstrate this and by showing you a little utility that I created to show how this works. Now this web part that I'm going to show you it uses the SharePoint REST API to register change or deregister a field customizer on an existing list column the source to this project is included in the student download for my course Mastering the SharePoint framework and I included a link to the course in the description below this video okay let's see how this works so as you can see here I've created this list that has three columns in it it's got operand a operand b and a result now what I want to do is I want to modify the column called result with a field customizer to show the sum of the values in column in the operand a and operand b column and you can see here I've got two test items that I've added to this list test one has nothing filled in the result field test two has just the results of adding those two numbers together three and four seven but I want to change the rendering of both of these of both of these fields in this column for the result column so I've got this field control that I've already built packaged and deployed to my SharePoint site as well so if I come over here and look at the site contents so here you can see that I've got my field customizer already installed and I did that by uploading the package to the apps for SharePoint the site collection app catalog and here you can see it's been uploaded and it's everything about it there's no errors or anything in it so it's all installed just fine if we come over here we take a look at the code for this for our solution this is coming straight from my course so that's why from the extensions chapter so we're looking at the field custom the field customizer for summing two values together and if I look at the code for this it's really straightforward there's nothing fancy here in the on render cell method I'm going to get a reference to columns a and b and then I'm going to go add the result together of a and b and then I'm going to update the results by just taking whatever the DOM element is for where our field customizer is going to be associated with the column on the on the site or on the list and my right is inter html property the two values from those other two cells and then write out the results of it as well to the screen so I should have a nice new something that says three plus four equals in bold seven and the same thing for the other column as well so this is the one that's all deployed and we're ready to go through into wire this up and get it running now again just to review if I come back over to my simple math uh my simple math uh list we can tell that my field customizer is not registered with this column or in this list right now because I'm not getting my special rendering so what I want to do is I want to register my field customizer with the result column notice that nothing is rendering in the result column because that's what's going to be the job of my custom field on my field customizer we do see a value in the result column right now but that's not we're not going to end up using that in my field customizer project one of the things that I've done is I'm going to remove the I remove the field customizers elements xml file from the feature when the package was installed so it didn't create an unnecessary column so we can see that if I go look at in the b roll and I look at the elements xml we can see that this is how the site column would be created and then one of the things I did is in the package solution I just went in and made sure that this file was not listed here so that it wasn't going to go ahead and register or create the site column when the feature got activated um I'm showing that here but when I actually deployed it I did I wouldn't normally do that just because I want to I want to wire it up through the Rust API now let me show you my little utility project it's called the field customizer manager all right let's register the installed field customizer with this little utility web part that I've created so I've got this utility web part inside of the download for the extensions chapter in my course if I open this guy up what I'm going to do is I want to go through and start is and go ahead and go ahead and I'm going to build this guy so I'm going to jump over into that folder extension manager and I've already installed all of the npm packages and I've already built the project so really all I have to do is just say gulp serve and I'm going to say no browser because we're just we're going to go um we're going to specify where we want to test this ourselves and it's just a web part so I don't need to go have all the fancy stuff on the url for testing an extension all right now that we see the reload task has completed we know that our local web server is up and running so what I'm going to do is I'm going to duplicate this tab and I'm going to go to our site and I'm going to go to the hosted workbench next let's go ahead and add our web part which is our field customizer onto the workbench here so the way this web part works is that you first select a list in the current site and then a column from that list and if the column in the list has a gear next to it that indicates that the column has a field customizer that's been applied to it so I'll start by first selecting my list which is our simple math list and then I'm going to find the column and we know the column was named result so here we don't see the gear next to it so we can tell it hasn't been customized so now once the column has been selected I then need to set the GUID of the field customizer that's installed on the site to the field customer as our ID property so I'll do that by coming back over here to my project and I'll find what the ID was of that field customizer we created and that's going to be found in the manifest for our field customizer so just grab that value come back over to the browser and paste that in now I can also optionally set the custom properties on the registration if your field customizer has any expectation of those properties but in my case my field customizer doesn't so I'm just going to leave this blank finally I'm going to click save to save my changes now by the way this simple field customizer is one of the demos in my course mastering the SharePoint framework I'll include a link to that in the notes below now the students in my course have access to download all the code samples for the project so if you're a student you can grab that and if not well you might want to become a student now let's see if this worked by going back to the list and refreshing the page cool we can see that our field customizer is registered on that column on the result column because we can see the text that's being written out and overriding even the test two where it was saying seven now we're actually putting out our own text now if I go back and I refresh the hosted workbench page I'm going to see the result column has a gear next to it indicating that the column has a field customizer that's been applied to it now let's clear out the ID of our field customizer and save our changes and refresh the list again to deregister our field control and I'm going to go back to the page on my list and refresh the list and we can see that it's been deregistered pretty cool right if you want to use this project in your tenant I'll include a link to the description in the description where you can download the packaged version of this project of this utility project now the students in my course they've got access to the source of this project to see how it works to implement it in their own solutions and this project uses the fluid UI controls and a react based web part that's created using react hooks all the interaction with that's going to happen with SharePoint happens through the SharePoint REST API so now that you've seen the finished version let's see how this works and to keep it simple I'm going to use the browser's network tab just to browse all the different calls that are being made all right so what I'm going to do is let's go ahead and open up the dev tools I've got the fetch xhr tab selected and then I'm also going to filter on just the underscore API and what that's going to do is it's going to only show me a request coming in this down here at the bottom in the request stack it's only going to show me those calls that are going to the SharePoint REST API which is what I care about okay so I'm going to go ahead and let's refresh the page because the first thing that our web part did I scroll down look at this is that we can see that it's getting our it's got to get a collection of lists that it's going to bind to it we can see there's our here's our collection of all these lists scroll like this make sure we can see a little bit more all right so it's making a couple calls to SharePoint REST API but this is the call that I'm making so I simply made a call to my current SharePoint site it's a dev 01 and I went to the underscore API slash web slash list and then I said give me all the lists but I only want the id and the title property and only show me lists where their hidden property is set to false so the payload that I get back or that's what I sent but then here's the response that I get back this is the raw response but if I want to see a preview of it we can see we get a collection of all of our lists and we'll just pick one arbitrarily this one is our site pages list you can see here that we're getting the id of the list and the title of that list as well okay so now that we have that the next thing is that once I select let's go ahead and go back over to the let's close that part so we can actually see the actual request that come back right so we can go ahead and clear these results out let's go select our list for simple math and what that then did when we selected simple math it needs to go in and then get a list of all the columns so how did I do that well scroll down we're on our we need to look at our underscore API and there we go we're going to the fields endpoint now you see we're going to our going to a specific list so I'm passing in the good of the list that we just selected and then I'm saying go to the fields endpoint and I want to get the title or the id the title and the internal name of the of the column because we're going to have to we're going to we're going to refer to that column by his internal name and then I wanted to grab the client side component id and the client side properties properties as well on that column and the reason why I do that is because that's how I'm able to determine if when I select this result here if I'm able to see if it's been customized or not so the results that we get back from that you see here I'm going to get a whole bunch of columns and I'll find see if I can just guess and see which one ours is it's probably maybe it's this one we're looking for one that says field text because I create a single line of text and I didn't know this is the title field but what you can see here is that you can tell when a field when a column has not been customized because his his client side component id property is set to a GUID of all zeros and the properties property is set to null all right so what I wanted to do is I wanted to go through and wire this up so obviously what we're going to do is we're going to set the GUID on this and when I click save the save button we should see another call that's going to go back to the SharePoint it's going to go back to the SharePoint REST API to update that column so I'll hit save and here we can do this time if I look at the headers for this we're doing an HTTP post instead of the gets and again I'm going to the list collection so specifically that list our simple math list I'm looking at the fields collection and I'm looking at a specific field based on his the field's GUID and what I'm doing is the the payload that I'm submitting to it so here's the actual payload and I can look at the payload just as raw text the only thing I'm sending it is an object for the property of the client side component id and the GUID of our field customizer and then I'm setting an empty string to the client side properties as well we can see what that looks like as parsed as these parsed object right here that I'm passing in so I'm doing an HTTP post to the specific columns endpoint and the only thing I'm passing in is a JSON object that contains a name value pair of the client side properties and the client side id of that component so let's go back and let's just refresh this and we can see the value that we get back from this is that this time if I go to the simple math property or a simple math list and then I choose that column column now if I look at all the fields that come back now this is gonna let's see if we can find it again so let's give us a little more room to work here about this one there you go there's our result field and you can see here we set the value of our custom of our custom field control has been set and when I want to reset this all I end up having to do is just say remove the field customizer and what that does if we go back and look at our network stack we can see that we're doing yet another post to that same field so the fields endpoint collection with that GUID and come over and look at the payload and I'm setting it back to his initial value just nulling out the GUID and the properties now I much prefer this option when using than using the XML provisioning option that we have in the SharePoint it's much more flexible and it's also not as black box like XML provisioning is in SharePoint I mean sure XML provisioning works when it works but when it doesn't it's a black hole in an absolute debugging nightmare to figure out what happened what do you think about using the REST API to register a field control let me know by dropping a comment below and let me know if you want to see more videos about the SharePoint framework or SPFX hacks like the one I just showed you in this video and if you like this video please give me a thumbs up and subscribe by smashing that red subscribe button below the video or in this card so that you're going to see when I publish more videos for professional developers on Microsoft 365 and Microsoft Azure including topics on the SharePoint framework thanks and I'll see you in the next video