Microsoft 365 Community Development, 4 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 Development Community call – 4th of March, 2021

Description

Microsoft 365 Development Community call on March 4th. Demos: 1) List formatting fundamentals, 2) Exporting SharePoint site structures/documentation to Markdown, and 3) New SP Editor chrome extension with Microsoft Graph Toolkit React playground. Latest project updates called out: PnP Framework v1.3.0, PnP Core SDK GA v1.0.0. and PnP PowerShell v1.4.0 to be released the week of March 8th. PnP Modernization tooling – added PnP Page Transformation and released Modernization Scanner v2.19. Across the board releases on yo Teams capabilities. The host of this call was Paolo Pialorsi (PiaSys.com) | @paolopia. Q&A takes place in chat throughout the call.

Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly Microsoft 365 Development Community call: http://aka.ms/spdev-sig-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Welcome to the special interest group about general microsoft, 365 development. uh Today, I'm your host, I'm paulo pelosi from psys and visa is busy with another meeting. So I will take care of you for something like one hour now.

A

Like always a quick look at the agenda, we will have a look at the latest news about the pmp initiative. Then we will spend a couple of minutes for the together mode picture time and right after we will have three great demos from chris kent, kevin mcdonald and tommy tavella. So let's move to the content so that we can save much more time for the demos and, first of all, let me remind you that you can, and you are more than welcome- to participate to the community initiative and to the pmp community.

A

You can do that by providing demo solutions and technical patterns, and by doing that you will get great visibility for your work in the whole pmp community.

A

You can contribute on github, which is really welcome and useful, and you can provide feedback through any of the available channels that we have in pmp and talking about the channels where we have a lot of content available in pmp, starting from the max365 developer, videos and talking about the community videos that we have in the pmp channel, as well as a whole set of open source projects and libraries, as well as the really rich set of samples that we have in the sample gallery.

A

And, moreover, there are a bunch of initiatives that you can take a look at if you will go to aka dot, ms m365 pmp, which is the main entry point for the pmp initiative.

A

That said uh most likely, most of you know that microsoft return recently introduced the microsoft viva and microsoft. Viva and specifically viva connection is a set of extensions built on top of the microsoft teams ecosystem and on top of the microsoft 365 ecosystem from a developer point of view, because today here we are and we should be developers from a developer point of view.

A

We will soon be able to extend and customize a solution built on top of microsoft, viva and microsoft connection using powerapps sharepoint framework and the adaptive card, and there will also be solutions and apps provided by third parties available on the network, so give an eye to viva and specifically to leave a connection, go to aka dot. Ms slash viva connections and stay tuned about the news in the technology area of microsoft, 365.

A

and talking about extensibility and development for sure microsoft teams is one of the main platforms that nowadays, developers want to extend or retrieve customers wants the developers to extend and well in the akms, slash team samples url. You can find a bunch of samples in the sample gallery and there you will find a lot of useful content to take inspiration from or just to reuse, for your own custom solutions if you are new to pmp and to the open source community.

A

Well, for sure it is a great idea to attend any of the uh meetings of the sharing scaling initiative that we have in pmp. I think that hugo and david are here. So if you want hugo or david up to you, if you want to say something about the sharing skating initiative, please open your mic and share your ideas with us.

B

Thanks paulo yep welcome friends. Well, as you know, our patterns and practices community is an open source and inclusive community, but we also know if you're new, sometimes taking advantage of some of these tools and resources and in fact even contributing back to the community, can come with a degree of hurdle. So we would like to provide you with this. Sharing is caring initiative that includes hands-on guidance sessions where we will walk you through how to not only use some of the tools and resources available within the community, but also how to contribute back.

B

So it's it's something available for everyone. You can see all of the sessions that are coming up here soon scheduled for march and into the future, and we have ongoing sessions next week. We're going to have our ask me anything which is going to feature the spfx samples repository every month. There's a new ama featuring a different initiative within pnp. So we ask you to please join us on a session completely free open to everyone, a safe space, to ask questions and get more involved. We'd love to see you at a future session, aka dot.

B

Ms forward, slash sharing is caring, paulo back.

A

To you, thank you, david and great initiative. The sharing is getting one. So, uh let's keep on talking about the latest news about the pmp uh initiatives and uh community projects for sure the.net libraries built and provided by the pmp community are one of the main topics in this area, and so please bert, share with us the latest news about pmp framework and pmp core sdk.

A

C

Thank you, paulo um for pp framework, which, for folks new to this call, this is the the old pnp site, score library. So, for that one we are prepping for 1.3. Key changes already done is for page transformation. You can now skip hidden web parts. When you transform pages, we have some fixes for the web plugin approach when you use cookies and several other fixes done by gotham, christian, patrick goon and erwin and myself so 1.3 should be coming quite early next week.

C

