Microsoft 365 Community PnP Webcasts, 24 Oct 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Introduction to tenant wide deployment of SharePoint Framework extensions

Description

In this webcast, we concentrate on the tenant wide deployment of SharePoint Framework extensions capability, introduced in the v1.6 release.

Exact details on covered topics from https://developer.microsoft.com/en-us/sharepoint/blogs/.

Related documentation from SharePoint Developer Docs
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/tenant-wide-deployment-extensions

A

Welcome to the shipment, Patterson practices, webcast and citizen in this video, we cannot talk about the one. Is the talent point deployment of extension capability, which we from SharePoint engineering released as part of the SharePoint framework, 1.6 version, and we cannot use, say a really cool demo, which we can actually take advantage in your turnout as well.

A

If you want to really take, have a consistent folder across here tena now before we go to the demo and before we go to anything else, when I obviously explain what the ten-point deployment means in practice, what is the capabilities and what's actually possible now? My name is Reuben I'm, a Senior Program Manager for Microsoft and with me today they responsible of the demo and actually the code behind the demo as well like it. That would be a surprise, a symbolic Ostergard, so public, a quick interest as well of.

B

Course, hi everybody, my name is Malik. My gosh I am obvious development. Mep I worked rancor and today we'll talk about tenant, wide deployment of Sherman's Remeron extensions.

A

Excellent so, let's first start with a a 1-point with a kind of a three points and three bullet points on this one and I'm really concentrated. Why is the denon point deployment option a big deal, and this is actually a massive deal for SharePoint framework customizations or let's put it this way and reformat that one it's a massive deal for modern experiences in SharePoint, Online and because what it actually gives us is a capability of centrally control. What extensions or what functionality is, what capabilities are available across all of the sites within your channel?

A

So in the past we've been able to deploy a web part or a custom web part to your tenant and say that it's a available to cost cross tenant in all of the sites, but the and that would have meant that web part is available in the web part bigger. But for extensions this has not been possible since or until the 1.63 date. So that's why this is a big deal and.

B

A

Really this is therefore providing you a a really easy way of providing a consistent end-user experience across all of the sites in aterna, and this really is for activating the. What it means is that the extension is activated automatically for every existing side or every new side, so it is actually runtime modification of things behind the scenes, and so the extension is consistently activated in all of the tenon. So you can actually introduce functionalities for all of the sides within your Center.

A

Now. Anything in here well like what you want to actually add the excitement. This is pretty cool. Isn't it well.

B

I think that actually the vapor is that, when you think about how would you achieve it? Otherwise, if this thing was not available right so sure you could have sunless something in place, that would like a script that would go across all your size and add that that thing that you want to do either like, for example, a footer yeah, but well what you think about it. Users can create new sites and there is no way other than following every minute or every two minutes is there on your site that I need to adjust.

B

So if, when you think about that, it's really inefficient and this ability to deploy extensions from central place and also have them attached to newly created size simplifies things significantly. So this is really a big big, big change. Absolutely.

A

Absolutely and to be fair, you could actually use a site design and a site script. If you would associate those to your your site creation process and as part of those, you can activate the extension automatically in site, but again god, but.

B

What if you build a new extension- and you won't have that applied on all sides at you, so there are quite a few ifs and buts that are being solved with this without all of the complexity, absolutely.

A

Absolutely and that's the thing the beauty of this one is that this is super easy to control and super easy to maintain and you can modify the existing set up as well. So if it introduced say hey here's a new one, footer and and then in two ways, you're going to introduce the second folder you can actually, from a once and cross location, activate the new footer and replace the old one. ah That's beautiful! That's absolutely great! So now how does it actually work?

A

So how does it really really work in practice, so you actually are able to control what extensions will be activated on sites from a centralized and tenant wide deployment extension list, which is located in an app catalog site, so in an app catalog toy collection, so by default only senator administrator can actually access that catalog site collection by the way, so you can delegate permissions to manage of your headings and apps by adding additional people access on that catalog and then those people can control what are the applications and solution available within your tenant and also which of them are centrally activated across the ten up.

A

