Microsoft 365 Community Development, 19 Sep 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: General SharePoint Dev Special Interest Group (SIG) - September 19th 2019

Description

Recording of the SharePoint Dec community call from September 19th 2019. The latest news around PnP CSOM Core, PnP PowerShell and the modernization tooling.

- Demo - Katie Swanson (Microsoft) @kswansondesign – Designing modern portals with SharePoint, including new Look Book designs!

- Demo - Ramin Ahmadi (Content and Code) @raminahmadi1986 – Building a site creation management solution with SPFx, Azure Functions and tenant templates

Resources:
- SharePoint Look Book - https://sharepointlookbook.azurewebsites.net/
- SharePoint Provisioning Service - https://provisioning.sharepointpnp.com/
- Modernization Framework - http://aka.ms/sppnp-modernize
- Code sample demonstrated by Ramin - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-site-provisioning-manager

Detailed agenda and covered topics are available from SharePoint Dev blog at http://aka.ms/spdev-blog.

Download recurrent invite from http://aka.ms/spdev-sig-call. More details on the SharePoint Dev community from http://aka.ms/sppnp.

A

Welcome everybody: this is the general shape on development special interest group, and this is the byway classic, where we kind of where we always talk about everything else in the in the context of development and solution, designs and awesome, SharePoint designs, except SharePoint framework. So we do have two of these weekly community calls every single Thursday we technically have an it'll call every single Thursday at 7:00 a.m. it's either ship on framework, the related community call or then it's this general shape and development special interest rate.

A

Now more and more actually on this call as well. We are always including out-of-the-box capabilities, so it's not necessarily super dev topic, because one of the Deaf is actually also understanding what's available out of the box or what's available for Microsoft side so develop. All of those things by yourself today is 19th of September and Archie from a gender perspective. If I'm going to make this moving there, we go. We'll have quick recap on the status of our open source projects on this side of the house or the NPC.

A

Some core extensions: it's evolving fast p.m. people, sure there's a new version coming up on the BMP provisioning templates, which actually relates on what KD is kind of show, because a lot of the new designs which we will be sooner or later, releasing an interlude book designs, actually have new capabilities, and we need to then address those capabilities in the templates and in the schema and in the provisioning engine. So it's kind of nicely dicing the discussion as well.

A

There's some updates on the PMP publisher, there's some updates on the modernization tool and as well, and then it will go first to Katie and then, after that, to off Marie and in the in the Cadiz case.

A

We're gonna concentrate on the designing of the modern photos and talk about the lookbook designs and I know that she has plenty of cold em I was waiting on and then the second demo after Katie is around building a site creation management solution which are premier pressure, functions and tenon templates, and it has to ship on framework inside of the title, but actually that's more around to automation and solution, designs and and it's a really nice-looking solution, which is an open source solution for anyone take advantage as well, which, by the way, takes advantage of the BMV templating, which takes advantage of Cadiz designs, which is kind of cool.

A

So everything Tyson's nicely to Kidder. Now, Luke Duke is already getting a lot of our feedback on the chat window and click. On recap: if you're interested in contributing oil on participating on the computer inside the house, we do welcome community demos. I know that I have quite a few requests pending in multiple different channels and I'll follow up on many of those quite soon so we get people scheduled on the upcoming course. You can definitely contribute in github those samples. We, by the way, do prefer, especially when we promote your samples.

A

If we promote your samples, we do prefer those get to getting submitted towards the official SharePoint github organization, because that way, the content which we promote is controlled by us and that's really the concern. There's a there is a concern behind of this, which is, if we promote somebody else's sample, which is in a different, completely different location. We don't know a sample is going to modify that sample or put something offensive or behind of that URL and that's why we're asking people to contribute to at one centralized location?

A

That's that's really the reason behind of that and the most importantly provide feedback, providing feedback, there's multiple channels of doing that, just having a chat right now in the teams and providing us wait. But that's one option: go to the SB dev Doc's issue, lists and social media, and all of those things are open for your feedback for us to understand what is needed now. Moving on.

A

Are things quick recap on the on the general resources which we always have on day, all of the presentations again missus betablox documentation getting updated on day to day basis a game SSP their videos from there you can actually get all of our community call recordings. Demos, guidance videos tutorials are available in that your channel. What's kind of cool this week we crossed the 12,000 subscribers on that YouTube channel. So it's growing quite fast from a subscriber perspective as well and not a massive 12,000 subscribers. It's not a massive!

A