Maybe even this week still so stay pending stay waiting for that one um then, on the because the gay side, so because the okay is the new library brand new model.library, uh we promised to actually ga it in february. We didn't do that because we did like a huge refactoring and an improvement which is pretty good, so it really got better, but now we're kind of finalizing that refactoring and getting all the smaller issues wrinkled out and getting it really nice and ready for you um so ga for that one most likely uh next.

D

C

Targeting for next week in the last two weeks, what we did we do, we did some page api improvements, uh sample improvements, the refactoring as mentioned and other fixes, and by the way we actually have. In february, we had 88 000 tenants using these libraries so we're getting close to 100 000 planners using these.net libraries. So pretty impressive. I would say.

A

Thank you, bird and yes, I'm crossing my fingers uh and I'm really looking forward to seeing uh the gaa version of pmp or sdk. Let's see maybe next week or we'll see, then we need to talk about vmp powershell and I think we have my friend erwin who will share with us the latest news about bmp powershell right erwin yep.

E

Yep yep, so 1.3 came out actually already two weeks ago. uh 1.4 is around the corner. Will it happen tomorrow? I don't know we plan to do it this week, but we found some some last minute issues so still working on that um people are downloading it like crazy, over 100 000 downloads of the new module already, and that's just basically in a couple of months. That's really nice we're still ongoing uh working on the integration with the pnp core sdk.

E

The pnp powershell, as of today, is already the core sdk behind the scenes, but in a limited manner. So we only use those things that we know that are safe and and work as we want them to work.

E

Then what's what's happening in the nightly, so, as you might be aware, we release basically every day a change is done to the powershell or command. Let's rebuild an automatic release every night, and we we put it on the powershell gallery, so we increased the functionality of the register. Pnp azure id adapt command that you can use to register an azure ad app. The name says it already.

E

Now we have support for all the graph permissions and all the sharepoint permissions, so both for app only and delegates they're, all there we split it up in separate parameters. It makes it much easier actually to define what kind of writes your azure id app should have.

E

um We have also a couple of companion commanders now to do some management on those apps, so you can.

B

E

Me all the apps remove the app those kind of things, something I'm I'm really happy with, and it was a bit of a struggle to get up and running, but we finally have support for gcc environments. Now, not that many of you work with it or even know what they are, but they are u.s government environments, azure installations, azure environments, but this this change does not only apply to the uh us versions.

E

That also applies to other national cloud instances, so this one in germany, for instance, and um then yeah the azure app site for machine commanders, but I mentioned than the last time already. We now have support for site, selected graph scope and bug fixes.

E

Thank you. Thank you. Erwin.

A

So now time to talk about the monetization tooling, there are some news in that area as well so bert back to you. Yes, so we usually don't talk about.

C

This anymore, but I wanted to kind of edit again on the list for today, because there are some changes so in first of all page transformation, which is technology that takes a classic page and builds a modeling page out of it. We crossed 1.5 million pages being transformed, which is massive, and it gets faster and faster. So there's small amount of people doing this and also more on-prem transformation.

C

So we see people taking their own premises, sharepoint 2010, 2013 portals uh and moving those pages into sharepoint aligners in the communication side, so really a good scenario for folks to modernize the content and move to online. Now we, as we mentioned, we have a new option to skip it in web parts. We need transform.

C

And one thing there to mention is that page transformation is part of pnp framework now. So, if you didn't know that yet so you can just if you pull down pnp framework, you have to pay transmission, take on both as well for normalization scanner. There is version 2.19 released and that one actually contains a new uh scanner component that will list all the sharepoint designer customized forms.

C

So I think um that.

A

C

It up paulo.

A

Okay, thank you bert. It's now time to talk about one of my favorite tool. Nowadays, your teams, so victor, please let us know what are the latest news.

F

Thanks paulo, yes, I think we have some great updates. We two weeks ago, we announced the release of version three. We had three patches since then smaller fixes of various things um on the road map right now- and this was actually updated before powder came up with some great ideas this morning.

F

So we're looking into meeting extensions and a couple other things that we have listed in the github issues, repo as feature requests and, as I said, power added a couple of new ones in there. So looking good for the future of the the team's generator for the core uh tasks, youtube's build core.

F

As you can see in the slide this week we updated it to separate out the the actual generator, the the build tasks and the the ux components and for the build tasks we released a new preview yesterday uh that supports building for multiple manifests.

F

uh That is not the typical scenario when you're just billing or doing a test etc, but when you actually go into real world deployments and you might need to have different kind of packages for your test: environment, staging environment, the production environment, your different developers, etc, or for multiple tenants or using multiple id uris for your ssl tabs and bots, etc.

F

You can now at the time of build. You can generate multiple manifests for those different environments and that's a great way, and then I use it all the time with my teams. So the easy way for you, instead of manually having to modify your uh package manifest all the time. We also have the the react. Ui helpers that helps you get scaffold or generate the react.

F

Interface using uh react hooks. uh We are looking into right now how we can improve, improve the performance a little bit on those based on some feedback.

F

