Microsoft 365 Community SharePoint, 9 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on your SPFx form customizer journey with a boilerplate

Description

In this 18-minute developer-focused demo, Michaël Maillot delivers a modified out-of-box form customizer that will get you up and running in no time. The presenter walks viewers through his form customizer article, UI and code while delivering tips for fine tuning and debugging along with a historical reference. One time saver is the ability to toggle between form customizer, list and Item on form. Works only if running SPFx v1.15 or greater.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 9, 2023.

Demo Presenter
• Michaël Maillot (onepoint) | @michael_maillot

Supporting materials
• Documentation - Build your first Form Customizer extension | https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• Article - [SPFx] Form Customizer Boilerplate | https://michaelmaillot.github.io/tips/20221223-spfx-form-boilerplate/
• Repo - spfx-form-boilerplate | https://github.com/michaelmaillot/spfx-form-boilerplate
• Controls - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/
• Demo - Episode #223 - Advanced SPFx Form Customizers with DynamicForm | Paolo Pialorsi (PiaSys.com) @paolopia | https://www.youtube.com/watch?v=fuVrosr-NgQ

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

B

Will focus on some key points that are that matters matter to me when you start customizing list forms, my name is Michael I'm a 265 solution developer at one point, I live in a beautiful town called nodes, which is the West part of the France and I contribute to some PNP Solutions, such as CLI for Microsoft g65 and the PNP reusable controls. You can reach me out on Twitter GitHub and also have my personal site when I share some stuff so list from customization. What was before remember those in the audience.

B

What was it before was about customizing through info pass SharePoint designer and for the luckiest of us through Visual Studio, just mentioning uh customized list form and SharePoint should be enough to lose everyone, not in the audience, but not because you don't understand, but exactly because you know what I'm talking about remember when you had the opportunity to crash your whole shopping farm with just a few lines of server side code anyway, good memories. So before SharePoint framework Solutions the package we use to deploy, we are called WSB yeah.

B

It reminds us the good, the good old days and also the worst, because the the wsp could contain a whole shop and site structure files such as lists content, types fields that choose. We usually relied to your customizations.

B

Imagine the whole package, which contains structure and could deployed at once separated by features. No, no, it's not as perfect as it looks like. But anyway, when you wanted to customize the form you started with a custom disform.aspx, but also with the dot aspx.cs and the database.design.cs. You have the backend and the front end and the same solution wow.

B

Let's imagine that you deploy the whole solution with your structure with your customization on your sharpen farm, and then you have your product owner.

B

That wants you to add a new field to your custom form, which means that you have to add it also to your control type as a custom field and add it to the custom form and you have to deploy the whole new thing so great because randomly you could encounter some bad surprises, for example, the problem regarding synchronization and other problems regarding the structure, and you have to redeploy the whole stuff or you have to adjust it. You have to upgrade it. You have to you, you.

B

You are enjoying the moment right now, so this the this. This was good memories anyway, before the release of the version 1.15. If you wanted to give users some specific interactions with your list, you could do it through uh web paths that you could deploy as an app application pages.

B

You play with query parameters, or you could also include in your solution. The legacies came out at XML file, which, which includes the list declaration and also properties regarding the URL of the different form States edit new and display form again. This was not supported by Microsoft, even if it was working. I remember one year or two ago, a Community member made a demo that was using this approach and it was why it was it was working anyway, starting from 1.15.

B

We got a new extension called form customizer, which works by being hosted on a specific page and for which you have to link to a content, type So, that's its work. You have a specific hosting page, which is called SPL list form.aspx. It's the same way that, uh as the the one you use when you deploy a web part as a team's personal app, which is hosted in a specific page, then you can associate the component with less content type documents that content other content type hub.

B

Then you have some specific events that are available through the phone customizer lifecycle, the demo.

B

The important thing here is that when you just get started customization, you only have a few things in your hands to work with your list item and when you create your first form, customize it and run it locally. You will see that the interface is really poor. You have quite nothing available in the interface and it is displayed like this here we have only the mg65 bar the top navigation or sharepoint.navigation, and this is the content of your custom form.

B

So in terms of experience it can be frustrating. Let's see, um how does it work currently with a list for the demo? This is based on an existing list template which is available. When you create a new list, it's called the employee on boarding. As you can see, we have the SharePoint a bar. We have the common bar here.

B

We have the separator the bed Chrome when I click on new I got on the right panel, the the the form the list form available here and when I click on the existing item, I got also the right panel display here. I can go from display to edit state, and this is great Okay. So when we saw the default interface and then the default customization here, let me show you an example of some phone customizer that I already that I'm already running locally on my computer.

B

And here we are okay, so except the uh SharePoint up bar that isn't provided by the spls form hosting page. uh We produce the command board separator and the breadcrumb. Also you can see that we I have all my fields that are available. I can save, I can cancel it and we are some parameters that are really important during the customization. Well, first, the debug manifest file. Here we have the component ID.

B

We have also the page type, which indicates the states of our form which, which is the display, display new or edit states where the related list relative URL were coming from, and we are also the IG because we are currently working with with a list item. So let's have a look now at the code.

B

Here we are in the extension declaration class some information provided by the context that are specific to the to the phone customizer, where, for example, we have defaulted info where the list we have the item id the item and the item is specific to the 1.16 version of a shopping framework, if I'm not mistaken, and we also have other information regarding the form customizer context, such as the display mode.

B

