Microsoft 365 Community Community Demos, 2 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on building custom list form components with SPFx v1.15

Description

In this 15-minute developer-focused demo, Alex Terentiev and Vesa Juvonen introduce a new component type in v1.15 called Form customizer that enables development of custom modern forms with custom edit experience. Delivering API level support for content types with 6 new properties for separately configuring new form, edit form and display form. Look at how to debug your form customizer and how form customizer will work in your production environment. Changes to JSON configuration, use of DynamicForm control. List extensibility roadmap reviewed. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• PnP Tool - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• PnP Tool - PropertyFieldListPicker control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/

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

What we wanted to do uh is quickly explain uh once again on on what the sharepoint framework is all about and just recap again guiding people if you're not familiar and you're coming first time on a call. Sharepoint framework is really the easiest way to build. Your enterprise solutions is microsoft, teams, microsoft, viva and sharepoint online, and this is not going to go away. So we keep on investing in here. We, our team, was actually engineering, the invo split by two and and we're multiplying the resources, which is great.

A

So uh it's awesome awesome to see the adoption and one of the os we can see. We've been introducing additional capabilities for microsoft, figure, connection and microsoft, teams more and more as part of this journey. Now we will have a new component type here, starting with one sharepoint framework 1.15, which is going to be then called form customizer and alex is going to do the live demo on that one today and that's going to make this flight even more squeezed. So that's going to. I need to have some creative thinking on.

A

How do I adjust the slide, such so smiles? Now, one of the key uh asks what we've been having from a day. One of sharepoint framework is to allow a development of custom modern forms with a customer edit experience and, as we start this journey we're looking into doing uh this in a full page transition. We already are having the getting the feedback that maybe a panel way supporting panel way would be nicer as well and we're looking into that as well.

A

um It is a journey we'll start with something and keep on evolving that from there, but what's going to happen and you'll see that within the demo as well, is that you can associate a custom component which will take over the whole canvas and you can basically render or do whatever you want within the form. So as we're clicking the new as we're clearing the view item or an edit item, you control how to what is what are the options which are being exposed uh in the control level?

A

As part of this release as part of the plan, we are also introducing a new set of season, api controls and properties, initially again in season they're going to be in a graph api at some point, but starting from the season look at buckets, 16.1.22518.

A

12 000, which was released actually tuesday. This week publicly. We have now six new properties uh available in the content type, and these are the ones which we can use then to basically say for sharepoint that oh there's an item within this list, which is content type id of this, and as that's getting rendered, you should be rendering that using my custom component and then the component properties are there as an additional way of parametrizing the execution.

A

So you can provide parameters to the component based on the instance uh how it's, where it's being associated so one example of that one quickly would be. You would be basically saying for the same components. You would be identifying for text values or adjusting properties or configurations how the component is behaving between the new form display form and edit form. You do, though, actually get that in the context as well, so it's the user watching that form in a which form type. But now, let's not actually spend too much time on explaining this.

A

Actually, let's see it live and alex can do the live demo, which.

B

A

Complex than the previous one, which we showed on this.

B

Let me share my screen yeah, so for this demo. I have this uh list product list with a few uh columns in there and what I want to show. I want to show two scenarios, first of all, how to debug your phone customizer and the second one, how it will work in your uh production environment.

B

So, first of all, I already have this uh solution prepared in here. So if we compare what we had in previous battery release and current rc release, we changed the server the json configuration right now in all the configurations, you don't see the content type id property in here, and this is because we kind of simplified how your uh form customizer will be applied to the list during the debugging session. So you don't need to go to the list uh check for the default content, type check this id and put it here in the server.json.

B

Instead of that, if component type id content type sorry id is not defined in the in your server configuration we'll just grab the default content type from the list and apply your formal customizer to this default content type. So basically, the debugging process in uh rc release is much easier than it was in battery release.

B

So another thing that I modified here in comparison to default scaffolded project, I'm using dynamic form from spfx controls, react pnp controls, and this is kinda basic scenario that you can use for a new and edit form it's uh kinda.

B

The control itself grabs all the fields from the content type and creates a beautiful form for you and the main thing here for the on submitted and on canceled, I'm providing the on close and on save from our form customizer, and this on save and on close methods are here, and you must call this form closed or this form saved, because these calls will kind of notify our core uh as perfect score to close your page and redirect you back to the list or the home page of the site.

B

So now let me show you how to debug the solution, so it's pretty similar to- and I know it's probably a little bit small but basically what I'm doing I'm just doing gulp serve and let's wait probably for a moment or two or three here we go.

B

Load, the box scripts, everything as you usually do with any other uh sharepoint framework solution, and here we are basically based on the configuration we have in uh serve the json file.

B

I have page url here that is for my specific site. I have root folder, which is my list and page type. 8 means that the default configuration will be for new form the same like here. If you want to uh debug edit form, you need to provide page type, 6 and id of the specific item. If you want to debug this play form again, page type is changed to 4 and you need to provide id.

B

Let me go back, so, as you can see, the form is the rendered. You can do some tests from demo.

B

