Microsoft 365 Community Community Demos, 17 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Add form customizers to a list SPFx web part

Description

In this 11-minute developer-focused demo, Siddharth Vaghasia delivers a tutorial on a React based utility web part for managing the SPFx form customizer for your SharePoint List and libraries. The web part allows the user to associate a form customizer to a list/library. The web part has a simple interface to associate/remove, can be used across site collections, ability to Select Site, List, Content Type, and ability to choose form type (view/edit/new). CodeTour for walk through. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.

Demo Presenter
• Siddharth Vaghasia (Tata Consulting) | @siddh_me

Supporting materials
• Sample - Add Form Customizer to List | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list
• Package - package for formcustomizer utility webpart | https://github.com/siddharth-vaghasia/public-docs/blob/master/react-add-formcustomizer-to-list.sppkg

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Foreign and thanks for the opportunity again to present My Demo here today, I'm going to talk about a utility web part to manage the spfx form customizer for your SharePoint list and libraries a little bit about myself, I'm Siddharth, vadasia I am in Microsoft MVP and independent consultant, I love to work on SharePoint teams, app powertratform azure.net. These are some of the social headers through which you would be able to connect with me.

A

Okay, so uh this basically weapons will allow the user to associate a form customizer to list and Library. This is the link to the wrapper from where we would be able to download the source code of the web part which we are going to see today.

A

So let's talk about driving Factor, uh so we we all know with spfx 1.5 a new type of extension, which is from customizer extension, has been introduced through which we would be able to customize the form experience for the list and Library. So, basically, we would be able to associate custom new form, custom, edit form and custom display form of for our list and libraries right. uh So with this uh to as a part of deployment.

A

What we had to do is we had to associate the particular component ID of the spfx customer customizer extension to a content type, and there are different ways to do it. We can do it using Powershell.

A

We can do it using rest, API and system, uh the purpose or the driving factor for this one is an utility or an admin web path through which we would be able to manage the form customizer on multiple lists and libraries by using the same concept wherein you would be associating taking the input from the user as in configuration options and then associating a particular form customizer to list 10 libraries.

A

So this is a feature. I mean kind of summary of the web part which we are going to see today. uh It's a simple user interface, which will give you to associate and remove a form customizer with list 10 libraries. uh You can use it across code site collection. It means you, as it is an admin or a developer uh utility web part. You don't need to deploy this web part on every site collection.

A

You can deploy it on one side, collection and if you have access to various site collection, you would be able to deploy it on uh various list. From here itself. uh There is an ability to select site list and content type via drop down, so you don't have to manually, enter the names, and everything uh then also has the ability to associate and remove the form customizer.

A

It means it also has a capability to remove the form customizer so that the list can go back to the default out of the box forms which are available, and you can also choose whether you wanted to select a single uh form type, whether you wanted to just associate view form or you can associate just edit form or you can associate all the three forms right.

A

So just a quick technical note, um The Crush of the um you know, web part is just that it is making a rest API call to update the content, type property of a particular list. uh So the association of the form, customizer extension needs to be done via content type. It is not at the list and Library level.

A

So with the version with the release of the form customizer extension, we got four new six new properties, in fact, for associating this component type with a particular content type right, and to do that, what you can do is we can do a patch request and the object which we have to pass to that patch request on particular content type is where you can set new form: client-side component ID display from client side component ID, edit from client side component ID and the properties associated with.

A

If you want to make your extension configurable right so yeah with this, let's quickly see the demo. So what we have is um now consider uh there will be two part to the uh demo as such. uh Consider because this is an utility web part. So we assume that there is already an uh spfx form extension solution, which is already deployed on a targeted site collection which basically does actually gives the experience of new edit and view form of a particular uh list and libraries on which we wanted to associate so we'll.

A

Take an example of this, uh where we associate a particular solution to this particular list right now. What we are seeing is that, once you click on it, it is opening out of the box uh view after the Box forms, the edit View and the list form of a particular list right and what we will do is uh this is another solution.

A

