Microsoft 365 Community SharePoint Framework Tutorials, 8 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Tutorial - Provisioning SharePoint assets from SPFx solution

Description

This tutorial will guide you in using SharePoint Feature Framework in the SharePoint Framework to provision SharePoint assets to sites when your solution is getting installed on the site.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/provision-sp-assets-from-package.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

A

Welcome to this getting started to SharePoint framework tutorial series, and in this tutorial we will be provisioning ship on assets as part of your shipment framework solution. So we're going to use a classic so-to-say classic feature framework as part of the SPP KJ's file, and we never do. We install the solution explicitly to a sign. We actually use those feature framework elements to create us a columns and content types and lists, and we can even upgrade those things as well.

A

It's really important to realize that this capability only works when you argues in the site scope deployment option, so this option is not available if you're using the tenon point deployment option of your solution.

A

So please consider that when you are designing your solution, this video has been recorded in January 2020 and it is using SharePoint framework, one point, ten version and if you're watching this video later on and with a new shipment framework version, please check the code or the documentation because we keep the written guidance always up to date, then the videos are slightly more infrequently updated, but let's actually get into the actual tutorial.

A

So let me jump into my Windows 10 machine and, let's start by again going first on on the right location, where we actually have or where I'm storing all of my tutorial code in this clean windows, 10 machine that wasn't my intention. Actually I just wanted to clear up the console. I mean here: let's actually create MD assets, assets, deployment, porch, folder and let's actually go there, and in here let's execute the Microsoft SharePoint yeoman generator, which will basically then use to create us the basic structure.

A

So in this case we're not going to actually concentrate on the web part as such we're going to concentrate on on deployment of individual assets as part of the web part deployment to a site. So let's actually use the default entry as the solutioning. Let's target SharePoint Online doesn't really matter. The adoption is supported by all of the environments I'm going to use the current folder we're not gonna support a non-white deployment.

A

So this is a really important I think because if you would be using terrified deployment, these additional feature framework assets would not have any impact, so they're only applied when you are explicitly installing the solution to a specific site, so really important thing to understand and we're not going to actually have any unique permissions I'm going to create a bit part.

A

Technically, we don't actually even use the web part we're just going to concentrate on deployment of the of the assets deployments web part and there we go and no Chairman a JavaScript web / JavaScript framework. That's going to now start the scaffolding and we're going to speed up the video so saving few minutes of time, rather than watching things running in console. So let's continue within a few seconds and there we go.

A

Construction has been created, so let's actually modify the solution structure and have some assets deployed as part of the deployment of the solution to the SharePoint site. So, first of all, let's actually create a a new folder, so in in here let's actually create quickly a SharePoint folder, which is going to be actually automatically created. For us, whenever the solution structure is also being created or packaged and put in here, we can also create assets folder and in the assets folder.

A

Let's create elements, elements dot, XML file, and this is basically then intended to define and what kind of settings and what kind of well what kind of assets will be deployed and created as part of the deployment to the side and I'm going to copy the XML structure directly from the from the documentation. But let's have a look on what's actually happening here. So this is elements XML file, we're using the classic elements, XML structure, which has been in SharePoint since 2007 version and we're basically creating here a currency field.

A

We are creating here, a field choice field. Then we are creating a content, type called cost Center, which is actually referencing those two fields, and so the unique goods of those fields. And then we are creating a list instance which is using a custom scalar which we haven't actually created. Yet so we're going to create that one in a second, with a feature ID with specific feature ID.

A

That is actually feature ID of a custom list, a normal custom list, which will be a template type of 100 and it's going to be created in the S BFX list. A URL named as FB affects the list. So that's. Basically, there are instructions for creating a custom list with a with this with settings and we are creating fields and content types in a site level, so we haven't actually associated those things to the list and that's actually what we're gonna do next in this game is awful.

A

So let's create a new file here right next to the elements XML file called schema, schema out of XML and schema XML file contains then following XML structures. So let's have a look on actually what's happening here as well. So- and this is typically the schema XML file, it's much much more complex and much much more sophisticated. This is quite simple, but this is almost like the simplest xscape as possible. So in here we are referencing the content type which we created in the elements XML file.

A

We are also creating a view to that list and then, in that view we are basically setting this perfect amount and SPFs constant or which are the fields which were created in the elements XML file. Let's go back in here, SPF X goes to enter and SPF x amount.