If you compare that to, let's say, let's say gaming, videos or something else, but it's actually quite good from when this kind of an IT video usage perspective and then a game is a speed of issues. The centralized issue list for getting support on your development topic, the emphasis on Quora library. So let's do a quick recap on the open source projects. I intentionally didn't have any, let's say, generate Microsoft engineering update, so we keep the intro short. Yes,.

B

So if he'd be see some coal library we just shipped in at least last week, so the September 1 is out now what's coming for the next one will be released by a first week of October.

B

One thing is when we create client-side pages, so we we have an API which you can use to create client side pages automatically.

B

Now, if you have looked at the version history of pages, you might have seen like this like a mediator ocean, because each update that we did to the page as far as the process generated a separate version and that's something that we've corrected now now you get like a clean version history when you get a page, there's work done in the ALM space, with a lemon api's, different customizations that on that catalog and then also deployed, and if it's stolen and had, for example, in your site.

B

The ALM api's work innovated that like, if you have, for example, just proficient an app catalog in your tenant and immediately afterwards use the api's. Things might not go as expected and that's why we have then some additional work to make those scenarios more stable and reliable.

B

There is some performance improvements done around clients at page exports or some issues with their regular expressions that we used that caused some performance problems which are fixed now and then the September 2019 schema is committed in the dev branch. I think Bob will talk more about it in the next slide, but that's coming up.

B

One of the big work items for us going forward is in front in 2019 schema and obviously also handling additional yars that are still pending, because you guys keep on adding more chaos and we can merge in a time frame which is good because there's activity lots of good things coming in people using it, people making it better so I'm more than happy to get even more Pearson, but sometimes it takes a little time to get emerged. It's.

A

A positive problem of active, open source project, but should we go to Paulo next quickly on the I think you're on a call yeah.

C

I am so yes from a provisioning engine perspective. We also just released the schema version, 2000 1909, and what are the main and new capabilities that we have right now at schema level, we introduced support for vertical sections. In concert pages, we added support for onedrive and sharepoint online files upload, so you will be able, in the near future, to use the provisioning engine to upload files in onedrive and sharepoint online using Tamotsu graph.

C

We introduced some new XML elements in the schema to make it possible to upload bulk upload user profile properties in the SharePoint Online user profile. We added some functionalities around the group's history by groups like cycle policies and, generally speaking, the official group settings a new site settings section which we were missing before and which now we can use to configure settings at site collection level.

C

We added support for attachments in the Tahoes when you want to provision a template, including list items with attachments, and we made some improvements to the schema around the provisioning declarative. Provisioning of teams. I want to be absolutely clear about the fact that, right now those functionalities are available at schema level and we are working like there is no tomorrow to make it possible to have the actual implementation in the engine level.

C

So, right now, at the engine level, we still we're still using a version 2000 1903 of the schema, but in the dev branch we are developing all the handlers to make it possible to have all of these functionalities in the provisioning engine as well. If you want to know more about the schema, just follow the link in the the word part of this slide and have a look to the new schema and that's it on my site. Visit cool.

A

Cool Thank, You Paulo on that one there was a cute question related on, can be actually create, also user profile properties using the provisioners game and answer quickly to recapping. That one answer is no. Unfortunately, no there is no remote. Api is for creating user profile properties, the new user profile properties in the user profile service. So that's why that's not a supported capability, at least for now and and full transparency I, don't think that capability will be ever ever most likely implemented in SharePoint Online.

A

Do you know various reasons which lets in spent time on that? But you can. If you have an existing profile and sixteen properties, you can allocate values they're using their engine. Let's go to the PMP powershell Irvan. I think you're on the call as well yep.

D

So, basically the same problem as birthdays when it comes to the the PRS they're, just piling up and growing it's a good thing. It's it's a luxury problem, I, would say and and we're working our way through them and they will get words in in.

A

D

Time, hopefully, I will Moritz a lot of them before the next release. The cool thing with PowerShell is is because we we heavily tap into PP sites core all the goodies that Bette announced and and but Paula just talked about from scheme. I change this day will just automatically become available in PP powershell.

D

So all the new things, the client-side pages and the new schema and all the new functionality with provisioning engine will come in PB powershell we're working as we speak on on implementing some things there, because they are very interesting also for the lookbook templates that katie will talk about sure so we're getting there. Hopefully, the next release will have a lot of new PRS in there and new functionality, and that's it.

A