Now the solutions- also it's a big Katy- follow us and check on frame resolution which is getting added on our catalog. It can actually contain automated entry to enable that extension to be the point when the solution is being added catalog. This is a good thing, and this is a bad thing. To be honest, there's there's a the good thing is that you can actually have an automation in the solution level designed by the developer, that that functionality should be activated by default in a tenon.

A

Now, if the administration trader is not, however, aware of that, it might come as a surprise, like hey wait, a minute. What is this new header across all the science so good reminder on on the administrators or the application developers? They should always know what they're deploying so there is no surprises there, but they can open up where they can disable that really fast as well.

A

The third item supported up to add this is supported for application. Customizers and ListView command sets so you're able to basically push our application customizers and target them on using a web template or then you're able to deploy ListView command sets, which are basically buttons or context menu items. You know lists or in libraries. So you were able to say, for example, that hey this button or buttons should be available across every single document, library in my tunnel and poof.

A

They will be available third-party form, that's actually super cool and then the last thing which kind of touched slightly and that the extension can be targeted based on a list or a templates are able to say that this list, the common set, is only for a custom list or only for our document library or an application customizer.

A

It can be targeted based on a width template so you're able to say here's, the footer for all of the communication sites and here's the footer and floor of the group associated sites and here's the footer for all of the classic theme sites using modern experiences. So you can easily define what's available and we're now in here. You probably have few comments while, like I, went on air right well,.

B

I mean I could go really deep in that, but I guess that it would make sense for us to show how it works first and maybe then we go go yes, Colin! Yes, let's.

A

Let's then talk about the implications and what it actually means in practice. Now before we go to the actual demo, this is just a high-level, a reference picture on what does it actually mean if the solution developer defines the entry inside of this 50kg file, so by default, when you create an extension solution, if you folder project and it used the extension, we actually create you, the client side, instant XML file, which is with the default entry.

A

This is slightly modified already, so we've added here the list template ID attribute for the client side component instance element and also with them by the ID and a sequence. So these are elements which you can or attributes which you can add to the clients, our component element definition, and whenever this, then this solution is activated on an application level. This entry is basically added on a ten on wide deployment list and then that activates, the extension crossed the tenant well.

A

Technically, in this case, if we have a look on what we have here, we're saying that this application customizer should be activated on every single krupa. So the theme side, because we're filtering this one to a web template with a depth web template ID group at zero. So that would mean that this is only up the way that it is a grouper server, so that team, sucked Deut relatively clear documentation is available. Obviously upon dev dogs on all the options. And how do we actually use them?

A

And so, let's actually have a real-life example and the solution for what you're seeing is available for you to download so you're able to take that one in interviews as well. But let's jump on Walters computer and have a look on. How does this work in practice and talk about the implications of that.

B

All right, so, let's have a look and practice how you would use the tenant wide deployment of extensions to deploy a footer that you can then enable across all size and and set it up for your needs. So here on github, we have an extension that is ready to use and we want to use that as an example. So here we are on the s/pdif solutions, repo and we go to solutions here. We have extension that we've already build, which is named global cooter, and here is all the code.

B

You can see what what it does and an explained is also the way it works here. You can see it in action. I want to enable that on our sites in SharePoint, so we've already made a package available so that you don't need to get through all the code building deploying you can grab directly the SP pkg, which we do here. So let me download that from here it's already available on my mind machine.

B

So now let me switch to my tenant and let me go to the SharePoint tenant app catalog, two apps for SharePoint and in here we will add the SP pkg that we just grabbed from github, show and find that and let me just drag and drop it here now.

A

I have to at this point there is already an existing file. That's fine.

A

A

B

Let me remove it because it was already there, so just for the right effect. Let me remove it and riad it because we want to. We want to show an important thing, which is this part with a warning which is in here and I. Think was it that was dead. The thing that you wanted to highlight: VESA, no.

A

I was highlighting the fact that you should never ever actually download a random skpk to a file from Internet and just put it in your channel which, by the way, asked.

B

Yes, so we do a short cut for the sake of brevity and time, but of course, whenever you go to github or anywhere else before deploying anything to your production, 10 and next year, confidential data, you should of course review first and against. There will be disclaimer on a screen like a banner showing that before deploying and it's your production.

B

A

