Microsoft 365 Community Microsoft Graph, 4 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: New SP Editor chrome extension with Microsoft Graph Toolkit React playground

Description

In this 16-minute Developer-focused demo, the presenter Tomi Tavela updates viewers on a M365 Developer extension executed in the context of the browser that makes it easy to learn and test the latest MGT controls using actual data to create SharePoint applications. Use SP Editor chrome extension to create and update SharePoint Online/SP2013/SP2016/SP2019 css/js files, inject files to web, manage web/list properties, list Webhooks, and run scripts calling Microsoft Graph. Run components before pushing them into your SPFx project. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 4, 2021.

Demo Presenter: Tomi Tavela (RND Works) | @tavikukko

Supporting materials:
• Repo – SP Editor for Chrome | https://github.com/tavikukko/Chrome-SP-Editor
• Repo - SP Editor for Microsoft Edge | https://github.com/pnp/sp-editor
• Tool – SP Editor - Edge Add-on | https://microsoftedge.microsoft.com/addons/detail/sp-editor/affnnhcbfmcbbdlcadgkdbfafigmjdkk
• Tool – SP Editor – Chrome extension | https://chrome.google.com/webstore/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd

Learn more:
• 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

I'm going to do a demo, but I will just give a small introduction about sp editor overall, but my my main topic today will be this new feature. Called mgtt react playground, so about me my name is tommy tavel, 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.

A

Since 2007 and a half year ago I switched to to another side a little bit different perspective to work with m365, I'm 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.

A

So this is the place where you can install this extension for each browser and also there is this. uh My twitter account with some hashtags to follow to get the latest updates and also the github repositories of the both both extensions.

A

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 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.

A

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 tab, you to click. So when you select that you will be inside sp editor, I added some uh 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 little bit with the funny way of freak and warning.

A

The main thing I'm here today is to talk about this empty the craft 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.

A

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 any other cli tool, but to make these things first, I create this kind of uh tool that just add the url, the sequence, the scope and you just press and the script. Click will be there or you can remove them or even refresh the cache.

A

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. uh Then there is the pmp js console uh here. uh This is maybe probably the fastest way of learning or just running fast, pmp.js scripts in your site. So if 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.

A

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

A

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 pmp chase okay to go forward.

A

This is also quite new thing.

A

This is same kind of tool to run scripts, but this is now against microsoft, graph, it's using the microsoft class graph, client, of course, because you are using the graph, you normally need to create a msl connection to the endpoint.

A

So it's quite long decision 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 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.

A

So here we get mail also or I can like select everything- and I can put here like show me that mess- I guess messages, so I should take okay.

A

It was quite fast so now I get everything here and 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.

A

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

A

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

A

But what is their core regulation? So we get some properties, we can analyze. uh What's what's in the property box, and 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.

A

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. If I put here like there was a um shoot, we can see that I get the maximum amount of headers here.

A

Oh 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.

A

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.

A

Network and then, let's create a new one, we select the list. Let's say about the catalyst: the keys means cat. In finish, then, you put your endpoint.

A

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

A

Okay, now to the beef, I still have some time to show uh mg d react playground. I, like I like long names but yeah. I I saw the release of mct, react components and mtt 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 project, but luckily I have this sb editor, so it's always then very nice to uh to decide.

A

Okay, I want to do something with this, so I will add a feature of this in the 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 uh configured here. You can use your own client id.

A

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.

A

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. We are in the custom mode. uh Here I can say, like click me.

A

Okay, I save it and let's go and check it out. Click me get me out of here or whatever. Okay, so you don't need to bundle everything to get started with mtt components. You can just open, sp, editor and start playing with it, and when I was doing this, I added every component that to work it supports and also about this msl configuration.

A

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

A

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 import uh to the window. So now, when I sign in, we will get all the events here. So basically, then I you could do another rendering stuff here. If, if necessary or you don't, then we got me, this is the the gate component.

A

This is very interesting now it's listing all my information here, but I can also change it. I can put here like this.

A

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.

A

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 spfx project or wherever you want to run these components.

A

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

A

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

A

So well, go here check this out. uh That is in a team's channel speaker. I love. I really love this. 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.

A

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

A

This is not even related to the mtt. 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. Thank you, tommy, really, an amazing tool and a really great demo. Thank you. So much.