So that's the state of the art, as you can see, it's fairly consistent uh right now with number of team sub scaffolded, but it's about 1300 new teams apps every month being generated. So that's great to see thanks.

A

Thank you victor uh great uh tool, and let me say that I really love the support for react hooks which is now native in version 3.x. So thank you. Thank you very much now time to talk about the graph toolkit so beth. Take it away.

D

So for the recent updates, we fixed some bugs added some features to the msoprovider. I for those of you who doesn't know what graph toolkit is. It's a component library that help you build. Applications connect, that's powered by the graph super fast. We do have a new components coming up. It is the onedrive file, picker component, that comes with both file component and file list component. This is in free preview.

D

If you want to test that out and give us feedback on how we should represent the onedrive files in your ui and what are the properties and endpoints that you want to support for this component. Let us know- and you can install them at microsoft- slash mgt at next dot file dash picker.

D

I know that there's a also a demo today, at the end of the at the end of the call from tommy that we will be talking about the mgt react program, so really looking forward to that, and we also updated some samples and blocks in our wiki page on our aka.ms mtt site.

A

Perfect, thank you bye, so it's now time for the uh together mode picture. So if you like turn on your camera and it's now time to uh smile wave and make some fun using the together mode, so let me start first of all, the together mode and let me share with with all of you: okay, you should be able to see it. So here we are, you can smile for the picture first of all, and then we can eventually wave and do crazy stuff. So wonderful, okay, thank you! So much.

A

Thank you for this small amount of time that you share with the community and to share your face, and your yourself with everyone else. Thank you so much. So it's now time to move to the demos and uh first of all, we have chris kent from dmi who will talk with us about microsoft list magic, so chris uh feel free to take the stage all right. Let me share this. Your.

G

Screen and we'll get going on some exciting stuff, all right, everybody, I'm chris. Let's talk about some list format and stuff right, so the first thing I want to do is kind of talk about formatting in general. Right, so when we say list formatting uh we mean column formatting, we mean view formatting and we even mean uh some form customization right. So we can do some things where we can make columns conditionally show or high use the same kind of expression, syntax.

G

We can add a header and a footer, so we have lots and lots of things we can do and there's fact there's even multiple types of view formats. So it can be easy to get kind of lost in a sea of this and there are some things we can do to improve it as we get through that confusion. So let's take a look at what formatting is first, so I've got an exciting.

G

Screenshot of uh you know a pretty basic list on things with uh my warrior: horse's site- and here you see, there's a column format everywhere. Let's take a look. What makes that up all right, so the first thing we've got is a surface. So whether that's your list view you're inside microsoft, list you've got it in the list, web part etc.

G

That's here, so then, on top of that, we've got things like kind of a standard ui. So in general this is going to be your headers. If you've got groups, it's going to be various groups in here or aggregate. You know all of these pieces here and then you have your actual data right. So these are the list items coming back row by row and there's some pretty standard ways these get formatted right.

G

So we've got a uh a multi-person select field here you can see kind of the out of the box, put each name on its individual line and so on right. So we've got this as a number column, but it's formatted as a percent. So sharepoint gives us a lot kind of out of the box or microsoft lists right. So then, if we want to take that a little further, we can start to apply things called column formats right.

G

So each one of these columns- you can apply this to the individual list field or you can apply it at the site, column level, so that wherever that column shows up it has this fancy format and what that does is it gets applied to every item as each row is rendered right. So as each one hump happens, your format's evaluated and applied, and it's a nice kind of overlay while still giving you that same surface and giving you the standard ui.

G

So you can do your filtering and your sorting and everything else and, as you can see here, I've put a column format on every single column, but you can certainly mix those with kind of the standard and column formats and so on. Okay, now the next layer on top of that is view formats now there's one that plays nicely with all of this and it's kind of a simple one and that's called the row class. So when you apply a view format, you can apply.

G

What's called an additional row class- and here you just provide an expression- and you say whatever my expression is um apply a class right. So we could say every row that has assigned to equals to b make it purple in this case right. So now the nice thing with these row classes is again: you get your standard ui, you get all your data flowing through and whether that's got a column format or not. It's just going to kind of sit over on top of that.

G

So all this kind of combines together to create some pretty cool layers and give you a lot of options.

G

Now you can actually go even further than that and that's where you're going to control this entire rendering space and that's a view format. So now this type of view format, unlike the row class, will override everything right. So this is going to override all of your column formats.

G

It's going to write any row classes you want, and it's going to you're going to control the entire rendering. Here now you can do cool things here, because this is applied at the view itself. The views themselves can have multiple displays. You can have a gallery style view where you can have both a view format here and what called tile props internally.

G

It's called gallery when you go into the little view menu and you can apply formats there, which is really cool, and even if you want to so, we still got the standard ui here we can go even further and override that standard ui with our own right. So we can now we're doing some fancy things to kind of detect the first item and we're building our own kind of columns. So we can move that entirely. So you can see lots of customization options here and you can really layer your views and the nice thing is.

G

