Microsoft 365 Community Community Demos, 8 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building polished form experiences with SPFx form customizer

Description

Working back from the final UI to the code behind the scenes, in this 13-minute developer-focused demo, Ejaz Hussain shows viewers how to create a custom form component. Steps include create a list or library structure using content types, create a Form Customizer extension project using SPFx, configure and debug, deploy solution to App Catalog, and finally associate the custom component to the content type. This capability is available only from SPFx v1.15. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 8, 2022.

Demo Presenter
• Ejaz Hussain (Content & Cloud) | @EjazHussain_

Supporting materials
• Documentation - Getting Started with SPFx Form Customizer | https://www.office365clinic.com/2022/07/11/getting-started-with-spfx-form-customizer/
• Repo - cc-formcustomizer-playground | https://github.com/ejazhussain/spfx-projects/tree/main/react-formcustomizer-customers
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer

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

I'm presenting a about the spfx form customizer, it's a new feature has been released recently. My name is e jazusen. I work for a company called content and cloud, and here is my twitter. If you want to get in touch so so what is the spfx form?

A

Customizers extension I mean if you have worked in like me: infopath forms if you have worked in custom list pages and injected your custom web part into those pages in classic shape and sites, and uh you know build some navigation around the you know, item ids and stuff, then this is heaven. So we have now, like you know, is a long waited feature where we can override the list. Experience or library experience using the spfx. So that's really really great. So I uh so I wanted to try out.

A

I wanted to see how we can put things together and, potentially you know we'll be building application for the customer going forward. So what basically to get this started? So, what's involved, uh there's a couple of steps. I've listed here, five of them, so we need to create a you know, basic list and or library structure.

A

Using content types that I would uh recommend use the content types, then you create a customizer extension project using spfx, then we have to configure and start doing some debugging and then once we're done, we deploy that our solution to app catalog and the last step is. We need to associate our custom component we build here.

A

We need to do the uh associate with our the content type of the of the list. So let's get started how we can get you know. uh So I'm gonna show you demo first, so that is the customer list.

A

uh So I've added some dummy data here now this list, it's based on this content type, which is the customer and I've kept it really basic for the demo. So you can see. I have some fields and one of the fields is: is a project it's lookup field and which is basically point to this list, which is a project. uh So this project doesn't have any content type, but you can add a content up here if you want to, but my customer disk based on the customer content type. This is the structures.

A

First, we need to create a structure. So once we know our list is there our content type is there.

A

The next step is to create your solution, which uh you, just simply, if I scroll up I've just listed in my blog here so once you create a structure, so you basically, this is where you say: okay select the extension, then what type of client side extension you want to create, select the form customizer and then the rest is it's going to all create for you so and then, once we have that solution created, then we go ahead and do some configuration here.

A

But before we go into the configuration, let me show what's that, look like in demo and then get back to the code and how we can configure and then how we can debug and how we can, at the end, associate our content type so that it's when we click on edit or view we open up our custom custom view. So let me open up the view mode.

A

Let's suppose, if I open this items, if I click on my one of the items, so you can see so at this point now from this is how I would envisage so from here onward storm. So you have a literally blank canvas. You can build whatever you want to build, you can build custom forms, step, forms model forms or whatever you want to build. So basically we have all that space for us right from the list environment. So here this is I'm in the view mode, as you can see, I've just clicked it and it's.

A

This is my view mode, and I uh so this is the main idea for me. Behind of you know. The feedback I get from the customers is right. So, especially with a couple of points. Okay, they want to change the layout, so you know you have opportunity to build different layouts like every two columns uh they want to have when selecting the loop playing around with the lookup columns. You always like had a let's suppose you have a massive massive list of the lookup column and you want to search and select.

A

It was really hard in out of the box, uh so you have to all the way, get a scroll down and you know so it's really hot uh navigation if you have like a thousand item in the in the lookup list, so that was another pain point and if you have to navigate and see, for example, at this point I want to go and see my project detail. You can go right from this page, so you don't have to go and switch to different page to see the detail of your lookup list.

A

So that's really cool. So we are everything is on this page and then from here also, so you don't have to go and add it from the list or you can build the custom links here. So if I want to added this particular record, you can just click on edit. It takes you to the added page and then you can do here. So you know in here uh I've tried to add some custom fields just for demo purposes. So we know you know we. We have capability now to build some custom stuff.

A

So, for example, I have a the you know: the latest modern taxonomic control in here uh with the pnp just added in there, then some select list can add. uh Select. Then this is the outlook and the lookup column that I was talking about so now I can.

A