A

So if we go back in the schema file, we can actually see those fields being referenced, then, in the view, so in the basic view- and we have some standard settings and standard configurations which have to be here so basically, what we are doing is that we are creating a custom list with a default view having those two different columns available or visible. So let's save the settings and everything is fine.

A

The next step is then to make sure that whenever the solution is getting deployed, we tell SharePoint that these two files actually exist and and SharePoint should change its behavior based on these two file. So let's actually go to the config folder and packet solution, Chasen, where we actually define the solution structure. So girls, that this has this may be Katie file, has the version details and the name of the file as well, and we couldn't modify the slightly. So, let's actually modify this by having additional features section where we then actually define additional settings.

A

So I'm can actually do here. A comma and I'm gonna copy the additional settings from the documentation so that we get everything correct here now in here, and there say a good notes, update ID with a new, a good mood good, and this is a good practice because and we can actually just do a random period, so I can actually update that one to be something, and also in that something else. So we know that it's a unique in good, rather than always isn't the same, do it what we have in the documentation as well?

A

So let me actually get with us now now. What we're doing here is that we are defining a SharePoint feature framework feature. A custom feature sure beats is created automatically as part of the packaging of the solution. So whenever the solution is getting the point at a site level, we will have a feature named it as a deployment web part client-side solution with the description of that one.

A

We could absolutely change this to being a slightly more descriptive with a unique grid of that and a version 1.0, and that includes elements XML file and schema XML file, so those files which we just created and that's basically the the only Association which is needed between the files. So let's actually test things out and test that everything is working properly in the site level. So, let's clear up that most likely, let's run Gallup bundle and in this case we're not really interested on actually packaging the actual code.

A

So it doesn't really matter that we're not using the ship switch because were really concentrating on the on the asset deployment part of the solution, packaging. It's making things simple and supplies well in this scenario in this tutorial and then do gollup packet solution, so we actually create the solution file.

A

There we go and that creates then the the shipment folder in here. Well, we created the SharePoint folder already manually, but it would have created a SharePoint folder and then it created the solution folder and then it created the debug folder and now we can actually see in the debug folder. We have everything. What's inside of that open XML file SPP case you file as an open, XML file which contains all of these assets, and if we have a closer look on here, we can actually see that there is a feature file.

A

It's actually the word wrap, there's a feature. Xml file called as a deployment webparts solution. There are additional features. There's the schema XML file. We are deploying content types, we're deploying other assets as well. Actually, that's the feature file where we actually have to filled field and content type and less than certain information. So the element XML file, which were created most basically packaged inside of the SP pkg file.

A

And now, when we activate that in a site level, it will then create these particular assets in the site, collection or in the site where it's actually being activated. Now, let's actually do that.

A

So, let's, let's open up, let's open up the solution- folder, oh not open in terminal that was environment intended to do, but so I can do actually Explorer from here as well, so that works and so there's our as a deployment report and then let's open up our app kettle, so we're able to test out things as well, so I know that I'd in in my case, that's actually refresh that get the URL properly and slash sites lost apps, which is tab catalog in this particular tenant.

A

So here and there's an avocado exists quite a few other solutions here, as well already so that we don't have to worry about that. Let's actually track and drop and that solution file in and that's going to be then validate. It will be, can see that it's still pointing to localhost doesn't really matter because we're not actually going to even test at the web part we're just concentrating on provisioning of the actual assets. And then we can one main point here to understand: it is not a tenant deployed option. So that's being true.

A

So, basically, you have to install that explicitly to a site when their settings will be applied. Now, let's actually do that. So, let's go to a to our croup site or a team sign doesn't really matter which side we're gonna use. So in my case I'm going to just use my croup site, which is an existing site in my tenant.

A

You can use whatever side you want I for testing the phone line capability and then let's go to the site contents and then let's actually choose new, an app which might be slightly confusing but its its beauty taking advantage of the app infrastructure, so we're adding a new capabilities. That's that's the capability and we can actually see the as deployment webpart client-side solution option here available. We click that one we'll get some additional details, and that starts the installation. So in my case, I actually have a one web part already install.

A

Don't worry about that one! We are now installing the asset deployment where Porsche at this site, and we can now do f5 until the installation is completed now what's interesting here, I did an F I'm and we can already see the SPF X list being generated and we can actually say that the other assets are being generated gradually as well. So, let's click the five until that has been properly deployed there we go.