Yeah and from a timing perspective, I keep some additional visibility under, let's say, timings and everything else. Obviously, ignite is coming and and ignite is one of our big announcements and big demo locations and in ignite will need to have cool stuff available. So you can kind of assume that in the November time frame, October November time frame, you will save a lot of a lot of new stuff coming into this tooling, as well. A quick recap from Burt's side on the modernization side, modernization tooling, yes,.

B

Mobilization, tooling, two components: transformation, framework, the tool to take classic pages and generate modern equivalents, and then the scanner about the transformation works to the patient's machine, tech for October release. We have some really cool new things, some really useful new things, my opinions. Well, one of them will be a classic blog page to model page.

B

So if you have a classic block still living in your environment- and you want to kind of get rid of that one now we can, you can simply use patient summation and it will read the blog pages and will create the equivalent modern pages in sample communication site. So you can really upgrade your blog. Do something modern.

B

Another option is to keep page creation, modification information, pretty long name but essentially I- think the name kind of explains what others. So when you take over a page from an source site, let's say your blog: for example, your page, you will get the same author, editor modified and created settings and the original page had a nasaw space. Yet on your target page, so we kind of keep that and you can combine little bit of posters news.

B

So it's pretty easy now to just then modernize, the page, keep the same information same old or similar to that cetera and then also post. This news and then you'll, see in news Halep that this page was posted by that original author on a particular date. So things just say: is this as part of the transformation?

B

Then there is some improvements in on-prem handling and we had an issue with if you have SharePoint publishing pages in Rome from 2010 to 2016, and there was webparts embedded in a content zone also not in a web browser but really inside the content. Then things went wrong, that's being fixed and then there is some additional smaller fixes. That's there as well for the scanner working on workflow entrepot is getting improvements.

B

Oh really, looking inside the workflow assessing how well this workflow can be transformed to flow telling you which activities are ready to transform which not combined with some documentation that area as well. So you will see more from us in that in here. Like an acceptable time frame being that's a professor cool.

A

We are pretty much on a schedule that was the intention 15 minutes on on the quick updates and then the state is your Katie I think will jump on your screen. I'll. Take it away.

E

My name is Kate Monson I am a product designer with SharePoint I, actually like to tell people a little bit of a flip on that I use the product to design. What SharePoint can do and be I've been doing this for the past year. My first initial project was actually to build out all the demos for last ignite, so I kind of jumped into the fire to figure out the product, as well as come up with these great ideas that were all out of the box.

E

Sometimes they often do demo things that are coming so I got to work with those as well and provide feedback so I'm also a user, but some of the things I'm going to share today are not going to necessarily going to be based around the demos, because everybody sees those and those are usually what goes into the lookbook you're. Seeing a lot of the sites that are already put out there, you've seen them you'll see them all over in marketing I'm actually going to demo something that's outside of that.

E

I was gonna say outside the box, but it will be so a little bit of just a background on how I approach this from you know. This is very going to be design heavy, but also ties into every kind of a project management as well, and the way that I think about this there's a lot of planning that goes into ball involved into a site.

E

You know outside of the demo environment, where I actually have a script and I'm working with somebody side by side, there's other alternatives that I have to think about when it comes to site creation, I generally, don't think about them as a comm site or a team site. I actually think about the solution that they're trying to solve. So what is that actual purpose of it? Who needs to have the access?

E

What are the perms going to be like, and then even you know, I can design something, but who's gonna maintain it is this going to be something that they can easily jump into and I can be hands off the wheel. Then I also start thinking about content contents. Probably one of the hardest parts of the journey in a perfect world I would love to be handed something at the get-go. But we know we don't live in a perfect world, so I on the other side, I'm starting to think about.

E

What's the brand's gonna be, what kind of photography do we have or dassit set up? Can I actually put those in ahead of time and then also? Should we incorporate other kind of content you know? Should we have some stream videos? Should we have some Twitter feeds? Is there gonna be glamour?

E

Should we have some kind of listing involved? Is there going to be any kind of customization to that even planners, a good one and then, of course, site navigation? That's always important, because the site navigation, if your users can't get around your site, then I feel like it's almost a UX fail. We want to be able to provide the best experience top down so and then the designing aspect I was think about above the fold and when I say above the fold, I'm not literally I will get into this.

E

What I think about above the fold. But what are those key elements that need to be right at the top, then also thinking about our web parts? You know they have so many different layout options and how can I incorporate those to make it a little bit more dynamic, also whitespace huge part of this, a very big friend of mine, I love, the spacer I like things that can breathe I, don't think you should overdo it with your content.