Basically, if I need some item, let's say: project 110, I simply can get there select this add into my associated et cetera and submit so I don't have to- or I can cancel this so I can select and navigate through here or I can select this whole page etc. So this is kind of a example of what possible things we can build now with with using this on customizers, that's really really great, so yeah.

A

So if I can simply go to say, submit it's going to go and submit the page and then it's going, you know we take you back to this list and this will be updated. So that's the demo. So let me go and show you how I build and what it looks like in the code.

A

So that's the point where you know we have run the german generator to create our project, so once we are in there the first thing you want to go into the serve.json file. Now this will be created for you, so you don't have to do much in there, but couple of property you have to change. First, one is a page url. The page url make sure this part of the url, which is, if I uh yeah it is the make sure, is point to your site.

A

So you have a different uh forms: properties, one for the. So this is the default. One is the new form. One is the added form, one is the viewform and uh and what they have is one thing is first off make sure you are pointing to your site, so leave don't change the last bit of this url from the layout. This needs to be same. You can see, then um the component id will remain the same. So don't change this one.

A

So page type is say another thing which you can determine, which page you are in whether you are in the edit mode. So 8 is the new six is the added and the fourth in the view, and then you have a root folder of the list. So this is the list which I'll be using and then, if you're, any custom property, the id is there as well. But what happened is when you run the goal itself, so let me go back to debug there. So we've done this.

A

Then there is a there's: a gulp serve command, which you normally do, but the idea is, you can always open up a specific configuration passing the parameters say: config equal to customer industry added form in my case, which will point to this one and this. Basically, what happened is the url. It takes the url, it get the component id page type, root, folder everything and then open that added form for me with the id equal to one.

A

But you can go to the browser and once once it's open, you can easily change id to you know. Whatever other item you wanted to retrieve from so that is just to starting point, but you can basically change the id here to get the different items in the list. So so at this point we you know we we can see like a blank uh and then let me go back to the code now uh in term of the building hour demo. It's really really simple.

A

So a couple of things you have to consider in here, I'm just so I'm getting the customer. So wherever the you know that when you click okay, so I'm get we're getting some content in the context. We will have all of the information about the list all about the item, so that's really great.

A

So once the page load or when we, you know open any items, if it is a new one, I'm gonna grab the item, id list title and get the customer detail and then within this call in the ship and service, I'm getting the you know related the project detail as well.

A

So I'm passing this data to my main component, but there's another thing which you did is as as I've shown you previously. You can build the added url by yourself. I can see you can see here so user doesn't have to go to the list and do that, so you can basically navigate from your custom form. So this is how I build basically using source item ids. You get server relative url, so you can hook up all together and then it will open up the added form or add new form from your form.

A

So I'm passing those items properties to my component and then from there. I'm just building a customer form one big component here and- and you know so, it's not massive solution. Just same simple one, one component, uh I'm building here, but the idea is so let me show you one when we finish our saving data, so we need we are. We have to call this props dot on save, which is that method exist here.

A

Basically, you have to call this method when you have done your like changes have been submitted to the list so that this can complete the whole life cycle of the save so and then, then, if you close, then you call uh have this form.close method. You need to call this one so yeah this and uh yeah. That's. That was the in term of the building. The form I'm using in term of the ui you know depend on.

A

You know I'm using both fluent ui and I'm also using a a custom library which is called np design. So yeah, please check this out if you're interested, it's really really good. So now, coming back to the last step. Okay, we've done at this point: we're done debugging we've done build, we've done with build our application. Now we need to deploy that so by default is not going to. Basically, we need to associate our component, which we def the component id we define and the server.json you can see here.

A

So we need to associate that with our list so that when we click on, as I click on our my list, it open up our custom form right. So that's the last stop. What you need to do is basically, uh I have created is a custom function in there, so I've used this see some way of doing it.

A

So what I've done is basically I've got the customer and then once I've got the customer list and then there's a three properties has been exposed which are uh in that content type, which my list is associated so which is new form component site id added form and display mode, so make sure pass that component id.

A

You have it here, which is this one six one d, two three, your one will be different so that your custom component in that list has these three properties are associated once it's done, then, every time you click on any of the list item the custom form either is added new or detailed view will open up so yeah. If, if you get this code, one is it's in here. I've put into this is my blog, so you can go through there.

A

I also will be submitting this to the pnp wrapper, but you can also get the c sharp code as a function at the bottom of this here as well. So that's all from me. If you have any question.

B

Great stuff, uh if you wanna, there might be a couple of questions there in the chat you could take them up there, but for now we're gonna move over to hugo, so awesome, stuffy, jazz.