These are going to show up on all of these services so and it's going to look the same, whether it's in microsoft lists inside the app or it's in a web part, I'm going to say most of the time 99 of the time it's going to look exactly the same and that's really really powerful. You can do a lot with that, but there are a couple of issues here.

G

So you can see here like in this format, I've taken title right now: I've actually written out the you know title and then I've taken the field values from the title column and I've shown them here and what happens is what, if someone comes along like title? That's not really! You know that doesn't really apply here. Let's call that, like um I don't know standard id or whatever it is right, they rename the title column shock.

G

Why would they do this right and all they've done is they've changed the display name, nothing about your format breaks except now it says title, whereas in every other view of this it doesn't say title right, and so that can be a little confusing. So when someone changes, the display name, you've got to go and update all of your view formats where you've overridden that and that could be a real pain.

G

This is especially true in a gallery view where you're definitely not going to have this kind of standard, ui and you're oftentimes kind of putting those labels out there or what, if you've got another problem right. So I have this really cool column format. If we go back right, it's take all the took all these faces. You know what it put them in nice, little circles and kind of took care of understand. There was more than you know three here that could display. So it's called the face file and that's cool. What?

G

If I want that to show up in say here right, I want to show up here. Well, traditionally, I've got to go and copy that whole format, and then I've got to nest it inside here and that works, and we've got a few formats that do that. But what, if you've got? You know pretty complex logic, say you're showing an icon based on the status.

G

That also has to look at the completion field right, so it's got various colors and it has icons and it's all pretty complex and now someone says- and you copy that in multiple view formats and now someone says yeah- we actually want to use. You know icon xyz, instead of icon y zx right so now, you've got to go and you've got to fix that everywhere and it's very easy to make those mistakes or if they change those colors, and so you get into this kind of layering issue right.

G

So let's take a look at how we can solve that a little bit. So, let's head over to our exciting warrior horses list site now we're going to go to that same list, and it's almost like I just screenshotted this thing. So I'm just going to take this. So this is a standard list. No formats at all are applied right, so we've got that kind of out of the box, rendering and very quickly, I'm going to show you how to apply some formats.

G

All of these are samples that are available, so you can column settings format this column all right. You get some options here, I'm going to go to advanced mode and I'm just going to paste ones.

G

I've got another window all right, so I've got check boxes and let's grab a couple, others these we won't do them all and now we'll go to title all right and we'll advance mode, and here we're crossing things out if they're marked as complete and then we've got a progress field and percentage is okay, but you know we want to show that we can just that kind of data bars in this case, I'm actually going to show these data bars, ooh, pretty, yellow and let's just grab one more just for for fun, because this is a complex one.

G

That's that one we mentioned, which is called the face pile again. All of these are samples that are available to you for free, which is not just like I'm doing so. No, I didn't hit save on the other one. Today my yellow someone says, yellow. I swear. I turned off notifications, but uh I guess I lied so by swearing. I don't know what I've done now: okay, let's preview, that, let's save it, okay, so here's the idea right so now, we've got column formats, that's really cool! All right!

G

If I come here and I create a new view and we'll just call it magical right doesn't matter, and we create that, and you can see. Oh I've got other columns that are a part of that. So I've got the formats, those all kind of show up here and that's great right. So let me go back to my all items and that all works now, if I want to apply one of those row class formats we talked about, I would come in here and I would go to format current view.

G

I'm gonna go advanced right, just like a paste one in here and in this case let's grab one of these, since I remember which one it is in my little list over here ah and this one yeah. This is also a sample. All these are samples that are available there's a little weird way. If you look right here, it's just look inside this assigned to column and saying hey. If it includes me, then uh you know make it. uh I think it's gonna be red or yellow, yellow, right and red on hover.

G

So the idea here is: is this beautiful? No, in fact, I would really question whether or not it's a good idea to combine, yellow and yellow here, but the whole point is that I'm able to apply view format, custom logic um and samples are available. It's in.

B

G

Repo, but you don't have to do any kind of fancy coding you just cut and paste okay. So the idea here right is now I've got all of these layered and that's really cool, but this applies to a specific view. So if I close that and I go back to the new- we created magical right- I don't have that anymore, but I could do things like uh format this view and I could set up my you know my own thing right here.

G

So in this case, I'm just gonna just grab some really exciting format, just to show what we can do so we're overriding the whole thing so, instead of a row class, now we're doing a row formatter and in this case we're just putting a div, and this is a title and then the actual value of the title. So if we preview that wow, what an exciting format, we have many more complicated samples and everything else for that which I encourage you to look at.

G

But what I want to point out here is what we can do so just going to keep it simple is instead of saying title with a colon right. We mentioned this idea of what, if someone comes in here and they, let's save, that they come in here and they say, column settings and they go to you know what is it rename right, they're going to call this? You know my special column right and they name it that oh, no! Now we got to go back and we got to update the format here.

G