E

Cognitive load needs to be taken into account like they need and color usage throughout now that we've actually brought in background collars section backgrounds, even in the header. How can I use that to draw attention patrols into calls to action? Is there called the action on the page, so I need to incorporate somewhere and how can I design that so it's very intriguing, and then quite often, when I'm doing a design, I will come up with on the templates.

E

There's a lot of news articles that come prepackaged and I will utilize page templates be able to produce those? Well sometimes, there's gonna be a fully baked out whose news article, but most of them, as you know, in our demo environment, are a little bit of what will say. Filler, so page templates become my best friend on that, so above-the-fold just want you guys to take a minute and know, submit and I'll show you what I mean by that I call it scrolling telling, because scrolling is a continuation and clicking as a decision.

E

You want your content to be engaging and informative, and people aren't coming just for the top of your screen. There's always very content even below that. There's ways that we can do that best practices creating focal points, visual cues, so people know to actually scroll- and you really want to when it comes to spacing, like I said, with whitespace break up your content and then you know, of course, quality engaging content is top priority so that people come back and read it and I love that our navigation is actually sticky.

E

So it does accommodate that scrolling and now that we've brought anchored links in you can actually utilize that in different ways to go to sections within your page. So.

C

E

So I'm going to do a demo like I, said I'm going to actually do something. I'm going to put you guys into I got a request to build a event site. Contoso marketing is getting ready to put out a fly safe conference. It's not until next. Next July and I'm gonna quickly build this out and show you guys what I mean by all of these kind of visual cues. So here's a perfect world I actually got a document sent to me of what they want on the page before I.

E

Actually dive into this I probably had a one-on-one quick chat with the person I'm actually building this with, and then they also in the content document I actually have all the imagery that I bought about kind of jumping ahead for you guys, but this is I pulled together. Imagery I've got my copy doc I kind of thought through some things and then I'm gonna actually go build it and for the sake of timing, here, I did some pre-planning, but I am gonna go into edit modes.

E

You're gonna see all my background on what we're actually doing here so fly safe. Top they gave me a nice image that I worked with them to create a banner. So let me go ahead and get into my site.

E

And because I was really smart, I actually put in my header faces face out at the waiver quick and open that guy boom nice I, don't as a SharePoint, we don't highly suggest using text, but if you do I would test it across all devices to make sure that you have legibility this right here. It's really large, so I know that it scales to mobile smaller text. Of course, I don't recommend it and very limited text is actually more ideal. So we have the date.

E

I'm gonna go ahead and come into my countdown timer and actually set that for the correct date and not tomorrow, July. Oh, it's a Sunday! Well, that's! Okay, I'm also going to add, in the background image, I have a picture from the conference itself.

E

Last year, I'm seeing a little bit of a contrast issue, so I'm gonna go ahead and bump up. My opacity make sure that's legible.

E

Great nice call to action is to get your tickets right now, because this is a template. I have all of the links going to just a brief brush. Quite often you'll see that when they come through, I don't send you outside, so that you can update it on your own.

E

This section is going to be more of an information section, but I wanted to use it for a visual cue to go ahead and scroll down the page, so I'm going to pull in nice strong section background I also as you'll see I added a spacer here to give it a little bit more breathing room, big fan of the spacer, and then we need some text to come in here. Come on over here.

A

E

And because this is just normal and we have our slotting, it's going to come in white and I have a nice contrast to it really kind of pulls. The page down. Oh and I noted here that this next session is actually going to be. um Next section is going to have all the sessions which are going to utilize. The events.

E

And look at that they actually pre-loaded. The events on the page. For me, all I have to do is do that because it's coming from this site, of course, with events you know you can pull them from other locations, but for templates I always keep everything. Internal, oh- and this looks like it's going to be. Oh I have two things that I need to do here. I need to have a link off to the keynote information, as well as the agenda so I'm going to utilize. A hero. I only have two.

E

Again, I'm going to use an internal worry brush.

E

Go ahead and set that up on this side as well.

E

All right and because I put a strong section background here, you can do that on your heroes and actually be kind of creative in that and what I mean is on this side.

A

E

Going to actually add an image here, there's a nice thing that they have about a typography, a typographic rather I'm saying that wrong. Where.

A

E

E

Like I, keep moving year round and then put this type of graphic and which is white once it comes in, you can see how it actually plays with the section background, which is great. So if I do change the theme Ain, it actually will work any which way so it's on top of it and it's a pain, and this is the agenda schedule, send them off somewhere.