Select some color whatever it is- uh click save and because it's a debugging not not tied to the list. You will be just redirected to the home page because we don't have kind of redirect url in our parameters, but right now, if we go to this product list, I actually have uh set the new form, client side component id and edit form client-side component id for this list, and this is how your form customizer will behave in real life scenarios.

B

So if I click new in this list, you will see that we are redirected to this specific page. Splish form.spx is pretty similar to uh behavior. We had in classic sharepoint with the custom forms and again you have the same basically the same format here if I select- and in that case you're redirected back to the list itself, because we have correctly provided all the parameters when you click on this new form same. If I select some item click edit again, because I have edit from client side component set to this form.

B

Customizer again, I have the same experience but because I didn't set the display new form, client side component id the behavior for display form is still the same. So if I click on this item, I will see the panel. So this is the flexibility you have. So basically, you can separately configure new form, configure edit form and configure display form, and that's all I have, I believe so. Yep.

A

Let's go back on the slides I'll, do a quick recap on on what's going to be available in 1.15 and then the things where we need your feedback still and I can actually close up the call see patrick we are right on time for now. I am I'm amazed.

B

I am truly astounded and proud of us all.

A

This is the first time for three months that we're on time so on the least extensibility role as part of the 1.15 release candidate. Again, we do support overriding to item level new edit and view forms association is done in the content type level, not in the list level. But again it it's a matter of an opinion. Every single list has a content type behind of it.

A

Are you seeing that or not from a ux as a separate setting, um and then there was a question good question from uh uh tim already in the chat, so if you're using content type pop listing or if you're, using content types from root of the site collection, and then you use those in the sub sites or in the lists, this information does get replicated uh so-called child content types. If you're not super deep in the sharepoint. That might make no sense whatsoever for you, but it's it's it's as any data.

A

Within that content type level, we will have the api support for associated custom, rendering component at the content type. So you can do this uh either as part of the installation event and element xml, or you can do that programmatically as you're provisioning things. Now, if you're using a tenant wide deployment option, then you cannot associate element xml on that solution.

A

So there's a bit of a thinking on how do you associate uh that content type level extensibility in and and we already have a tutorial on how to get started with the initial documentation initial process? uh It's not super complicated, actually, but we're working on a a bit more complicated, a bit more throughout sample and tutorial on explaining all of the saving and the creation of new items, and all of that as part of this journey.

A

Now, what's in the roadmap or in the plans- and these are basically in the plans without any eta- is to support showing custom components in the list context panel. So basically we talked about that one internally. For now, we need to transition to a new page uh potentially in the future, maybe depending on your input, depending on how you are giving us the input. Is this important or not, and then we can actually have that discussion internally with list and library team to enable the panel level extensibility.

A

But again we need to get your input on that. We will also support overriding of list default views, potentially maybe in the future. So basically, when you go to the list right now, there's no way for fully overriding that full list of all items that overwriting does not exist. uh We talked about it internally right now. There are no eta, no explicit plan on that, but it's technically in the map waiting for prioritization and let's see how that will actually work and then tenant right from deployment list support for the list.

A

Extensibility components we talked about that one, not yet at least in the in the timeline and that's part of the 1.15, but we kind of acknowledged the requirement that it would be nice to have a way of associating, um for example, these components to all document libraries cross to 10 and automatically from a single location so having that kind of a tenant level control, but they don't quite deploy.

A

The extension list is actually providing, but again not yet in the 1.15, so the future versions will have then additional capabilities based on your feedback, based on your input and analysis. Last bullet point on the slide. Please please let us know what works, what doesn't work? What do we need, because that is super critical for us on adding additional capabilities within the sharepoint framework.

A

Now, that's pretty much it. We do have four minutes. I can answer a few questions in the chat that there was a question related on governmental tenants. There should not be any delay on getting this in governmental tenants uh again. The the this is just typical low-level sharepoint framework component, so it is rolling out as a normal feature and there should not be if a sharepoint framework is supported there. It should get this one there in a normal rolling out way.

A

So whenever we are rolling it out and enabling that to the tenants, I guess there's a small delay a bit longer delay with governmental, tenants and gcse and tsa high on when the features are enabled.

A

Are the settings included in list designs?

A

That's a really really good question. That's a really good question. We need to follow up on that, uh just making sure that we're actually taking that into account in the list designer list templates so basically as you're provisioning, your site, template or or design on top of the existing site, you will be able to enable these components to be available in the libraries. Now there is a bit of a catch there, and so, as the association of the component id is done in the content type level.

A

It's not 0x0101 for item because item has a unique item, content type as a unique id in every single list, where it's being associated. So there is this a bit of a catch uh related on association and and we we still need to do some level of planning how we can control this more efficiently. Because again, the the document content type used in a different document. Libraries throughout the tenant- will have actually separate content type id based on the instance of the library within antenna.

A

So that's why the runtime resolution works, but we still haven't figured out. How do we do this tenant wide? Something which we will follow up for sure. A good question from chris, oh jim duncan, has one more question to do so.

A

We won't be able to use this in private server channel, since we don't seem to be able to use custom content types thing, you don't have to be a custom content type, so you can associate as a custom these components to any content type within the tenor, just to be clear that doesn't have to be a custom content time good. I guess that's it.