In this case, sorry for jumping in and explaining this as well, but this solution contains an entry which would activate the extension automatically within a tenant level. So there is a warning for tenant administrator to explicitly allow this. It's a if a tenant administrator doesn't feel comfortable comfortable of the application or this message they should not deploy, and then they should have a discussion on hey, hey, hey, what does it actually mean so notice with the checkbox? Because you need to be.

A

You need to use the tenant scope, deployment option to be able to take advantage of tenant wide extension deployment of extensions, so.

B

You want this accession to be available on all sides, so you have to make available on all sides period- yeah, yes, so easy anyways in our case we've built this. So we know what's in it, we've put their dead in there, so we're going to deploy it and even though that's a demo tenant. There is nothing confidential here. So we're going to we're just totally find the deploy it here as, as you've said VESA.

B

We need to enable we need to ensure that this extension will be available on all sides, and then we also pay attention to two to two warning here, but there is a an extension that will be globally deployed to all sides. We do deploy that and deployment is completed already. It's so fast, and now we're going to examine, what's been put, how the extension is going to be enabled on all sides. So here we go in the tenant, app catalog site.

B

We go to the site contents and in here there is a new list that you might have not seen in the past named tenant, wide extensions, and you can see that there are two entries and the reason for that is is that before when we deployed it and we overrode the package that was already there, it didn't showed the warning which we wanted you to see, but it already added the entry so to make it clear if you would deploy it only once you will get only one entry.

B

So you will see this can help you one entry and what you see in here are a few elements. So there is the name of the extension and that just that that is meant to be there for you to easily identify what it is right, because otherwise you would see a good and from that you wouldn't be able to make any any sense like what that thing is so in there there is a name and that just for pure info only that doesn't do anything.

B

Then there is the ID of the actual extension that would be enabled on all sides and that's important part, because if that doesn't match anything available in catalog, you will have error on every page.

A

B

A

Isn't visible for every single page, it is visible only in a console but still correct.

B

Correct then, you see adjacency realized string of properties that will be passed into extension, and here is exactly where the power of an extension comes in, because that allows you to set up the same extension in different ways for different sides and also make it reusable across the size antenna. So if you are an ISV, you can build your extension once and different continent and different companies can use it in different ways tailored to their specific needs.

B

Then we have options that are empty here but which allow you to set on which types of sites and lists this extension should be in our case is everywhere, but you can set up to, for example, SDS, 0 or SDS 3 to have it enabled on modern team team size or even to group 0, which would make it available to all groups or team size or modern teams that associated with groups right.

A

So would it make sense to click the Edit item, just just from a presentation perspective yeah there we go.

B

Yeah yeah, so here you could add STS 3 right so the point being that the package originally provided this part, but but being an admin managing the catalog. You are free to adjust it to your need and that whatever you change, it will be reflected immediately across all enabled sites, and then there is also things like like location.

B

So in our case we want to enable a footer which is application, customs promisor, but you could as well have a list view view command set, and that would be shown here and then another thing is sequence, so that determines the order in which the extensions are enabled. So imagine that you wanted to show for some reason to fooders then, with this you would be able to to control which one is going to be showing on a page first and then.

B

Finally, if for some reason, whether that's debugging or migration or anything, you want to turn this extension off. You don't need to actually remove the whole entry. You can just disable it here and it will not not show so the whole and she will remain still in the list so that you can turn it on again easily. But you actually don't need to remove the Hawaiian tree. So you can just check it here and then it will be turned off or.

A

You could have a multiple entries, let's say off the same folder and then you're able to configurations of the same Porter you're able to test them one by one by just happen. That's why the functionality is there and what you do on all of these changes in here. Everything is always they automatically cache, but cache is refreshed mediator when I do any edits. So any change to do in this list, voila it's automatically available in a sense.

B

So now that we have this in place, we have actually everything in place. So how about we see it in action? We have. We have here a marketing site. Let me close this one so that it's clear that we had a footer. Let me reload this page, and now you can see our footer here in action. There you go so it has three links and there are some things going on that loading in a while. It's done yes! So here we we see our three links.

B

If we go to an other side and also another thing that you you can see here, that this side is blue and also the icons are blue, so the footer also takes into account the current site theme. Now let me open the same footer in the sell side, which is green. If I recollect correctly. Yes, it is, and then the icons are green. So now, let's change one of the links, so we go back to our tenth white essentialist.