E

I could put my call to action if I want I'm, just gonna. Leave it blank, because it's just going to add a link at the top I can link that out to another page here. I have you know and again a nice custom image background. Oh how about we spell it correctly. Key, not key note I have this really basic scrubbed image, so it could be really anything being presented at this point.

E

I can go back in and update that once I have the final details, photoshop magic and then down here, I'm, going to add in the ticket pricing or details I'm using just emojis here to get these items to come in all of our rté will take except these. Don't you keep in mind they're, going to look different across browsers or a little bit browser dependent. So I do like to look at that I'm on a Mac, so you're, seeing what I see and because we have this amazing duplication.

E

E

That quickly come in and update these.

E

I did not come over, so that's easy.

E

Yes, you get everything so I could just quickly update that, and this to get tickets are all going to be going to the same place. So I can just quickly duplicate that and put it all the way across super easy and that's it.

E

So, let's see what this looks like and here, as you can see, this is just at your normal, probably most browser type here, the size of it you'll see that things are peaking. So this is already tell story telling it actually makes me feel like I should go ahead and dive down and scroll further to get more information and the nice visual at the top kind of ties, things in with our hero image.

E

Also, nice call-to-action, counting down the days again they holds my I am with this nice primary color of our sessions.

E

E

And take a person, so people can go out, can also include that in your navigation brings you to the st. pages, and you can also include it in your footer. If you'd like I, do generally on, you can leave the comments on or off you can have do a contact page if you'd like and that's nothing yet well. The demo as I think vase has been alluding to.

E

We do have some really great new look book templates coming I'm gonna call them solutions, different kinds of things that you could kind of bring in they're, not always going to be about the demos or also we're thinking about these in different higher levels. So we can give you guys more options for customers and tenants across the site best sites across your tenant, rather and always looking for suggestions.

E

So, if you think of something that comes across when you're working on things, that would be helpful as a starter, design definitely reach out to me on Twitter, and let me know because I'm always looking for great new ideas. We are always interested to see how people use these. So feedback is great as well and that's that's it for me, cool.

A

Don't don't stop the sharing Ed's there's three questions. Just a comment on the loop book sites like I, said we're working on the on the way to templates and those gonna be available, then in the upcoming provisioning service, so we're kind of evolving and the look book side and the provisioning service an interesting direction. We're not going to disclose everything right now, but you'll see more stuff coming up before ignite or in ignite. Hopefully, that's that's. Currently our deadline now to be fair for some of these new designs.

A

If the people who attended this call I were part of the monthly community core, which was a week ago where we had John Sanders doing live demos of the out-of-the-box web part, he was actually using a lot of the new site and site designs with.

B

A

So really cool stuff coming up and basic idea is that people can easily then provision example content to their tenants or demo tenants using those templates when we get stuff moving.

A

There was few questions which room on a test. They will say just a note on this one. Is it easterly recommended sizes for header images and all that? Thank you both Cameron on on sharing a link to the support articles, and there is a a clear articles on the recommended size is and all stats on the wife of the image and all of them.

A

There was a question: is that called parallax scrolling? What the header image is doing when scrolling down string? Yes,.

E

So our image imagery across the site, anytime, you put it in- will take on a parallax effect to it. You'll also see that in our hero, imagery as well.

A

And then there wasn't kind of an interesting question. I know that this is kind of a difficult question as well, but any tips on converting HTML mock-ups to modern shape on pages, because this is the classic challenge with SharePoint, especially in classic SharePoint. In a classic experience, it was my customer came with a fancy, looking designs and said: I want to make sure it won't. Look like this.

A

A

E

I think I work with internal and external teams that quite often come with me and say this is what we have right now. How can we implement this in modern and most of stuff? They have it. There might be a somewhat of a one-to-one using and I should say, I always look at the out of box solutions. First, if there is something that they definitely need, that's gonna have to be custom. I can walk through that with them as well and plate them to all your awesome documentation but they're.

E

As of right now and correct me, if I'm wrong, there is not a way to say here's an HTML file and bring it into modern I, just look at it from what are the web parts that we can we support and we have today that actually can create the same I, don't want to say, look and feel but provide the same solutions, yeah and kind of work through that people. Often people are very happy about that.

E

But again, like I said, if there's something very custom, there are ways to work around that as well right because we custom coding for that absolutely.

A

