 It's been five months since the last release of the SharePoint framework and this week on June 21st, 2022, Microsoft released the version 1.15 of the SharePoint framework. It's a big release and includes a bunch of things such as using SharePoint framework to create custom list forms, new ACE actions for geolocation, updated support for TypeScript, ditching TSLint in favor of ESLint, updated support for Office UI Fabric Core or Fluent UI Core and React, and updates to project templates and includes one little oops. There's also a few things in developer preview like ACE card caching as in developer preview as well as an ACE action for working with media. There's over 19 issues that were addressed in this release. What are we going to get to? Well, in this episode, I'm going to summarize what you can find and share some additional details that I found after spending some time picking apart this latest release of the SharePoint framework. Hey, I'm Andrew Connell. This episode is also available as a blog post on boytanos.io and as a podcast on boytanos.show. Check out the description below the video for links to these other resources. Hey, I'm Andrew and if you're new here, don't forget to subscribe to get notified of my future videos for professional developers on Microsoft 365 and Microsoft Azure topics. Alright, let's dig in. Now I'm going to start with what's new as everyone wants to check out the cool new toys, right? The big news in this release is the introduction of a new feature that we've been asking for for a long time. We've really, we've been begging Microsoft for years and that's the ability to create custom forms for SharePoint lists using the SharePoint framework. Now this is something that we could do back in the classic experience days, but in the modern SharePoint experience, Microsoft disabled the ability to do this by ignoring the API properties on a list where we could set the URL of the pages for three different types of list forms. That's the new form, the edit form and the display form. So for the last few years, Microsoft has been telling us to use power apps if we want to create custom list forms. But that's not what we've been asking for as developers. Well, finally, they're giving us what we asked for. These are custom forms that are implemented as a new type of a SharePoint framework extension called the form customizer. Now let me explain how this is going to work before I comment on what's next. Now the custom form that you're going to define either using the no web framework template or using the React control is rendered on a new page and you have full control over the page, so much so that you're responsible for initializing, saving and closing the form. You're thinking of need to link up the form with a content type on the list, even if the list has no content types. It's going to have a single default content type that you can link to. So how is this going to work? Well, if I come over here and I look at the tutorial that Microsoft published with this release and I can jump down to the debug your form customizer, what you're going to see is we have all of these different properties here that are listed. It's new form or display form or edit form and it's going to be pointing to the client side either component ID or component properties. Now similar to how the other extensions work, you're going to set the extensions unique component ID as the content type forms client side component ID. That's going to tell the SharePoint framework which extension to load on this for this custom page and the associated component properties property is going to let you provide additional configuration information in the type of a JSON string for instance. So to deploy this, you're going to need to set these values on these properties on the content type within the list instance in production. They're not going to be done through the API, such as using the SharePoint REST API or the CSOM or one of the other helper projects like PMP PowerShell or the CLI for Microsoft 365. Now at the time I'm recording this, not all of those things are available. The API is definitely available through the REST API, but those other ones are probably going to come with time. It is a brand new release, so let's just be patient. Now just like the other types of extensions, the serve.json file can assist with linking this up on an existing list for debug and for testing. So let's go take a look at this really quick. I'm going to jump over here to a project where I've got one of these things created and let me, here we go. So here's a project here that I've created using the new template. So it's for SharePoint Online, a form customizer using the React template. So let's take a look at the code. So if I look at the code real briefly and if I look at the customizer type script file, what you'll see here is some stuff that we're used to seeing with every kind of an extension. You're going to have it on a knit method. That's not really important right here. We've got a render method and this is where you're going to render your form, just like you would if you're doing a web part. So in this case, I'm using a React control, but I could use anything if I'm using the Node.js option. It would just be giving me access to the same this.dom element where I can put my HTML in there. Just keep in mind that I'm going to be responsible for everything with this form and that includes going and fetching the data, that includes saving the data or closing the form and telling Microsoft and telling the SharePoint framework once I've saved it. You'll see that here where I've got these methods here where I want to define or I want to call this.form saved or this.form closed to tell the SharePoint framework that I'm done so that SharePoint can take over. The SharePoint framework can take over when it needs to. These methods here that you see, this is just pointing to a React control here and here I'm just rendering out a standard React control. There's nothing special about this. So you get the picture though. I'm just building essentially a web part that's going to take up the entire page. Now the registration piece with this, like I said, you're going to have to set those different properties on the content type. So you have to go find the list and find the content type, get his ID and use the REST API to set those component ID properties and the component ID property and the component properties property as well. But when you're doing this, when you're going to go test it out, just like the other extension types, the serve.json file is going to make this a little bit easier for us. So in this case here, what you see is I'm pointing to a form that we've created. So I would go to a SharePoint site. I would create a new list where I want to test this and I would go grab the URL for that list and I would whatever the new form of the edit form is, where the display form is, I'm going to then go in and go drop this, change this URL. The component ID, that's the ID of this component that I've created. So I can fetch that from the manifest. So here we can see it's 85d94. Come back over here to serve.json, 853.d94. The page type is telling us what kind of a page form this is. So is it a display form? Is it an edit form? Is it a new form? Root folder, that's the standard stuff that we normally have and same with the properties where I can define the JSON string for any properties that I want to pass into this. And so what this will do is it'll make it easy for me to go test my form control that I want to create. Going back to this tutorial here, at the time that I sat down to record this, there is a sample tutorial in the docs that walks you through creating one of these. It's real basic right now. But at least it's something that you can actually start with to go play with this. Check the description in this video for a link to this tutorial that I'm referencing right here. And oh yeah, you can bet that I'll be adding a lesson on form customizer extensions to my course on mastering the SharePoint framework on Vojtauno. So all my existing students, you'll get access to that. And all new students will get access to it as well. So stay tuned for when I let you know when that's available. Now, what's next with it with these form customizers? Well, Microsoft has already received a good bit of feedback for this feature. And I think it's for good reasons too. First, the deployment story requires some manual work. In the future, they may give us a way to define these custom forms on existing content types using that client side instance XML file that we have with other extensions when we want to do a tenant-wide deployment. But for now, this is kind of what we're stuck with. Now, to me, it's a little disappointing that their forms open up in that little side panel on the right, while our custom forms are going to load in a totally new page. You're going to lose context when you leave the list and you go to a new form. And frankly, I don't think this really feels like Microsoft is holding up to their initial promise of the SharePoint framework being both a first party and a third party framework. And we've also got this inconsistent experience with customizing a field. Like today, we can use the field customizer extension to change how a field is rendered in the tabular view of a list. And this is going to change the rendering whenever the field is used. But if we want to change the edit experience of a field, we can only customize the entire form. And frankly, this doesn't feel very polished or complete. It feels like it's been thrown together to check something off a list. And personally, that's just a little disappointing. But at least we can customize the form. So there's that, right? I mean, I guess. Now, Microsoft also promoted the Image Helper API in this release to generally available from Developer Preview. Now, I covered this in my SharePoint Framework 1.14 release episode and in the associated blog post. And what this feature lets you do is it lets you pass a URL to an existing image with the desired width and the API will resize the image, server side, save it in cache, and then return the URL to the new image. For example, say you've got a large image that's 1920 by 1080 and 1.2 megs. You don't want to show that on a web page. Instead, you want to go through and resize it and make it a little bit more performant. You can learn more about this feature from the link in the video description that's below. I've added a link to the documentation on this. Now, Microsoft also promoted two Developer Preview features that they announced in SharePoint Framework 1.14. It's two different adaptive card actions that we have. One of them is for getting a location and one of them is for showing a location. Now, these are supported within the Viva Connections web and mobile clients. And you can learn more about these from the SharePoint Framework 1.15 release notes that I've shown here and that are also linked in the description of this video. Now, the other ACE related things that were introduced as Developer Preview features in the SharePoint Framework 1.14 release, those are still in Developer Preview. And that includes things like the ACE media action type and the client side card caching and the action error handler. And those are all listed in the 1.15 release notes, but they're also in the 1.14 release notes as well. Now that we've looked at what's new, let's look at some changes to the SharePoint Framework that Microsoft has introduced in this latest release. And in fact, from my point of view, this is some of the best news in the SharePoint Framework world with this release. First, Microsoft has added Node version.16 to the list of versions of Node that the framework is going to work on. And this means your SharePoint Framework 1.15 project can use Node 12, Node 14, or Node 16, only the LTS versions. Also, going along with this foundational core upgrade, Microsoft is also, we're finally also able to use TypeScript v4. For the last few releases, we've been stuck on TypeScript 3.9 and 3.7 for over a year now, actually. But with this release, new projects will default to use TypeScript 4.5. That was released back in November of 2021. Now, I'm personally really excited about this change because it means that we can upgrade our testing infrastructure to use the more current versions of Jest for automated tests. For the longest time, we've been limited to working with two or three major versions back because the support for TypeScript v4 that was required for Jest preprocessors wasn't supported in the more recent versions of Jest. We had to use the more recent versions of Jest. We'd have to use a more recent version of the preprocessor, which was only going to work with TypeScript v4 and higher. So now, we don't have that limitation. We can bump up our test suite. Now, in the past, I've shown you how to upgrade your SharePoint Framework projects to use the more modern ESLint style of static analysis tooling to check your code by replacing the long, deprecated and archived TSLint tool. Well, with the SharePoint Framework 1.15 release, these steps are no longer necessary because Microsoft has ditched TSLint and they've replaced it with ESLint for all new projects. So what you'll see here is that in a, like for example, a web part project that's built with React, you'll see the tslint.json file that we would have in the root of our project, it's gone. We can see our eslintrc.js file, which is going to configure the, like the ESLint rules that Microsoft is including with the SharePoint Framework. It's gone ahead and it's put that file in the root of our project to support eslint. And in addition, under the package.json file, you're going to see a few more things here that are added just to support eslint. And then there's another one a little bit farther down in this case too. Now, new SharePoint Framework projects that use React, as its web framework, also for the longest time, have had the Fluent UI React library, formerly known as the Office UI Fabric Controls, or Fabric React Controls. The SharePoint Framework 1.15 release, it upgrades those Fluent UI controls, specifically, it's doing this to the Office UI Fabric React NPM package. We're bumping the version of that from 7.174.1 to 7.185.7. And that's cool because that version we're using now was released just a month prior to the 1.15 release. And following on that point, Microsoft has also updated the Fluent UI core package to version 11.0.1. That was released just two months ago, April of 2022. Now, this one was a long time coming and it was way overdue, honestly, because the SharePoint Framework has been stuck on version 9.6.1-Fluent 2 for the Fluent UI core package. More specifically, the package name is the Office UI Fabric Core NPM package. That was released back in September of 2008, nearly four years ago. So it's nice to see that we've fast forwarded to something that's just about two months old. Now, another thing I wanted to call out here was that React.js was updated to or wait. Actually, it wasn't. Now, I debated calling this out in this video, but after seeing Microsoft focus on updating the version of Node and the version of TypeScript, Fluent UI core and React, and then finally kicking TS Lint to the curb and replacing it with ES Lint, I kind of thought that they'd continue with upgrading React too, right? Well, I would, but I'm supremely disappointed that we're still stuck on React 16 for brand new projects. Well, consider the following. React 16 was released in April 2018. That was over four years ago. Seriously, think about that. None of us knew what COVID was at that time. And we were excited for box office releases, things like Avengers Infinity War, Deadpool 2, Black Panther. All of those things were big when React 16 was released. In fact, the React website doesn't even make the docs for React 16 available anymore. The current release of React is version 18. And while I get that the SharePoint framework team isn't always going to be on the latest versions of all the most modern tools, even the last major version of React, React 17, that was released in October of 2020. That was nearly two years ago. The last time that Microsoft bumped the major version of React for SharePoint framework projects was in January of 2019 with the SharePoint framework version 1.7. Look, this is really disappointing to me because the SharePoint framework claims of being the framework for modern SharePoint development, that's kind of being mocked by this inaction. Nowhere in software and IT would you equate the word modern to something that's four years old? What do you think? Do you think I'm making a bigger deal about this than it really should be? Or do you agree that Microsoft should prioritize this? Would you let me know? I mean, let me know by leaving a comment in this video below and make your voice heard to Microsoft. Tell them that we need support for React version 18 in the next release of the SharePoint framework. Now, I did notice some minor changes to the code for new web parts and some other project templates that were created. So what I want to do is I want to jump over to a place where I keep track of all the changes when they make a new release to the SharePoint framework. One of the things that they did, if I come over here, let's look at the, let's say we're going to look, let's come over here and look at the commits and I'm going to jump into, let's look at the React web part as that's probably one of the most common things. So a couple of things that they did here. If I go look at the default code for a brand new web part, one of the things you're going to see is they've moved the on a knit method to come after the render method where before it was coming before the render method. So it's just a little bit of reorganization stuff, not really that big of a deal, but hey, that's what they did. And the other thing they do is they've also wrapped the settings on some style properties and an if statement. So if I come down here and look, you'll see that I have this new semantic colors. Well, that was already being set up here in the get environment message. And here, what you can see is they're just now, they instead of just setting those values, they're now checking to see if it's defined. And they're also adding a little bit of checking code as well to say that if the body text isn't defined, then we just set that property equal to null. So just being a little bit more defensive with their code there. Sounds like somebody must have hit a bug or had some errors that will pop up when they were building this stuff. So that Microsoft went back and tried to make it a little bit better for them. There really weren't any other properties that were already changes to the web part templates. It's really worth mentioning. There were some tiny stuff, but it's really not important. Let's talk a little bit about the ListView command sets code because that was updated. And their last release, if you remember, Microsoft changed how events and the state work with the ListView command sets. I covered that in my 1.14 release post and video as well. Now in that post, I also mentioned that while we're supposed to be using the new code, they were still including the deprecated code, which to me didn't make a whole lot of sense. And frankly, they agreed and they updated the extension template to stub out the new correct code. So if we come over here and look at an extension and I look at the default code that's created for this, what you'll see now is here in the on a knit, they have added the code right here where they're going through and using that new ListViewStateChanged event and adding it to a handler. So this onListViewState changed and then they've gone ahead and they've added our onViewListStateChanged where we can go through and add our own code here. That means that they also got rid of this function here called the onListViewUpdated that we no longer have to deal with anymore. So that's good. They updated the codes and now when we create a new ListView extension, we get what we're expecting now. Now the last thing I noticed was that the template that we used to create a new library component was now including a feature in the packaged solution JSON file. So you can see that right here. Now when I asked Microsoft about this, it seems that this was by mistake and they've already said that they've removed it from the Yeoman Generator. It's just not in the 1.15 release. It'll be in the next release presumably so 1.15.1 maybe and I guess we'll see that probably in July of 2022. Now the release notes for the 1.15 release also include about 19 different things that were fixed and you'll find those at the bottom of the release notes right here. So I checked the release notes again. I've got the link to it in the description below this video that you can go take a look at all the things that were actually fixed. So my goal with this post was to give you a solid overview on everything that you're going to find and then some and in this latest release of the SharePoint Framework version 1.15. What do you think? Let me know by dropping a comment below and let me know what you if you want to see more videos about the SharePoint Framework. And if you like this video, I'd really appreciate if you give me a thumbs up and subscribe by smashing that big red subscribe button below the video. So you'll see when I publish more videos for professional developers related to the SharePoint Framework or other things like Microsoft 365 and Microsoft Azure, but specifically on topics related to the SharePoint Framework. Thanks a lot. I'll see you in the next video.