Microsoft 365 Community SharePoint Framework Extensions - Tutorials, 9 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Extensions Tutorial 1 - Build your first Extension

Description

This tutorial will guide you in building a simple SharePoint Framework Application Customizer extension using the SharePoint Framework version 1.10 from February 2020.

You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/build-a-hello-world-extension.

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 connects directly Chapman framework extensions tutorial series, and this is tutorial. One build your first shipment framework extensions, also known as a HelloWorld part 1, so we will actually start from scratch and start creating our very first SharePoint framework extension designed to extend or modify the modern SharePoint experiences, and this is January 2020 edition and we're using SharePoint framework 1.10 version with this.

A

So please note: if you're, using a newer version of SharePoint framework, there might have been small adjustments and changes here and there also please double check the documentation which is always kept up to date on those kind of changes. Now, let's actually dive right into it. So let me go to my Windows 10 environments. Let's actually go and open up a console because we start by yeoman generator.

A

Obviously you have to have installed already and the tenant has to be ready to go and your development box has to be ready to go and I'm, using basically the same environment which we used for the way part tutorials. If you have watched them as well. Now let me go to see and code where I actually have few of the tutorials or tutorials already available, and this is just a location where I'm actually storing all of my solution. Instructions I mean here.

A

Let me go and create a new folder called app extension and let's actually go to that folder as well, and then we're going to execute the yeoman generator. You know Microsoft SharePoint and that's going to start. The yeoman generator flow and in here commit then choose to start creating extensions, but let's actually go through one by one. So we've got a name and use the default value as subjects nation. We're going to talk it target SharePoint Online as the environment.

A

Technically app extensions are also supported in SharePoint 2019, so you could potentially use the SharePoint 2019 onwards, but we're gonna use the latest and greatest SharePoint framework version and also the latest and greatest their underlying platform. So, let's target SharePoint Online here we're going to use the current folder because we're already at extensions folder we're not gonna use the automatic deployment option which does work and is available actually folder for the list.

A

Amps or sorry for the shipment framework extensions as well, so you aren't able to from a one centralized location to deploy your SharePoint framework extensions to all of the sites immediately within your tenant, which is a super cool feature, but in this case let's actually stick and to a slightly more simplified model. So we're not going to actually automate that deployment, so we're going to say no and for the unique permissions we're not going to do that. We are targeting extensions and we're gonna create an application customizer.

A

We can actually use the default values or select the default values. The application customize a name and the description technically is not visible anywhere within the UI, but the name is being used as the name of the code file. So we might actually name things accordingly or understandably, so you know, what's at the solution is actually all about what the actual component is all about, but that now starts to yeoman generator creation flow, so the downloading all of the needed assets from online dependencies and all of that and that's going to take a few minutes.

A

So, let's actually speed up the video. When did the moment when the scaffolding is fully completed cute and now the solution structure has been created, select it's actually moving to the visitors to their code.

A

So let me actually start that one and we can actually click a quick glue gun the visual studio code structure, so I'm gonna, close the Welcome page and, as you can see, obviously the the SharePoint framework structure and the solution structure is pretty much the same. Ricotta saya, creating an extension or a web part, and one solution can obviously contain multiple web form of all extensions as well, which actually is more a normal case in production use it's rather than having every single thing as an isolated solution, but again depends on your design.

A

But, as you can see, the the structure is the same. We have the SharePoint folder, there's some new files in the SharePoint folder, which might be interesting, we'll get back on them slightly later, and we also have the source folder, and we have extensions rather than webparts subfolder there and based on our provided values. Then we created the application customizer in this folder now like with the webparts.

A

The application customizer has a manifest file which is defining the unique ID of the of the application customizer and then also the alias component type and the extension type and version information, and all of that and there's a few additional settings which you can actually control in here. The actual code is obviously a touch grid file and you can see that we are using the the base application, customize, a base class to get started and doing modifications on the extension and if we, if we have a look on more detailed, what's actually happening here.

A