Absolutely there's also a really good as a Cheston from Gary on the on the chat window, which is why mock we know, but you can actually build a quick working for real, which is absolutely correct so and that that's definitely super powerful way of getting things kind of a shown at what's possible. And these do remember. We have already right now provisioning your SharePoint BMP become service. You can get the exactly the same designs which we used the year ago in ignite provision to any tenant in the world and that's actually super powerful.

A

Because now you have a starting point and then you can start modifying the content. There's example: content example, images and all that, so a really powerful way of approaching designing those things and there's a good question from Aravind. Can we convert this sample site to a template and applying that to another site so native louder? The box in SharePoint?

A

Unfortunately, that's not possible, but that's where the BMP tenant templating comes comes along, so you can't technically extract and apply that template to any site in the in the in the world and you would get the same end result. There are certain things which you need to consider and you can manipulate the template if needed as part of the extraction and manipulate and then apply, but but technically, when you extract using the BN templating BMP templating.

A

It actually takes images, and example, content to web parts and whatever the web part content is at least being used on those as well and then extracts that to a single file, and then we were able to apply to that to any tenant or other site collections as well, and that's really the power of community, because that the BMP turn-on templates it has been built by more than 100 people of the community. Within the past years, sir.

E

Mom, can you also utilize site design for that as well.

A

Well, site designs are, theoretically, you can extract site using site design except and there's no support for modern pages and for many other various settings which are not included inside this, and so I would say how would I estimate the side? The science is right now in 15 to 20 percent level, comparing to the open-source templating, but it's it's evolving. It's it's all.

D

A

Heading over absolutely but I think that's it for now the questions and let's actually continue watching the questions that might be time for Q&A in the end and but we need to give also running.

A

Katie is super active on Twitter and she's funny, like Chris mentioned, on the chat already so messages so, but let's actually Raman I, think you're on a call and let's jump on your computer in Romans case he's gonna serve something related on SharePoint framework. Sorry, yes, Europe on framework gosh of functions and and actually site designs as well so site provisioning, and we did have a debate with ramen on. Should we do this demo in the SDF xcall or in the general development call?

A

But then, because this is more around like this solution designs and an overall larger design pattern, we decided that this would be the right call to actually go through this demo. Really great, really looking forward I'm saying this one as well so I mean take it away. Thank.

F

You hi everyone. My name is ramanamma di mesh, SharePoint developer at continent, code, I'm and I'm, really good at that. So I'm with you again for another demo. So, as you know, the PMP provisioning in June provides code centering, a template based platform for provisioning, your site collections and basically allows you to reuse provisioning models in office, 365 and also SharePoint Online, and show up on Prime and I'm, pretty sure most of you guys using PMP PowerShell to automate your site creation.

F

But today I'm not going to talk about writing partial scripts I'm, going to show you how you can call agile functions to get or apply PMB project template from a SharePoint web part. So for this demo, I have two site collections.

F

This side collection has two custom lists that I created for this demo, but this one is empty. So what I'm going to do? I'm going to get this PNP template XML from this side collection and apply to the other one. So, as you can see, we have two custom lists and library here for this list. I have custom content type and this content type has three side columns. So if I go back to the home page, this is our web part. So you can get a template.

F

You can use all of these handlers if I select all it just gets all of these handlers from this side collection or you can select whatever you want for this demo, I'm going to select fields, list and content types and when I click on get to in place, you're going to trigger the add your function to get a template and it will return the result so and yeah here we go. So this is the template and you can download the file that gives you the XML file.

F

As you can see, we have the site field side, columns.

F

We have content types and also the fields also the list, so what I'm going to do next I'm going to the other side collection. We have also that web part here and if I go to apply template. I can just drag our XML file here and it's going to trigger another as your function to apply the template to this side. Collection, so I think, should be something wrong with Excel file. I just added this capability to upload file today to this paper.

F

So it might be something with this report, but this is something we expect to apply the template to the site: collection, I'm, pretty sure it. It worked before that demo I just tested a couple of times, but, as you know, always happen in the demo, but I'm mostly excited about the code behind this report, because there are more to talk about so, let's install from the SP fix fill part.

F

All of the components in this fair part are functional and there is no class components here. As you know, react hooks are a new addition in react. 16.8 they let you use estate and other react features without writing a class.

F

There are a lot of post around react books, so I'm just going to talk about some of them here. One of the issues, all of us experience is passing props down to child components, and it's really painful. When you're dealing with the complex projects, there are a couple of ways to solve this issue like estate management. Libraries like Redux is one of them, but there is a huge amount of boilerplate code in every relaxed application. So react context. Api is a way of essentially creating global variables that can be passed around in a react application.