A

We can see the SharePoint SPF X list file that lists the definition here and we can actually see if I close that one. It is a list which has an amount field and a cost center field immediately available. So, basically, now as part of the deployment of the solution, we created a list using actually a system account. So whenever the user created added the solution to the site, we created the system account credit also the list and the needed assets for it and your web part and solutions can take advantage of this configuration.

A

So you could actually have a let's say, a ship one framework, port or an extension, which then is saving or storing information to this site or this list, which could be not just as well hidden, so it doesn't have to be necessarily visible for the end users as well plus you can see from here.

A

We have a cost to enter and go standard, had some choice, option, values, and if you go back in here, we can actually see that the cost center had choice, values like administration, information facilities operations and we can actually say the same values available there. So we basically reorder generated the field and configuration for that site. Good.

A

The next times is really around and ok. So what? If I need to actually modify this list? So how would I make sure that this lists has new columns or other settings if that would be the used case? So what if I need to my web poured on business logic is going to be changed. Then I need to add a new column here and sure you could actually guide and user do that. But if you have hundreds or sites you want to explicitly update solution as part of the update, salut update operation.

A

We would then automatically change the list structure and let's actually work that true as well. So we cannot take advantage of two different elements called apply, element manifest and add content type field elements. So let's actually do that. Let me close everything else from here and, let's close the terminal to make things more understandable, so we are in the solution structure, one in the assets folder and in the assets.

A

Folder I'm gonna actually create elements v2 and dot XML file, and this is going to be basically our let's say, a additional element which is going to be deployed as spawned of our v2 version of the solution and let's actually copy that one and in here we are basically saying that hey. We want to have a new SharePoint instance or list instance, which is going to be called new list, and new list formations from v2 is the description. So quite simple scenario and simple scenario, but you'll understand the basic structure.

A

Now you can, then, then we need to do an upgrade actions we to XML. So basically, we need to do any instructions for SharePoint that whenever we are moving from a v1 to v2, this is what's going to happen, so I'm going to actually create an upgrade action suite to XML and then I'm gonna copy, the information from the documentation and what's going to happen here. Is that we're saying for SharePoint that whenever we upgrade from a previous version, please execute this XML file, which is going to be located.

A

That's the folder name of the feature or the unique ID of the feature, and then it's going to be named elements v2, XML and like actually names over there. How would I know what is the screw it in here is that I can actually check that one out, if you using a few different options, so I could actually them probably. Is this way it's good at the packet solution and we can actually see the unique ID look unique IDs over there.

A

Sorry, sorry- and we can actually do easiest way to actually do that- is to have a look on the on the debug folder. So we can actually see what is the pointer and destruction in here as well. Now we need to make sure that I actually know the slightly confusing app. So we need to make sure that that good is matching on the feature framework IDs. So in here we have the fish framework ID.

A

We can actually see that the elements file is in a feature framework ID, a specific folder in the solution package, and that means that indoor productions we actually need to update that one accordingly as well. So that's going to be then matching on where the elements v2 file is going to be located and we can easily actually test things out as well.

A

So whenever we do packaging, we can double check that that's working properly and let's get back on that one in a second now, let's go back on the bucket solution, because we know we need to tell that we have a new version available. So let's actually upgrade. Let's up create the package as a v2 which, and let's have create the feature more importantly, Cassidy. Technically the packaged version isn't well, that's indicating a version chains and the feature feature is indicating a virgin since the cell.

A

So it's a good practice to keep them in sync when you are doing these kind of operations and then what we're doing here is that we are including a production settlement inside of this solution structure. So, basically again, what we're doing here is that we are saying whenever there will be a feature framework upgrade please execute, and this XML file and the upgrade action. V2 is basically the file which we just created, which is saying ay-oh, there's enough production, so a spawn of the upgrade action.

A

Please execute this XML file, which is the elements weight to XML and based on that one. We will create a new list available on the site. Hopefully that makes sense, and obviously the basic structures and everything else on the model which we are using here has success that in SharePoint since 2010, so the same model which were behind of the scenes using here is actually what we use to have an on-premises and that's part of the farm solution, deployment options.

A

Now, let's get back on the console side, let's clear up that done: let's actually do some packaging, so called bundle and.

A