If we updated it, you know we use title anywhere else and we got to actually search inside this json that we just cut and paste from github. We didn't think we're going to have to actually touch this stuff. Well, the good news is, we can do fancy things like. Instead of referencing title, we can say exclamation points of the dollar sign grab that internal name of the column dot display.

G

So this is called field metadata, all right preview that bam so now by using instead of a dollar sign like we normally do to reference uh internal columns right. We're referencing the field metadata now right now, the only property available in the field metadata is this display name and it is case sensitive. So this is really really cool right. So, if I hit save on that, I come in here and someone says I'm going to rename that again right and they're going to name it.

G

You know horses is that high school horses sure you do right, they name it horses bam. Our format takes care of that which is awesome. So the nice thing with that is now these formats can apply all over the place right. So I don't need to know anything about this list other than it has a title column, and I don't care what you call your title column. We can now put this same thing everywhere, but what about I had some cool stuff right. I had some displays right in this case.

G

I had this kind of crossed out look. So how do we get that everywhere? Well, good news! I wouldn't have told you all this if there wasn't a way to do that, as so in this case, we're going to remove everything out of this element instead of showing the title value now, we're going to say, column, formatter reference very catchy right in this case we're going to use that those brackets with a dollar sign and we're going to reference whatever. So in this case, we're going to say title right, so we want.

G

However, the format would be applied to the title field. Put it inside my view, format. Preview. Maybe I didn't do that right. Let me look at that again, uh let's not do title, let's do a sign too how's that assigned to all right so preview that boom, so we'll just do that. So look at this. Instead of taking that whole format and sticking inside our view, format and bloating it there and having copied and paste code everywhere, we got to go update. I can now just simply say hey for this element.

G

The whole thing needs to be just whatever that column format would be normally now, there's some caveats right. You can't uh do some inheritance with some other stuff, but this is huge, so this takes away all of the kind of maintenance and stuff between all of these layers and makes it much easier to kind of open up holes. So if we jump back to our right here, so the idea is here: we're actually opening up holes inside our format.

G

So, instead of this, we cut a hole and we just bring in whatever that format is, for the column right, whether it's the site, column, you've got your complex logic on like say a due date. That's looking at other fields, and you want to put all that in there. Well, you could just sub that out to the column format that way. It's consistent between all of your views, whether you've applied a view, format or not or you've, got a gallery or not.

G

You've got the same display by using that column, format a reference and in the same regard, if you want to show uh you know certain field names, you can use that display name so huge, huge, huge, it's exciting. So here's that column format of reference again you give the internal column name and you're going to use that dollar sign. So this is exactly how we reference the value normally right.

G

A square bracket dollar sign another square bracket, internal name right here, but instead all you do is put it inside your squiggly braces column, format of reference with that and bam it works. Now. You can technically use this in your column formats as well.

G

I'm not sure exactly why you would, but I'm sure there are reasons right. If you wanted to wrap all that up so and then next thing is that field metadata right now. It's just that display name thing that might trip you up is that the period goes inside the square brackets and the exclamation point right there instead of a dollar sign, but these are hugely powerful for making your formats, um which can get out of hand a little bit.

G

You know it's easy to get a little complicated there, but keep them all consistent between them, while giving that flexibility to really provide that kind of wrapper and outer surface all right. That's it for me all right go ahead and check out our full documentation. Here someone asked about those samples- uh it's just like this, but instead it's instead of sharepoint gotta update that I'm sure david's pasted the correct link and that's all I got thanks. Everybody.

A

Thank you. Thank you, chris, like always a great demo, and it's now time for another great demo by kevin macdonald from cps about exporting sharepoint structures and documentation to mark down, so kevin feel free to steal the presentation, and I will let you know when we will see your screen.

H

Thank you very much uh always lovely to follow chris kent as a demo.

H

What I'm going to talk about today is a little challenge I had from a client, so just imagine a little bit. You've got a new project and the aim is you're going to create a set of sharepoint sites for a client and there's going to be all sorts of lists, backed up with site columns, content types all that all those good things you've got in sharepoint.

H

Unfortunately, you're, probably thinking now great pmp, powershell expert, all that can fly up to the clients, environment, nice and easily, but this client you're working with, doesn't allow powershell in the environment yup. That was a fun thing to find out in the early stages of stuff. So we had to get all these sites created our dev tenants and then try and find a way to move those across. So you've got your build out of your sharepoint.

H

No powershell all has to be manual, so anything you create you've got to recreate from scratch, plus they wanted these kind of to be templated sites that they could use for lots of different departments. So we had to give them a set of instructions, so the power users could then go and recreate stuff. And yes, you can go thing. I don't know about you. I hate doing documentation. I hate when you have a list of columns, you've got to type them all out and every time you need to make a change.

H

You're going to go back and say right. I've changed in this site. Have we changed it? There? Have we changed it there? I just don't like doing it. Why? I love the pnp provisioning stuff, um because you can just recreate that, so I started to think about how could we actually script up? The creation of that came up with a few options. Think about we could pull the stuff out from csum use. Pnp powershell, you know, you've got the xml.