F

So imagine I have some information and meters and methods to update those information. I want to be available anywhere or everywhere. Throughout our application. We can create a context using crates.

F

Using create context- and these are our information and meters that I'm going to use in all the child- a child components in our application, so this this class create context, gives you a context that provider and app context that consumer. What these two components do is a straightforward provider is the component that provides the values that you can see here. This is our provider component and the consumer is the component that is consuming the value.

F

The provider always needs to exist as a wrap around the parent element, no matter how you choose to consume the values, I wrap the entire app component in the provider. Now any child grandchild, and so so on will have access to this information. For example, if I go to one of these child components, you can see here in this first line.

F

I can use use context and get our app context from here, and then you can use the context, variables and metals everywhere in your components, so I also, there are some some other hooks that you can see here. For example, I use a State returns a pair, the current state value and function that lets you.

F

Let you update update that value like this one, and also you can have multiple users states in your application, in your basically components like here also, we have used effect or effect hooks effect hookah, as this adds the ability to perform side effects from a function component. If you are likely performed data fetching sub subscriptions or manually changing the down with this hook, it serves the same purpose as component it mount component. It update and component belong in react classes.

F

Effects may also optionally specify how to clean up after them by returning function like this, and you can use more than a single effect in a component.

F

So this is our web part, and this is a really good sample. If you want to use react hooks especially use context to share all your information among your application, and this is our agile functions solution. So we have two classes here. One is for getting the application getting the provisioning template, so it just uses PM peak or.

F

Pnp Co package, as as you can see here and also yeah here and this class, is for getting the PMP provisioning template. So, as you can see, we just connect to the agile functions through a helper class that helps you to get as your ad up on the authentication context.

F

And after that you can get a templates like peace and.

F

Returned the XML file to the to the web part or any code that triggers that agile function. We also have applied provisioning template here. You can pass your file to design agile function and are going to apply the template to the site collection, so I think that's it for the web part.

A

Here we go so let me once again: I just lost my team somewhere in my screens, it's over there. So here we go really cool, stuff and I. Think it's that the shirt there's always demo effect, but the fact that you can actually extract the templates from a web part is it's really usable and you can select which of the things that you want to extract and all done so there was a question related on on the on Cadiz design.

A

Can you extract that kind of a site, and this is exactly how you extract that kind of a site? You select those things which you want to extract, and then you extract that and beauty of this one actually I know I mean you work with the templates for quite a lot from your perspective. Is it hard to manually then adjust or modify these things or how do you? How do you create a template for your customer.

F

Basically, we use PowerShell to automate this site creation, so we have different templates. We we implement for different customers, different clients, and we avoid some PowerShell scripts to apply those templates to existing site or creating a new site based on those templates. What I was thinking so sometimes it's really difficult to tell Klein how you can apply this template. Sometimes their scripts is not working and there are some problems with the pier do with the PowerShell scripts, so I thinking. Maybe we can implement something that make it more simpler for administrators to get or apply.

F

The templates I came up with this several parts because you can use them in the classic page as well, but I'm pretty sure it would be great if we can have it as a extension, so it will be available by default for all site collections and and also it can be more advanced to you know, save the template somewhere in SharePoint or in agile, like velop storage, and then we can apply the template from those saved templates.

B

A

Having a kind of application customizer with stench ocean export or save aside as a template capability, if you're an administrator of that site- and then yes, you click Save and that actually saved that XML blob to apply to the usher and then in a custom, provisioning side of the house. It just shows the options from the other side of the house. Now that would be then matching on what we used to have in classic site templates.

A

The classic site templates were good idea back in 2007 and but then the technology moved forward faster and the classic site template implementation is not future proof, it's it's something which is actually fundamentally technically broken even for classic sites, and we talked about that quite a few times in the in the past years. What's what's wrong with that implementation and why the remote provisioning pattern is better. Somebody might be wondering why aren't we actually implementing this remote provisioning pattern, and this export capability is out of the box and we are.

A

We are doing that with site designs, but the investments it takes time and the implementation takes time and to be fair. In the case of PMP tenant templates, the tenant templates are actually in a tenant level. Site designs are always in a site level, so in a in a tenant templates or PNP templates, you can create multiple site collections in a single template.

A