The basic application customizer is actually quite simple. So whenever we are rendering stuff, we will get potentially a read a test message: property, so we're able to have a properties in the application customizer instances as well. So we're able to read that property and, if probably, was actually sent, then we'll execute that property. If it's not set, we can actually say new properties were provided. So you are able to program, exercise the behavior of an application, customizer or Chevonne framework extension in general. In this case, we aren't just throwing a dialog.

A

We they message hello from the title and that title is actually a string value which is coming as a an example. So if we go to the localization- and in here we can say actually that the title is being hello, world application customizer, so I can pretty much expect what happens when we're running this in the actual site. Now debunking.

A

However, we duplicate some customers is, is slightly slightly different so and that because under the local workbench, isn't really aware of the SharePoint framework extensions and that's because the list with common sets or field customizers, they would actually require a list behind of the saints so and you cannot actually test either even application customizers in a local workbench.

A

So what we're going to do is that we're gonna modify at the solution to actually test out and debug our experience in a live ship on site, and we can configure that or test that or configure that for this particular solution. By going to serve the Chasen, and in here we can actually say this pointer, which is saying hey whenever we aren't actually doing the background with the buckram and debugging. Let's actually start this URL and let's start with these kind of messaging that URL, so the debugging is as easy as possible.

A

So obviously the Condors of the chirpin that come is not my tenon, so let's actually go to my tenant and select the right page where I actually want to do some testing. So let me actually open up my browser and I'm gonna actually use sites that group as an example. It's a group associated team site as my test and environment. I can actually take that URL and technically load that as well, but what I'm actually going to do it just in case, go to the site pages and take the full URL pointing to the home.

A

Let's close that one. So we get the full follow, follow URL without any any confusion there on what's actually happening. So let me go and then copy that and paste that as the value now there are a few different configuration options and and with there's additional details in our debugging documentation how to take advantage. This, you can actually have multiple different serve configurations that the default one is the one which will execute my default, but you're able to have additional settings as well.

A

So if you want, you could have a slightly different URL here and then based on a command line commands, we can actually load that once we're able to test different kind of scenarios using the same solution, but in this case it's more than enough to actually update the default value, pointing to a write file and there's our test message.

A

Now, let's actually test this one out in practice, let's go to our console: let's clean them, the the console window, if whatever reason in the machine what you're using you have not actually executed at trust, desert cert- and please do that in my case- that has already been executed in this machine.

A

But they it doesn't matter to do it one more time and that's making sure that when I'm actually running the localhost, the actual local server serving my files, kind of from the base Austria code and there's no HTTP to HTTPS reference, confliction, confliction or conflicts, and so the loading works properly. So in my case, I already had that one executed and everything is up and running, but no harm executing that one more time making sure that everything is fine.

A

Now, since we updated to serve to chasten everything, it has been saved, I can do now pop surf and we actually start serving and not from the localhost. We start serving from the URL which we get provided in the serve to Jason, given the values and configurations what we actually have here.

A

So now, if I go back in here, we can actually see that we started a new tab within that URL and there's a a a warning basically saying, allow debug scripts, and this is basically a warning if, if you wouldn't be the developer and you're doing something, if there's a random URL given to you, click that one just in case. If you don't know what you're doing do you not load two scripts? But because we are developers- and we know what we're doing we're gonna click load scripts and there we go.

A

We can actually see our application customizer being executed. It is now saying hello from hello, world application, customizer and test message, so the name gamer as the title of the customizer. So one more time that was given as the title of the customizer, which is over here and then we provided message and the message was actually configured in the served adjacent as a parameter which we read in our code and then now we're presenting that information in a dialogue to all get everything works.

A

We are able to start, then modifying our extension to include additional things as well, but that's it for the tutorial part 1, so helloworld tutorial part 1 in the next tutorial. We'll continue actually extending this existing application customizer by taking advantage of the application, placeholders so specific elements on the page which we can modify and change or inject our own extensibility on them. But that's in part 2. So then this was part 1. So let's continue on the next video.