B

We added the entry and in here let's change the announcements to share point P and P LS. Don't don't change your role? Just a label save that, let us go to this side refresh it, and now you can see it's still being cached.

B

Yes, so in other words, it assumes that you are not that fast, refreshing, your page, but here you can see it consistently refreshed across all my sites. Right and now we only show two sides, but if it would be a hundred side doesn't matter because the info, the config, is stored in single place and not copied to every side correct right, so that's being reflected immediately on runtime across the whole tenant across all sides. How does that work in code right? So let me open that up.

B

So here we have the project where our extension is its source extension global footer, and that is a footer. But the key part is that piece of XML here, where we actually say that that is no global order. Application customizer.

B

This is component ID, which matches exactly the idea of our extension that we have specified here in the manifest and that's a crucial part, because if they do not match it won't work and then finally, what we do here is we pass the initial value value of properties that we want to be passed to the extension and, as we said, this can be changed on run time as you please, and you can even add additional entries for the same extension to the list to have it set up across different side differently, and you can turn them on and off as you please alright.

B

So this is just the initial state and once that entry is available in the tenant wide extension list here, you can change it as you anything you want to add. Vissa.

A

Not not really I think they went through quite nicely and the whole point of this sample and the solution. This sign was that actually anybody already today, you can just go and take this dedicated file. If you always wanted to have a consistent footer, you can take that you can just go back on the list view as the tenant wide deployment list and modify that canto.

A

So sharing is caring to be whatever your company name is slit for adventure go beyond whatever the statement is what you want to have there, so it is really a truly reusable footer for you to take advantage from, but I think that's it. So, let's flip back on the on the slide and close up the webcast, Thank You Alec, and thank you for like one more time for the for the demo, so we basically showed an existing solution which you can download it's available. You can find it from a video or web cast notes your.

A

How do you take that one into account? The solution itself contains an entry where it will be automatically added to the tenant wide deployment lists, the which will then activate that footer across the whole tena, and you can absolutely feel that the folders would be available, for example, for group associated themes as our communication sites or all of the sites or all of the modern experiences in your tenant. And this is a really good example of a really great implementation of a folder, because we can parameter size. What is the behavior of the footer?

A

So what are the buttons and what is the labor, what we actually say in the footer section as well? Anything else what you want to add here at this point, bondic actually.

B

Everything that just popped into my mind is that the fact that we didn't show in a demo- but that's also the really cool thing that you could use this for- is that you might write like what you see now is that we've built a footer for which you can specify which links you want to show, but, as we've shown, you can define on which sites or lists the extension is is available.

B

So so, using this approach, what you could do is you could enable the same extension across different types of sites using different, so you're calm sites could have different legs, that your team size and there would be the same extension. So you build it once and that's essential part right that what you might be doing instinctively when you build web parts, that you expose the things that that you and user to be able to tweak in properties.

B

Well, now you can do exactly the same in extensions, and it makes perfect sense because the most the more you allow admins to set up the wider or the more broadly, they will be able to use that across the whole tenant, and they will not require different extensions to be built which are kind of the same, but just show show different things right. If you can build me once allow it to allow users to set it up and then control the values through the centralized location in the tenant, wide extension list, yeah.

A

And I'm technically the same, let's say: property field and everything else could have been able to use this already before the term acquired extensions list existed, but sure people are based on what we're seeing. People were not really thinking through all of the reusability and scenarios for extensions, but no. This is a really great example of actually showing how the extensions is, how expansions it is really truly configurable. You can define what's available in the context Asian.

A

You can change that to be Leeds where adventurous or you can say, that's it controls or electronics or whatever you want to use as the statement and the buttons as well and the URL targets of the links as well. So it's it's a good practice not to hard-code everything, because you can define the the needed parameterization based on the instance of the extension right. Well, that's cool I! Think! That's it for this one. So thank you Mark for a great demo and also create solution.

A

A solution itself like mention, is a open source solution available under the PNP front, there's link in the indo-pakistan UPS, so you can easily find her but I think that sums up this one. So thank you, everybody for watching and please keep the feedback coming. Thank you. Bye.