If needed, you can operate in a single site as well like in this case it takes in the Romans case, which is definitely an option as well, but one of the challenges, what keep on having an engineering is that actually community contributes on the BMA sites so much that the engineering is having a hard time of catching up and that really shows the power of open source and community, because this template engine is being used by thousands and thousands of customers every single month, which is pretty cool.

A

So it's an interesting balance and Jones on caching from an engineering side, but people are having and contributing on the open source side of the house. Now I think it's actually time. Let's, let's flip on back on my screen, I'm going to share a Q&A slides and we can actually have a discussion on those questions. What people are having get the chat window available? You should be seeing my Q&A slide unless I'm completely mistaken any questions from our for Katie or Raman around the implementations.

A

Anything which we're spending over there roaming is definitely giving good feedback as well. Can we say less public 82 of a store now not yet. There is no store support for SB bkt file C. Yet it is actively being worked on. It's being worked for, unfortunately, for quite a long time now, there's finally lights in the tunnel, and we can actually see that we're finally getting there I'm, just hoping that light. Isn't a train.

A

It's just really bad joke, but it is definitely in the pipeline and coming quite soon and after at that point you can then, as an individual developer or as an ISP.

A

You can get your applications offered through app source or any other location, the store location they say later and why are we doing a site script site designs way if we already have a proven BMP module, the provision sites, which is a fair question, and that really comes down on the performance of things and the BMP engine works on the client side, so using remote API and that's much slower than executing the same operations using server-side APRs, which would be possible as long as we are implementing at the similar capabilities using than the the native API.

A

So that's that's really. Why and the site design capability is being worked on so that the performance of the provisioning operations is faster and and why didn't we just fix the site template auto answer? Is we couldn't and the site template model was designed back in 2005 now it's 2019 technology has evolved quite significantly forward and there were some fundamental issues with the site template model they still a file or then even the vs vs B file when it was moved to be a sandbox solution. So there was no way for really fixing that implementation.

A

It had a fundamental fundamental design flaw from a starting point. It actually did work well in on premises where we ship to aversion in once in every three years, but in SharePoint Online we ship a version in every single week, so in this age, our way of evolving the service, the classic WSB way of saving at our site as a template, it's not a functional solution. That's why we needed to redesign the model now.

A

Site discussions definitely.

A

Yes, good question related on the cantos of themes and controls or assets. If you have a look on the SharePoint starter kit, that starter kit is actually provisioning, you X classic on those of themes. If you go and have a look on the starter kit key top repo and you can actually find the theme files, you can find example, images and other assets which you can use. If you want to build your own kind of a custom experience as well. So all of those assets are available from the shipment starter kit, github repo.

A

It is fully open source, so you can actually reuse those anyway, you want each I think we are heading to the ending given to do the same in a team site as well. Can we can redo modifications on the team so that teams that experience the debate is experienced?

A

It's pretty much the same as with the communication sites, except that the team science there's the coolest side, navigation available and technically there's ways to actually tackle that as well, but cleaning a classic or in a modern teams line, there's the left-side navigation and that that makes the experience lightly different than in the communication sites.

A

But technically and you can, how would I put this command if I come, unify a team side as well, so make it look like a communication site given to the communication side, behavior and that's something which, by the way, the if I root, site functionality, PowerShell commonly, is actually doing and there's an ongoing discussion? Should we support that for all of the classic team sites or volunteer sites as well, which is really cool, homesite, ignite release? We can't go to a details at this point.

A

What we cannot release in ignite, because otherwise there's no nothing to release in ignite. If we already tell that what we're gonna release and ignite it, so we can't disclose. What's is gonna be announced in ignite at this point, but obviously we've shown a lot of the stuff. A lot of the stuff which was shown, for example, in a spring event, which was SPC, is then planned to get shipped or evolved, at least by ignite timeframe. So definitely who face a bring his dog to ignite.

A

Unfortunately, no I, don't think she would like to be on the flame. So that's that's a no-go, but I think that's it for now, so we are hitting at the hour anyway. So thank you. Everybody for joining Thank, You, Katie, awesome demo on the design side of the house and from a timing perspective, you will see more details around upcoming design, templates and lookbook sites sooner or later, and thank you. Raman also really really good and a great demo around the overall design of that functionality. It is a great sample.

A

It is an open source sample available in the key tab as well. But thank you everybody for again a super active discussion on the chat window. Hopefully that's beneficial for everybody really good to see their interests and one of these things. So thank you. Thank you. We'll see you next week, most likely and let's stay in touch your social media. Bye. Bye.