This is a simple crude demo solution of a form extension uh wherein we have just two columns title and description column, and using this title and description, we are basically demoing the crude operations on a particular disc, 10, libraries right. So now we see that it is default, forms which have been loaded and I have solution which is uh deployed here. So this is the web part the uh which we are focusing on today.

A

So what you get is you get an option to select a site, so we will select the site as targeted site collection where the list would be. You can also put custom site URL here, then you got to choose which list or library to which you wanted to associate it with so I'll select form customize the demo. Then you can choose the content type.

A

So, as Association is done via content type, you can choose it and by default there would be item content type, which would be already there for the list right and then this is where you have to put the client component ID now from where do we get this client component? Id is on the solution on the base solution. Where you have your customization being deployed, uh there would be a manifest file in the Manifest file. You would see that there is a unique ID associated with each component.

A

It is very much similar to any other extension type along with the web part which we have so what we will do is we will put the component ID here and then we will say new form, edit form and view forms he wanted to associate with all the three forms and I'll just say associate and once the association is done, uh it just displays the basic information, and now, let's see that whether the association has been done or not right now, once I will click on new button.

A

You can see that the solution has been associated with the particular list. Library, on the new item form- and this is the solution which has been deployed. So here we have test uh I'll just put the test entry here and I'll, just save it and what you can see is you can see that by default it has been associated with it and the the part is also deployed, and then uh the basic operation has been done right. So this is overall uh the demo of the utility weapon which we have.

A

You also get to choose to remove the association uh by basically selecting the same component, ID and everything, and then just say that if you wanted to disassociate what we have to do is we have to empty the component ID of a particular property which is available and it will automatically uh disassociate and you can, by default, CD out of the box forms which are available right. So with this, uh let me quickly go to the chord walkthrough.

A

So a web part is anyways uh simple as such, but what uh I had been doing is I had been using PNP react controls uh to basically uh utilize the already components which are available for the site selection and this selection.

A

So we have a site picker, uh on which we, if we give just the context of the web, part where it is running by default, it will able to list down all the sites which, where we have access right and then what we have is we have a list speaker so based on the site selected. We are using list record and we are giving the site URL as in the context property and uh based on that it will automatically give list download the list and libraries and populate the list maker.

A

Now next thing is to select the content type which we, which we are seeing. uh One thing is uh I know there is an PNP react control which is available for selecting a content type also, but when I was deploying when I was developing this web part, which probably was in September sometime, there was an issue with that content web part which we were not able to use it and which I believe has been fixed in the latest release.

A

uh So I might have to change this to use that selected, but right now, I am using the custom drop down to basically get the content type and display the content type in the drop down right. So next thing is yeah, so this is the code uh using pnpgs from where we are getting the content type and just associating the content type and putting it in the state object so that the drop down gets filled with the uh content type Associated.

A

To the selected list now, uh the next thing is: uh these are simple check boxes, which basically tells you know uh if, with whom we want to associate edit view a new form, and then uh this is the method. uh The ad form customizer method. So this is the main method which basically does the validation first, whether the required Fields have been added and then what it does.

A

It gives uh Associated via uh a method uh from the uh by using the updating, the content, type properties right so again same thing: we are getting the content type URL. We are seeing whether it was an ad or remove Association, and then we are updating it via HTTP client request now, uh I'm, not sure if I am right or wrong. But uh the thing is that I try to use PNP JS to update the content, type property using pnpgs method, but somehow I did not find the update method.

A

So I went ahead and used HTTP client object method by using the getting the content type URL from the pnpgs, but just making the patch request by creating the body object, which is there. So this is to associate the form customizer with the list, all library, and then we have the remove part. Let me see.

A

Sorry yeah, so this is the remove Association customizer, in which same thing we are doing what we are doing is. We are basically calling the same method which is to associate but based on, add or remove.

A

It will just empty the client-side component ID so that we can by default, see the old uh out of the box forms which are available so yeah in a way uh this was the you know, simple utility web part as say, this is a targeted to developers or administrator, uh which would give them an ability to provide an user interface through which they can associate a form customizer being deployed to single disk library or across multiple site collections. That's it from my side. uh Thank you, Mark over to you, wow. That was great Siddharth.

A