Technically the package solution would be enough in this case, because JavaScript isn't being used, but still, let's run the call bundle. It's a good practice actually make that happen, always first and then do a package solution and that's going to now create the actual SP pkt file, the dope and XML file, which contains the v2 version of the solution. So let's actually do that and let's have a look on what most actually create it as part of in here. So let me extend the SharePoint folder.

A

Let me extend the debug folder and in here we can now say that inside of that folder, the unique grid, we can actually see the V to upgrade actions available, and these are the one the way which we actually points and elements XML elements v2 is actually missing from that folder. So we know that we did actually forget about something, and that is true. I didn't actually a mistake updating into package solution. So let me go back on the packet solution and we can actually see that I didn't include the v2 version of the elements.

A

So, let's actually include that one in here there we go and like it is actually in the documentation as well. So I didn't do that properly and paste that one in and save it and let's rerun the code pandal and also the coop package solution.

A

So there's called bundle.

A

The next one was the baguette solution and then let's actually double check again what we have on the sharepoint and the folder over there. So we should see that folder being updated and as we can and we can actually see the elements feed to file now being properly included in the package. So we know that that XML file is included in the SP pkg file, because the content of the debug folder is actually the one which says inside of the SP big AG far, and that means that we now can actually do to upgrade operation.

A

So let's actually make that happen. So let me open up the actual app catalog is in. Let's actually go to the app Kanak there we go and in the SharePoint app catalog. Let's actually then track and drop a new version available, so I can drop that one in and it's going to basically say that solution already exists. One thing, maybe to notice here.

A

The solution is over there and it's saying right now: version of one point: zero point: zero, zero and when we do replace, we can see an update happening there and there's a confirmation that this this, what you actually want to do so, let's click deploy and we can actually say that the app version being two point: zero, zero, zero, zero and, as part of this deployment or a new version installing the new version we indeed not yet up, creating anything on a site level.

A

So let's actually go to the site and let's go to the crips because of this model. I'm. Sorry croup is the site URL, because this model takes advantage of the SharePoint app infrastructure. These updates are not automatic Ida, and so what actually happens here is that you will have a look on the asset department with our solution in the site level.

A

If you go to the details settings we can actually see that there's a new version available on of the SAP so and we can actually click now to get it to actually start the upgrade process. So let's actually do that. So, let's click that one and we'll go back on the site contents. We can actually see that the installation is now to happen and after a while it will start doing the refresh within a 5. We can absolutely see the new list getting generated after a while when Shipman starts.

A

Reading the XML file start reading the installation instructions start reading, what's going to actually happen with the new version of that particular solution, and there we go now we can say the new list getting automatically generated as part of the update of that solution and refreshing that one.

A

We can actually say that the update is is completed in any moment of now and that's going to be then running the v2 version of the solution, but we can already see the list available in here, and that was just a normal custom list with no additional configurations and we do support. You can absolutely also modify the existing content types. You can actually include settings on the existing list. You could upgrade some additional settings on the underside as well so well. There are multiple different options which are available for order for the asset provisioning.

A

But the key point to understand here is that, if you prefer to use the tenon deployment option, this option is not available for you, so you cannot actually take advantage of the asset provisioning in a site level, because the other provisioning basically is dependent on the operations at the site level, including to upgrade operations at the site level, also a good thing to notice that whenever we actually updated the solution in a hub catalog.

A

So if this web part, if this solution would have actually contained a web part that web part code would have been updated already at the moment when the amp catalog is being um catalog, site collection is being updated.

A

So whenever we install a new version of the solution in work, that means then at the same moment, we already run start executing a new version of the web part code or any other JavaScript code, because then those assets are centrally located, but the actual asset level operating only happens when we explicitly go, and we went basically to the details of the solution and we explicitly start at the new version upgrade operation which can actually do using API as well.

A

So there's an option of doing that and with using the ALM API is in a slight level as well, but that's it for the asset provisioning. So you can take advantage of the asset, provisioning and the feature framer structures using the classic feature framework elements with them in PI, including this XML house. As part of your solution, definitely an option. Good advantage.

A

Point also call out that this, whenever you're doing this all of these upgrades and everything else are being done using the system accounts so that they are being created by sharepoint system account rather than if you actually provision the lists and assets and columns using your webpart. Then you're dependent on the permissions of the user and so something to be aware of something to evaluate based on your overall design.

A

What are you actually or how do you define or how to provision potential lists which might be useful for your solution, but that's it for this one, and hopefully you find the guidance useful.