 The SharePoint framework enables developers to create custom forms in SharePoint lists so that when you click the new or the edit button, you have control over the entire experience. The project template that's created by the Yeoman Generator, though, it includes the necessary XML files used in features and in the legacy XML provisioning when you install the SharePoint package, except for list form customizers. Unfortunately, it seems that Microsoft forgot that we need these to register things with a SharePoint list. So to register your form customizer with a SharePoint list, you're gonna have to write some code and call the SharePoint REST API. Now in this video, not only am I gonna show you how to do that, but I'm also gonna share with you a cool 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 for future videos that I create for professional developers like Microsoft 365, Microsoft Azure, and SharePoint Framework topics. Okay, before we get started, let's define the problem before we look at a solution. The SharePoint Framework list form customizer extension lets developers create custom rendering implementations for custom forms inside of a SharePoint list. Now, conceptually, these are really easy to understand. When you go to a SharePoint list and you click that new button to create a new item, you wanna display your custom form. Instead of using the default forms that we get with SharePoint. So here, I've got a list here called my NASA mission planning. And when I click the new button, I get the default form over there on the right hand side. I don't want that. I wanna create my own rendering here because when I click new, based on the project that you select, in our case, it's gonna be the Apollo program or the Mercury program or the Gemini project, one of those three. I'm gonna have different launch vehicles that are available to me or different spacecraft vehicles that are available to me as well to handle in this mission planning. That's what list form customizers are gonna enable us to do. These were introduced in the SharePoint framework, version 1.15, when you define your custom form. Instead of SharePoint showing its default list form, it's gonna take you to a custom page that contains your custom form. Now, the advantage to this is that you have complete control over your entire form. But the flip side to them is that you have all the responsibilities for the form as well. For instance, you have to handle the retrieval of the list items data in the case of a display form or an edit form as well as saving the data. Now, custom list forms, these are tied to content types, not lists. Remember that every list in SharePoint contains a collection of content types. And even if the list is configured to not allow for content types, there are two default content types that are present, folder and item. And this means that when you set your custom list form on a content type, you can scope it to a specific list by only updating the content type instance in that list. Or you can do it for an entire site collection by updating the content type in the site's content type collection. Now, like all extensions, there are two parts to getting this working in your SharePoint site. You first have to create the extension and install it in your SharePoint site, just like any component. And then you have to register the list form customizer extension with a content type. Now, this is done using the SharePoint API. And to demonstrate this, let me show you a little utility that I created to show you how this is gonna work. Now, this web part that I'm gonna show you uses the SharePoint REST API to register, change or deregister a list field customizer on an existing content type in a list. The source to this project is included in the student download that all of my students of my course mastering the SharePoint framework have access to. Now, I'm gonna include a link to the course in the description below this video if you're interested in learning more. Okay, so let's see how this works. I've got this list that I created here to plan future NASA space missions. And it has a few columns in it. I've got a NASA project, the launch vehicle and the spacecrafts that will be used in this mission plan. Now, let me show you the list form customizer that I created. So, this is something that I created that's included in my course, but I'm gonna look at this. I've opened up the download for this specific chapter. So, we got a bunch of extensions here, but I'm gonna just look at the list form customizer. So, in this list form customizer, if I look at the extensions here, what you're gonna see here is I'm doing a check to see on a knit if I'm in a display mode right here. And if I am, then, or sorry, I'm gonna check the display mode of the form. And if I'm in the edit or display mode, then I'm gonna go fetch my current list item. And then when I do the rendering, if I'm in display mode, or check the display mode, if I'm in display mode that I'm gonna go through and use one react control that I've created. And if I wanna use, if I'm in the edit mode or the new form mode, I wanna use the exact, I wanna use a different react control that I've created because it's still gonna be a form. Like when I do a display, I just wanna show some information. So, I'll keep that simple, no form fields. But if I'm in an edit or a new form, I do wanna show a form. And the only difference is that in edit mode, I just need to preload some data. So here, if I'm in edit mode or in a new mode, I'm gonna use this control called NASA mission planner forms. And I'm gonna pass in the current mission. I've got all the other stuff already wired up here. This video is not about creating list form customizers. If you're interested in a video to see how that works, let me know in the comments below. And I might consider doing a video on that topic. But it is gonna be something that's in my course. Here we've got the, but we've got those methods that are all wired up for the saving and closing of the form and how I know when to save this. Now, now that that's all set up, what I did then is I then packaged up this project. I then uploaded it to my site. So if I come over here and look at my site collection app catalog, we can see that here's my form customizer right here. And we see we have no errors in the deployment. And I've also gone in and I've also installed this app here. So we've got our NASA planner form customizer right here as well. But we can see when I click the new form here, that's not currently registered. So everything has all been deployed and everything. What I need to do is I need to go associate or register that list form customizer with my SharePoint list, specifically with the content type in that list. So now let's register the installed list form customizer on our list with my utility web part. Now I've already installed all the dependencies. So I'll just start the local web server with gulp serve. But I'm gonna refrain from launching the browser because I'm gonna use my existing workbench. So this project is inside of the same download. Okay, once we see our gulp task reload show up, then we know our web server is running, our local web server is running. So I can go ahead and launch our workbench. So I'm gonna do that by just opening up the exact same site and launching our workbench. And I'm gonna add in our list form customizer web part to the page. So the way this web part works is that you're first gonna select a list in the current SharePoint site and then you're gonna select the content type from that list. If the content type in the list has a gear next to it, that indicates that it has at least one custom form that's been assigned to it. So I'm gonna select my NASA mission planning list and I'm gonna select the content type item, which we can see has not been customized. Now, once the content type is selected, I can set the good of the list form customizer that's installed in the site on the list form customizer ID property. You can also optionally set the custom properties of the registration if your extension expects them. Now, in my case, I've created some properties to tell the extension which column in the list maps to the expected value for my NASA mission item. If I don't set these, it's gonna add them to the title field as a delimited string. So I'm gonna go ahead and set those here. So also notice that you can set the values for each form individually if I just toggle this off and I can choose from the edit form, view form, new form and edit form. Or I can set the same value across all the forms. In my case, my extension is set to understand how to handle the different display modes. So I can just go through and use one extension for everything as I showed you earlier. So let's go ahead and set these values. So what I'm gonna do is come over here to my list form customizer. I'm gonna go to the manifest for my extension and grab his ID. I'm gonna go ahead and paste that in right here. The next thing I'm gonna need to do is I'm gonna go ahead and look in my gulp serve that has a list of the different columns or the different properties that I've defined. And let me just go put those in another file here. What I need to do is make sure that all of the internal names here for these columns match what's being used in the SharePoint list. Easy way to check to see that is if you just sort on the different columns, you'll find the URL there inside of the sort field or the field name inside the sort field. That the sort field is pointing to the internal name. So I'm just gonna grab the NASA project and I'll make sure that that's set here. I'll sort on the launch vehicle. There's the launch vehicle. So yep, same thing as what I have. And then we'll look at the spacecraft name and because this one's got spaces in the name, it's gonna have those funky Unicode characters. So I'll go ahead and put that in and it looks like I have the same thing. So now I'm gonna grab all of these values and I'll come back over here to our form and I'll paste that value in and hit save. All right, cool. So it's updated our customizations. By the way, this form customizer is one of the demos in my course, mastering the SharePoint framework that I've linked to in the description below. And if you're a student of my course, you've got access to the complete source code for the form customizer extension and for this little utility project that you can get access to. If you're not a student, there's a link in the download where you can get the built and packaged version of this little utility web part to use in your own tenant if you wanna play with it a bunch. But if you want the source for it, that's only for the students. Let's see if this work by going back to our list and refreshing the page and then I'm gonna click the new button and we should be taken to our custom form. So I'll refresh the page and hit new and we can see that we've been taken to our form. So I'll go ahead and let's add something. So I'm gonna say a mission title. This would be something for the Mercury program, Mercury, November, throwback mission. I'll choose the Mercury program and then this is only gonna let me choose different values that were available to us during the Mercury program like using the redstone rocket and putting the Mercury capsule on top of it. When I save my changes, it'll take me back to my SharePoint list and we can see that I've written those values out to the different columns. I can even edit this value by selecting it, checking to see if our edit form works. Sure enough, we go back to our same page. I can make a change to it. Let's do an Apollo, November throwback. We'll change this to our Apollo program and use a Saturn V and let's just do the command and service module and the lunar module. We're gonna go all the way back to the moon and I'll save my changes and sure enough, now you can see all those values are set up now. Furthermore, we can see that the customization happened. Oh, why don't we look at the view form? So if I select it, we'll also be taken to our custom view form that lists all those values out. Now, let's see if we can actually see what happens here when I refresh this page or I come back to our form customizer and if I select our NASA mission planning and notice you'll see the little gear that shows that our item content type has these different values that have been set. Now, let's clear out the ID and the properties of our extension and save the changes and then refresh the list again. And here I can see that I've deregistered my field customizer because when I click new, I get the old out of the box default SharePoint experience. Pretty cool, right? Now, if you wanna use this project in your tenant, I'll include a link in the description where you can download the package version of this utility project for use in your tenant. But students in my course, they've got access to the entire source of the project to see how it works to implement it in their own solutions. This project uses the Fluent UI controls and a React-based web part created using React hooks and all interaction with SharePoint happens through the SharePoint REST API. So how does it work? Well, now that you've seen the finished version, let's see how this really works. And to keep this simple, I'm gonna use the browser's network tab. So I'm gonna come back over here to our page. I'm gonna go ahead and open up the dev tools and I've got it set to filter just on XHR requests and when the URL has underscore API in the URL. And the reason for that is because everything in the SharePoint REST API is gonna go through the underscore API endpoint. So let me refresh this page and what we'll see is it's gonna go grab a list of all of the lists in our current SharePoint site and we can see that right here. So here in this request is I'm simply making an HTTP get to my existing SharePoint site. So here we go underscore web slash underscore API slash web and then I'm saying go to the list collection and give me all the lists and select it. Just give me the ID of the list and the title of the list and filter out everything that is hidden. I don't wanna see any of the hidden lists. And the results that I get back from that is a collection of all of these different SharePoint lists. So here I'll just grab one of them. This is our site pages list and we can see we get the ID and the title. Okay, so once I then select our list. So in our case, we went for the NASA mission planning list. We got a list of all these different content types that were available inside this list. So here we can see another request that was made right here for the content types. So here if I look at the headers, I'm going back to the SharePoint list. I'm getting a specific or a list endpoint. I'm getting a specific list by GUID. So I'm passing in the GUID of the list that I selected and then I'm going to his content types selection. So again, this is showing you how to do this on a specific content type in a specific list. If you wanna do it for the entire site collection, you wouldn't go to underscore API slash web. You go to underscore API slash site and you wouldn't filter by a specific list. It's just great to go straight to the content type collection. Here I'm then requesting the following columns. I'm saying give me the ID column, the name column, the display column, the display form client side component ID, the display form client side component ID properties, et cetera, et cetera, et cetera. I'm doing that for all three of my different fields. So here if I come back over to the preview, you can see that I'm getting two content types back. The second one is for an item and we can see the two values for our display form and our client side component ID. Then we have the edit form and the new form. Now notice when a list is not, our content type is not customized, you can see the component ID is set to an empty string and that's different. And we can see the new form is even set to null which seems inconsistent. But we can see that that's different than how it works with a field customizer because a field customizer, those values would be set to a good of all zeros. So if I change that value, so I select my item and then I go back and let's set the properties same way we did it before. So I'll set the properties here and then I'll also go grab the ID of our component that we're testing and I'll paste that in and then save my changes. Now what you see is it's making, the request that we're making here is an HTTP post to a specific content type. So you see I'm passing in the ID and the data that I'm sending it are I'm setting those values on all three of the different forms, the display form, edit form and new form using the same component ID and the same settings for the properties as well. If I wanted to reset this value, then what I do is I then come back in, I will select my list, I will select the content type. And when I say remove all the form customizer changes, we can see now we're making the same thing, another HTTP post to the same endpoint, but this time the object that I'm sending it is just nulling out all of the values or putting an empty string for all the values for the three different forms for their component ID and their component properties. Now I much prefer this option using the SharePoint REST API instead of using an XML provisioning option like other extension types use. This is a lot more flexible and it's also not a black box like the XML provisioning in SharePoint, I hate that. I mean, XML provisioning works when it works but when it doesn't work, good luck. It's a black hole in an absolute debugging nightmare. It doesn't matter though in this case because a list form customizer, it doesn't even support the XML provisioning right now. What do you think about using the SharePoint REST API to register a list form customizer? Let me know by dropping a comment below and let me know if you wanna see more videos about SharePoint framework or SPFX hacks like I showed you in this video. And if you like this video, please give me a thumbs up and subscribe by smashing that big red subscribe button below the video so that you're gonna 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 next time.