H

We could just give them the xml and write stuff from that, but they're not going to like that. We could put out to csv start thinking about you could put in text files or even word documents, but gradually bottomed out to think about using pmp powershell a markdown.

H

I did actually start scripting. My own thing as a console app with with the csom site, but I was like this is nuts. This could be something useful for other people and I could go and spin up a nice new github project or because pmp powershell is open source and there was all sorts of good things going on there. I could put in a pull request to that and that felt like a much better way to go.

H

So I went ahead and I have to admit I hadn't kept up fully with what was happening with all the core implementations and looking at that at the time. I think I was it was around november december time, so it was the early previews of the pmp framework and I've been chatting to paul bullock. So I was having a look at some of the pmp core stuff.

H

What's great now is you're seeing the very latest there are green ticks all over the place. So you can see all the details from from this. I can see someone saying um I thought you can use the pnp powershell, so we were creating all the sites in our environment and then exporting taking that out from there and putting into their environment afterwards. So we could build it out all locally. Do all the developments using pmp using powershell, but then to actually apply them back into their environment.

H

We had to do things manually, so after a bit of going through the code and working out what could take place, uh I realized that we could do stuff with the pmp provisioning and, where that bit of being output to xml or um you can output it as a dot pmp file. I thought actually, if we could export all the definition as markdown files, then actually we could point the same pnp provisioning and get out an output.

H

So I mocked up in words a little bit of a breakdown of what we needed and let me flip over to some uh definition here. You can see a breakdown of a site that I put together. So you can see you get all sorts of stuff as markdown, but those who love markdown are reading that nicely. If you're using vs code, you've got the preview templates, you can actually look at things there. You can see.

H

We get the name of the template and if you put a nice template id in there, you'll get that as an output. uh You can see we list out the groups that have been associated there, the administrators, a few details on the navigation.

H

I start off with a list of site columns. So a definition in the table, then for each of those site columns very easy to read views of that, and the intention was that you could get all these things. You could go down column by column and it's following the same as you get from the ui that you can actually see what's going on, so you can hand this doc.

H

They can create that demo columns comments, column, they know its type um we put in there the internal name, because we knew we wanted to have it people when they create it and then save it differently. Oops double click there. So we we've put internal name display name and details, but then all the others we've tried to keep the formatting the same as you'd see from the ui, and you can see. We've got list of columns any content types. I've created it lists which columns are there for the content types and it exports the lists.

H

The details that come out. It's got that list of each of those that exist on there list. When we look at, for example, the demos one, it's got the description, whether it's on quick launch, etc, etc. So it really is helped there and being like this. I can do control a uh all my words closed, but the the intention is, you can do control a copy. This paste it into word apply your formatting.

H

Then you've got a nice formatted document that you can hand over clients at the end of it, and because this is the pmp call, I am going to go into a little bit of the code just to if anyone else wants to expand on this or take some of the areas, but you've got three key parts of this you're.

H

Looking at the providers within that there then is a formatter that does that conversion into the type so, whether it's xml markdown json within there and then there's the writers, so the writers will take up each of the individual bits that write up the components such as the content, types and areas, different areas like that, so you can see it's a little bit messy the first time I looked at it. I probably went yeah.

H

It was the the word I'd use on there, but once you dig into it, it's not too bad. So if you top start on the formatter, you can see that there is a two provisioning template. uh It's not that one! Sorry, it's the two formatted templates and it brings up a set of writers and these different writers when you expand and look on there on the markdown there's one for each of the different types.

H

So, whether it's the base properties, content types, features list instances and if we go into lists of those I'm just using a system that I am writing outlines. So it's just literally writing out the markdown line by line with a different formats. Looping through, for example, in this case, the the set of lists and just writing out the details, one by one where you've got groups such as the content type bindings, then it's adding a for loop for binding and sometimes we're writing into sub formatters within there.

H

But it's once you get into the flow of things, it's quite easy to add the different details and things onto there. So if you do want to use it, there is uh oops, let's go on to the other one. um If you do want to use it, it's just using the get pnp site template. So if you, if you haven't, used new core version, slight change of format from the pmp provisioning now- and it's got an example on there get pnp site template and you just do outputs to template.nd.

H

So if I bring up, you can see, I've created the one there. Let's create template two. It does exactly the same as if you're exporting it out to an xml file, but instead of the xml file, you get the markdown file that you can go and use bits from and because it's the same, you can pass handlers to that.

H

If you just want to get a list of site columns, if you want to put some filters in there, then you can put your different filters and just bring back particular lists or other items you want in there all the capabilities you can get from extracting pnp site templates. You can get with this markdown um the same format with the markdown as well, because it's all using the same mechanism now what's next, I think, is the answer. I haven't put all the handlers in there.

H

