Microsoft 365 Community Getting Started with SharePoint and Office 365 development, 9 Jul 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with SharePoint Framework Application customizers

Description

In this video Andrew Connell (Voitanos) is showing how to get started with SharePoint Framework Application customizers, which provide you an option to embed JavaScript to any modern page in SharePoint Online or in SharePoint 2019. You can also use application customizers to include your custom functionalities in the UI of the modern pages.

Presenter - Andrew Connell (Voitanos) @andrewconnell

More on SharePoint Framework application customizers from official SharePoint developer documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions

More details on the SharePoint developer community from http://aka.ms/sppnp.

A

I made your column from boitano's and in this real quick video I want to show you how to get started working with application customizers one of the three types of SharePoint framework, extensions that are supported in SharePoint, 2019, on-premises and sharepoint online. So what I've got here is a SharePoint online site that I've already started with, and we can see. We don't have anything special here when I refresh the page.

A

What I'm going to do is I'm going to jump over here to my command prompt and I've already created a subfolder here called app cust, oh one, so I'm going to start by creating a brand new project.

A

I'm going to do this by running the yeoman generator for the SharePoint framework, and we first asked me a couple questions now a lot of these answers.

A

It doesn't really matter so I'm, just gonna go ahead and accept a lot of these questions, the default answers and down DM, it's gonna say what kind of a component do you want to create: I'm, gonna, select extension and then app customizer, I'm gonna, leave it as the name of hallo world, because it's our first step, customizer and so legally we have to choose hello world, that's a joke and it's gonna go ahead and create my app customizer.

A

Now, in the interest of time, I'm going to use the power of video editing to skip ahead once we've installed, all the dependencies using NPM install as you can see here so bear with me, we'll be right back at this point. A project is created installed all the dependencies. So now let's go and let's open it up inside a vs code.

A

So here's my project inside a vs code. What I'm going to do is take a look at the folder and the files that have been created so here under extensions I, have my application customizer now. The only thing this does is in the on an it is simply gonna write a message to the log. Then it's gonna figure out.

A

If a message has been passed in using a public property on this extension, we can see that's defined right up here inside of our interface and then I'm gonna write a dialogue out to say: here's hello from whatever this message is, and we can see that this test message is something we can pass in now to test this we're going to need a live SharePoint page.

A

We can't do this in our local workbench we're going to a live real SharePoint page and what we need to do is we need to tell SharePoint to load the SharePoint framework to pull the manifest from our local machine, where we're doing our development that contains all the information about our components, such as where the JavaScript bundle is, and then we also have to tell it what component to put on the page.

A

Now we can do all that using the query string or in the URL parameters, but Microsoft has given us these serve configurations that makes our life easier. Where we can specify the page, we want to debug what custom actions we want to load. This is going to be the gooood of our component, which is found right inside here inside of the manifest file for our component. So we can see this ends in 4329. I come over here and look at serve JSON. It ends in 4329. What are we adding we're?

A

Adding an application customizer and here the public properties that we're gonna define and we can see test messages. Our test message, that's being passed in as a public property. What I'm going to do is I already have a site that we're using so I'm gonna go grab the URL for this site and then I'm gonna come over here and just kind of paste into the serve configuration, save my changes and let's come over here to our command prompt and I'm, just gonna type gulp server. Now this is gonna, build the project.

A

It's gonna create that URL launch the browser and navigate to that your own. It's gonna, do it using the default browser. For me, that's not gonna work, because I'm logged in on my other browser into my test account which is inside of an incognito browser. So all I have to do, is I'm just gonna close what it just opened for me. I'm gonna grab the URL from the command line that it created and I might come over here.

A

I'll just paste this in now what happens when I paste this URL in well again, there's a lot of stuff in the query string that you can see starting right here and it's gonna pop up in this little message. What this is saying is it's warning the user to not be taking advantage of and make sure that they know what they're doing, and in my case here you can see where it says. Do you are you sure you want to load debug scripts effectively? What that's doing is it's telling the user hey.

A