So, like I said we got here the information if you are in edit display on you and based on those information, we are creating a new list, item, object or loading, an item closing item through pnpgs. We are getting all the fields that we need to to interact with. We are saving the e-tag e-tag is the unique identifier associated with a list item states and which guarantee that if you submit it to when updating a list item SharePoint online will give you two responses.

B

Two possibility of response. The first is uh okay, you got a new e-tag because you update the item, so the e-tag has been has been updated or the the item has been updating in the meantime by someone else. So you got a concurrency here, HTTP error code, which indicates that you have to update first your item before submitting it again in order to get the latest e-tag version when I'm clearing some odata info. That I don't need to, and my item is ready to be sent to my form, customizer components.

B

So in this component a very interesting things to to show we got the command bar the separator, the message bar and the background which are available to for display to to keep consistency with the user, the SharePoint online user interface.

B

B

On click, edit item method, which goes from display state to edit state by just changing the query, parameter page type and I, don't think that there is something that's there is a method provided by the phone customizer context to easily let us going from from display to another so going through the us such programs.

B

Then we got here on the submit, save item I'm going to just get my item properties states to sending them to my extension declaration class and I can also handle error during the saving process. Like, for example, I said the concurrency issue. When you're working with the etag, you can get a 412 error status code and display an appropriate message to your user or display another message depending of the error of source.

B

If we go back on the extension class saving method here, I'm just clearing some information regarding person Fields, because we are not working with this the same way when we are getting the person fin or and updating it in order to be sent for saving so removing this video in order to avoid an entity set error and then updating my list item or adding it here and during the updates I'm sending also the e-tag I saved before now notice, two methods that are provided by the form customizer context, which which are form saved and form closed during.

B

When you are debugging Your solution. It won't behave in the same way as when it's deployed. If I take the example of the form closed here, which is called when I'm clicking on the console button as I'm in debug I'm debugging my solution, if I click on cancel I'm, going back to my shopping home sites, instead of the list I'm working with, which can be a kind of frustrating, and it's the same for the save button.

B

So, to prevent this I'm using a global variable available in spfx, which is called debug and a FM debug in the debug state, I'm just getting the new e-tag value following my updates or or addition and saving it.

B

So I can so in order to perform multiple savings during my debug process and, of course, if my solution is production, I'm, just referring to the form, State and focus which will both redirect to the list, I've linked my form customizer to okay, we saw that we got a form, a custom form with all the fields that are declared here, with with also each field its events during changing to that estate Etc, which can be heavy.

B

There is another approach that is provided by the community here: I can just K, which is the dynamic form coming from the pin period, control I'm, going to update my code so to refresh also the user interface and during the the rebuilding process, we're going to have a look at the the pin control. So, as you can see, there are a few properties that are required and context.

B

The list ID the system, ID and events regarding saving closing an error during error method, which are provided on the submit error of who sum and Link the error in K in during the saving process, but I just have to mention my extension declaration class method and save and close that I showed you just before, and that's it going further.

B

Just have a look at the how to deploy once everything's ready, so there's no user interface to handle the synchronization between your components and your content type. So once your app is deployed on your site, collection, catalog or to not app catalog and of course you have to install the extension on the target site, you also have to get the content type of the resource. You want to associate your component to so here.

B

For the example, it was to the default item content type to for my list, employee and boarding, and see that I have my custom form component ID, which is a link to my three form, States edit new and display. Just to sum up about the dynamic form that I wanted to point out that it's the it's an easy way for this.

B

This reusable control to handle the all the fields, because it's generated dynamically from the structure and starting from this you have access to all your form and you don't have to worry about if the required fields are filled or not, which brings Quite Comfort, but you have to you can't handle the buttons as a common bar, like I, showed you before, because it's directly included in the diamond form, and the other thing is that for now the e-tag isn't handled in this control.

B

But in the next few days there will be a new property and that lets you decide if you want to take the e-tag in consideration or not, which is quite great but okay. Let's say that I want to link my content type. Let's hope that's everything's will find okay great.

B

So now, okay, so it doesn't work, that's great, but if I just perform a refresh and I hope that it will be fine if I click on new.

B

I got now my phone customizer linked to my list and, of course, if I click on Console I'm going back to my list if I click on an existing item, a majority to the display form and if I click on edit.

B

Now now the switch is automatically made, which is great Okay. So don't forget just to recap so, like I said to there is this, this user interface thing that is currently not provided by the SP list form that aspx but I, assume that in the near future, this will be replaced by the panel thing on the right, like it's natively used.

B

So in the meantime, just consider that you have to produce some key points in the user interface to keep consistency for your users also make the distinction when you are debugging versus when you are deploying the solution, because it's not the same behavior when you're, using the redirection methods provided by the phone customizer.

B

Is your friend like I said because it's really something uh important according to me when you are working with list forms and if you want to be sure that your users get the latest version and don't override what your colleagues are working on and, as you saw uh there is the possibility to link a different form, different extensions for different form States.

B

But it's not because it's available that you should do it just saying and to finish here are some links that will be provided in the chat you have to getting started with the with the Microsoft learn documentation. You have the article from which I I made this demo and also the source code, the documentation right about the dynamic form Temporaries of the control and, finally, a nice video made by Paulo about going further with the dynamic form, because it's about overriding the fields that are automatically generated in the form and that's it for me.

B

Thank you for your attention.

A

Fantastic, thank you and thank you for the the trip down memory lane there at the with your introduction. I definitely had some uh some shell shock there, foreign.