So things like pages, I haven't catered for those I I think, there's some other bits, I'm trying to remember the other one I haven't done on there. I haven't done every single element and even within things like the site columns some of the specific scenarios, it doesn't necessarily cater for at the moment, we'd like to fill that out, let's put a bit more ability to add a simple filter, so get it to filter out all the default content types and all the default list templates, and things like that.

H

So, if you just wanted to extract out what's new to things, then it'll be easy to do that. Most importantly, I'd love, you all to give it a try, and let me know what else you would like to see what would be useful? How would you like different formatting? How how easy it's used? Are there different scenarios that you could see from it? um So please get your hands dirty with it, and let me know what you think also I'd encourage you all get involved in pnp powershell and all the pmp core work.

H

uh I'm certainly planning later this year uh once it's horrendous project, our mum's working on and we can get the kids back to school and get it back to uh normality of getting more hands-on with all the pnp core stuff. But please do there's so many welcoming people there who can come and help you through it. So yeah get involved back to you, paulo.

A

Thank you very much kevin great work now time for tommy tavella, so feel free to share your screen. Tommy will show us the latest news about the sp editor, chrome extension.

I

All right, okay here is my two slides I'm going to do a demo, but I will just give a small introduction about the sp editor overall. But my my main topic today will be this new feature. Called mtt react playground, so about me my name is tommy toddle, I'm microsoft, mvp uh being for one year and one day now, I want to say shout out to irwin for the nomination year ago. So still here, hanging well and I've been developing uh solutions, mainly internet to sharepoint.

I

Since 2007 and half a year ago, I switched to to another side little bit different perspective to work with m365. I'm I'm doing solutions from the mobile app perspective and I work in r d works and also here I have listed uh some links. So sp editor comes in two flavors. It's a chrome and edge extension.

I

So this is the place where you can install this extension for each browser and also there is this. My twitter account with some hashtags to follow to get the latest updates and also the github repositories of the both both extensions yeah. Let's go demo demo time is the best best time. Always so first, I will tell you this is where it looks where you install the things.

I

I would like to get some uh thumbs up from people. If, if you really, if you haven't ever used sp editor, you don't you don't know, even what is sp editor, the problem is, I don't even see it at times, because I'm sharing but anyways, let's go so you go to this url, which I just shared and you install it to your browser and to use it.

I

You will have to press f12 or shortcut option command e and, if you're using mac- and you will open this developer tools and there will be a sharepoint that you click so when you select that you will be inside sp editor.

I

I added some warnings here, because this is very powerful too, so you are actually using the apis and you can do a lot of things. So this is like warning, but a little bit with the funny way of print and warning.

I

The the main thing I'm here today is is to talk about this empty, the class playground. I will let it wait a bit. I will just show you a little bit what else this thing can do so before sharepoint got all modernized.

I

uh We used to use this script, links to attach javascript to the pages and build your own customizations. So this tool was very handy for that. Of course you can use powershell or or any other cli tool, but to make these things first I create this kind of a tool that just add the url, the sequence, the scope and it just press and the script. Click will be there or you can remove them or even refresh the cache.

I

If the link is not working okay so, but this is classic stuff, so you don't need to really pay so much tension of this. Then there is the pmp js console uh here. uh This is maybe probably the fastest way of learning or just running uh fast.

I

Scripts in your site, so we really get the whole intellisense here. I can also add here everything, so we can really see what it does so the intellisense works very well.

I

So if I'm now, here click control d, this block will be executed and it's printing here website home okay, obvious title, but I can also do the same thing. I can like ask lists like this.

I

Let's move here like lists and let's print it out here and we click ctrl d, and we should have that all the lists in this current set listed here. So this is handy for doing some running some scripts or to learn uh pnp js, okay, to go forward.

I

This is also quite new thing.

I

This is same kind of tool to run scripts, but this is now against microsoft, graph, it's using the microsoft class graph, client, uh of course, because you are using the graph, you normally need to create a msl connection to the end point. So it's quite long with the session. What you have to do here, but you will you, have the possibility to to specify the scopes and and the authentication things how you want, but then you can also put the end points here so now this is like basic stuff.

I

I just press ctrl d, it will authenticate and it will print here the details. So now I can also easily like add here my mail press, ctrl d. So here we get mail also or I can like select everything- and I can put here like show me that I guess messages sorry. This will take okay, it was quite fast. So now I get everything here and you there is the craft explorer, which is also nice, but if you want a little bit write code, this is one tool to do that.

I

Then I will still skip the playground web properties, some use cases there are that you are saving some data to the properties.

I

So in this case it's normally you would use power cell or cli, but you can do here like a property here or something like and follow here. So we can add, with this tool very easily new properties here or we can even search search properties, but what is their core regulation?

I

So we get some properties, we can analyze.

I

What's what's in the property box, then we can delete this because we don't use it and then the same thing goes for list properties. You select your list, let's see, and then you can add list properties, and you can also make these properties indexed, that you get the possibility to find them using search.

I