The URL is telling us to load scripts from some of the location than what's been deployed to SharePoint. Are you good with that? Well I'm at the developer, I know that I am intending for this to happen. In this case, this is just a developer experience, so I'm gonna say: go ahead and load those scripts, then my app customizer is gonna, be added to the page. It's just some JavaScript. So we can see here. It's writing out.

A

Our test, which is the string that shows up at the very top I, can even change that if I come down here, I can find my test message and we'll just stay. Instead, hello plus world Plus me load. The same page will load our scripts and we'll see a totally different message show up in the dialog hello world me now that's great, but we can also work with placeholders that we have at the top and the bottom of the page.

A

So let's come back over here to our project and what I'm going to do is go into the code and I want to show you what you can do to customize the code. Now we're gonna get rid of that dialog because it's gonna get to be a little annoying after a while. Instead we're gonna do some stuff in here to work with some placeholders and we're just gonna work with a top placeholder, where the bottom placeholder is available to us as well.

A

Now before we get started, I'm gonna create an internal reference here to a placeholder, so I'm gonna have a private top placeholder and this will be placeholder content or it'll be undefined. Now the reason why I'm doing that is because you really should only have one handle to a placeholder on a page. You should not have more than one handle on it, because that can cause problems. So the first step is to get a reference to the placeholder.

A

So I'm, first gonna check to see do I have a reference to the placeholder and, if I, don't so I'll say if this top placeholder don't have a reference to it, then let's try and get a reference to it. So I'll say this: top placeholder is equal to this. Look at the current SharePoint context: look at the placeholder provider method and I'm going to try I'm gonna try to create content using the placeholder name.

A

Top that's the one I want to use. That's all we're gonna specify for right now. So then I'll do another. Quick little check will say now: I should have the top place over and if I don't, then we've got a problem.

A

I'm gonna log out. We we have an error because we should have one by now and they'll. Just abort. Out of this now I want to put something inside of my place over. So what am I going to do? We're gonna create something here. I'm just gonna say so now, I want to put something inside of the placeholder. So what I'm going to do is I'm going to make sure we have our reference.

A

We have our reference to this top placeholder control, I'm, going to make sure I have a reference to the Dom element, because the top placeholder control, all that is, is really just a div going across the top of the page. The Dom element is going to point to that div, so we're gonna make sure we have a reference to that Dom element and then, if I do I'll say let's go to that top placeholder. Let's go to his Dom element and let's set the inner HTML to some HTML.

A

So we got put inside replace over or I'm just gonna put just a little block of HTML here now. We're gonna have some errors here right off the bat, because we see some styling issues that we're having with this. That's quite all right. We're gonna fix that. So we can get rid of this last line right here. All right, we're gonna fix that. We need to define a few things here. We've got this Wow. We have this test message that we are pulling in. That is going to be.

A

We want this dot properties, dot, test message because we've already, we already pulled that up before or pulled that up before we know that's a t-bolt message is being passed in and then we need some Styles here.

A

So what I'm gonna do is I'm gonna create a quick, little stylesheet, so I'm going to say new file, this of your hello world application, customizer dot, module, dot s, CSS and I'm gonna go and paste in a little bit of stylesheet magic here now, then, what I'm going to do is add a reference to these Styles need to pull them into our project.

A

So we'll come back up here to the top of our typescript file and I'll. Just do a quick little import styles from the module that we had just created right. There.

A

Now we have our Styles that are all being imported and built we're gonna have them written out like this.

A

And now everything looks good. Everything is building just fine. Let's take a look and see how this runs. I come back over here to my browser and let's refresh the page, let's load the scripts and tada. We can now see I've got a little bit of formatting stuff here it looks like, but we can see. Our header message has been added here to the top of the page. So now you get the top place or what you can work with from here. There is some packaging stuff.

A

This can be involved if you check the SharePoint framework documentation and talks to all about how to package up your application, customizer for deployment to SharePoint online or to SharePoint Server 2019 on Prem hope you enjoyed this quick little screencast, showing you an introduction to application customizers in the SharePoint framework.