So there is this index button here, okay and ah then this is also quite new thing. This is sp shooter. So this helps you. If you, you want to study different uh rest, endpoints of sharepoint, you just write it here and you press enter. You will get everything here. You can specify the headers or body.

I

If I put here like where it was shoot, we can see that I get the maximum amount of headers here or then I can just remove it back and I can check here at least so I get all the lists here. Okay, so and yeah you can select the method postbook or whatever from there, and also there is the webhooks.

I

This is something that is supported in sharepoint lists, so you can call your endpoint if something happens in the list, so this is one place to quickly create those. I can show you how it happens. So, let's delete this notebook and then let's create a new one. We select the list, let's say about the catalyst the keys means cat in phoenix.

I

Then you put your endpoint. This is not necessary, but here we go and then we just add it. So now, anytime, something happens in this list. This end point will be called with the payload of the list and some other information of the pennant.

I

Okay now to the beef. I still have some time to show uh mg the react playground. I like I like long names but yeah. I I saw the release of mct, react components and mgt toolkit, and I was really amazed. It was a really interesting project and normally when I want to learn something new, there has to be a project, but of course I didn't have any work related product, but luckily I have this sp editor, so it's always then very nice to uh to decide.

I

Okay, I want to do something with this, so I will add a feature of this in sp editor, so this is where we are now- and I'm really really excited about this. So we have now imported this logging component in this. uh In this editor and just added it here- and we get this very nice component here- render we can sign out and we can sign in it's all. The authentication is right here. You can use your own client id.

I

Also, you just need to create it in your own tenant and also add this chrome extension reply url to it, and that will be okay, but the good thing here is also that it works like you just save and you can see the changes immediately. Okay, so let's take another sample. I also added a lot of samples here, so that was the login component, but you can also create you can override every ui in the locking component.

I

So in this case we can see that I have overrided all of these and the component looks a bit different as you can see. So, if I remove everything from here press ctrl d, we are back in the normal state. Okay, I put them back.

I

We are in the custom mode uh here I can say, like click me to oh, okay, I save it and let's go and check it out. Click me get me out.

B

I

Or whatever? Okay, so you don't need to bundle everything to get started with mtt components. You can just open, sp, editor and and start playing with it, and when I was doing this, I added every component that toolkit supports and also about this msl configuration.

I

You can also create your own configuration uh when you export the client application straight from the msa and when you are using this, you cannot really use whatever. Whatever uh not a model is you can just use this uh microsoft, mct components and amazon, so don't go here or try try, no dash or anything like that. It will not work.

I

Then there is the events we can. uh Let's see what happens if I sign out from here I can say: okay, all these things happened, because I added here that the login event we always log it to the mainboard to the window. So now, when I sign in, we will get all the events here. So basically, then you could do another rendering stuff here. If, if necessary or you don't, then we got me.

I

This is the the gate component. This is very interesting. uh Now it's listing all my information here, but I can also change it. I can put here like this.

I

Yes, I guess is it oh, no messages, let's see yeah, so how we get all the messages from the tenant, and here again there is a template.

I

I'm reading the values I can create or render whatever formatting here I want- and I can just test it here before I push it back to to my real spf x project or wherever you want to run these components.

I

There is the person component. Well, that's just nothing really, but then people component. I think this was cool.

I

If I press here yeah, so I you can get a lot of information from there and you can just analyze and play with this. Oh, this is my favorite, because here you get a lot of information, so you can just check this out and practice them, learn them even debug them and and create uh open issues or or if you find something is lacking. You can always create uh issues for the repositories and so on to make this uh mgt even stronger, so well. Go here check this out.

I

uh That is in my team's channel uh speaker. I love. I really love this. uh I when I build these two, I even I'm not even mastering the mgt's yet so I'm using this just to uh to learn it by myself.

I

It's really a powerful uh total list, and it's all here check it out I'll, be dealing with that yeah. I can add a new task. If I want hello pmp, let's add it it's there and it's gone yes, cool it, just all works and yeah. Then there is also this kind of class component sample. So you can.

I

This is not even related to the mgt. This is just a react class component. So if you want to learn or test react things, you can also do it here. That's it wonderful! Thank you.

A

Thank you, tommy, really an amazing tool and a really great demo. Thank you so much. Let me.

B

Steal the presentation.

A

Thank you. Thank you so much to you to chris and kevin for great demos, and so we are now almost eating the hour. So uh I think we don't have time enough for a q, a we have just one more minute, but I want to remind you that there will be on the 18th of march 7 a.m. Pacific time the microsoft 365 general dev call, and on march the 11th 7 00 a.m. Pacific time there will be the next sharepoint framework call.

A

The recording of this video will be out within the next 24 hours in our pmp youtube channel. So akms, slash, m365, pmp, dash videos and remember, if you don't do that already to follow us on twitter and our at microsoft, 365 dev and at microsoft, 365 pmp.

A

So uh here is a list of useful links and thank you again for attending this special interest group call and hope to see you soon in one of the upcoming meetings. Thank you.

B