Microsoft 365 Community Microsoft Graph, 1 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Dev Tips and Tricks for Microsoft Graph - Visual Studio Code extensions

Description

In this 10-minute developer-focused demo, Elio Struyf steps through the latest time saving VS Code Extensions: 1) MS Graph Completion (autocompletion for Microsoft Graph URLs) and 2) Microsoft Graph Essentials (Preview) (CSS Completion and HTML web component attributes, if using MGT) inside Visual Studio Code. The extensions created by the presenter are available in Marketplace. The Microsoft Graph Essentials extension comes with snippets, code completion for CSS variables, and an extension pack. This PnP Community demo is taken from the Microsoft Graph community call – June 2021, recorded on June 1, 2021.

Demo Presenter - Elio Struyf (Squarl) | @eliostruyf

Supporting documents:
• Blog - Microsoft Graph Essentials extension released for VSCode | https://www.eliostruyf.com/microsoft-graph-essentials-extension-released-vscode/
• VSCode Extension - MS Graph Completion | https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-autocomplete
• VSCode Extension – Microsoft Graph Essentials | https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-essentials

Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog

A

Hello, I'm hello from belgium, um founder of squirrel. If you want to know more just take.

B

A

It, but what I want to try uh to explain you is that there's a couple of very useful plugins out there for visual studio codes. I was going to do a bit more demos, but I'm going to pack it all in a couple of basic things. So what have I developed over the past month? Two kind of visual studio code extensions. um I think they were already mentioned a couple of times by the team.

A

So there are two very handy, microsoft graph things that you can use for visual studio codes. One is the ms graph completion which allows you to use all the microsoft graph urls and get all the completion for them inside visual studio codes, because I love to use the graph explorer, but sometimes I just don't know which urls there are available or which actions and which properties are available. So I wanted to simplify a couple of things.

A

So that's why this visual studio code, completion extension was created, and, besides that we also- or I also created the microsoft graph essentials um still in preview at the moment. Actually, there's nothing! uh That's limited for not going out of preview, but what this graph essentials uh extension will do. Is it packs all the good things that are are out there, but it comes with a couple of uh handy things as well like css completion or, if you're, using the microsoft graph toolkits.

A

Also, all the html elements are in there. What I use very often is quickly open the api documentation site or the graph explorer site so that I don't have to open my browser. No, it's just going to open that for me and then a lot of these very handy snippets when you want to do some react um things with the toolkit or when you use html or when you use css. So let's just jump into a demo. I prepared a lot, but now I cleaned everything so now I started all with empty files.

A

So what I have here is the well-known graph.microsoft.com url. So if you have one of these extensions installed, if you have the essentials, then it automatically comes with the autocompletion, and if you install the autocompletion, you only get that. But what will happen is from the moment you're going to use graph.microsoft.com and you type slash. It will get the outside completion for you. So basically you can select which parts you want to add and then it's going to show you all the functionalities that are available also what methods are available like get and post.

A

um Let's say that we want to go to me and then on the me endpoint. You will see that there's much more. So let's say we go for drive and now it takes a little bit longer if there's a lot of caching going on. But if your cache doesn't have the api yet cached inside visual studio codes, then it will do an api call. It will receive that information and then it will catch that information so the next time it will be much faster, so I can then say roots and so on and so on.

A

It also supports tokens. So if we are going to go to drives or let's say, drive, no, is it drives yeah here, then we can specify a key which is the drive id. This is also being supported by the api. So let's say that ds000 and if I do slash it will fetch the next part of it. So very handy that way, you don't have to go back each and every time to the api documentation.

A

um Still, if you want to do it, you can also go via command and in the commands you will get graph there. You will see open graph, explorer site or open the api documentation sites, one of the two most used ones, and what I'm just doing there is you opening that particular site, nothing more than that, but very easy to just open it from your favorite code. Editor, so same thing goes for the graph explorer sites, and then it just opens that particular website great.

A

So, what's more, if you're using the toolkit toolkit comes with a lot of very handy elements, web components, but these web components all come with their own properties, for instance, so we can go to the documentation site or you can install the essentials and from the moment you install the essentials, you can do mgt and then you get all the components that are available.

A

So let's say that we are for going for agenda and then you also get auto completion on them, so everything is documented here. So all of this information comes from the actual documentation. So it's not something. I build up it's uh scripted so that it scrapes everything from the documentation site and it allows you to then say: okay.

A

This is three princes and this is working for each and every one of these components, so mgt login people, person a person and so on so same thing, avatar and so on, so user id is user id of that particular user. And that works another thing what you can expect from the plugin is, if you want to do custom styling.

A

So if you want to apply your own custom styles to the microsoft toolkits styles or components, that's something you can do um how! Yet again there are some things for it. So if you do mgt agenda, it's yeah, it's a code snippet and then it will say: okay, this is the mgt web component and then you can add your own custom class and you can start styling them.

A

But if you already used these styles, um you might know that they are using css variables and maybe you don't know all the css variables out of your heads and that's where yet again the tool comes into place here. You can, for instance, see agenda and there you will receive all the information from the agenda. So if I go to microsoft, graph toolkit- and maybe that's also a good url to be adding to the.

A

To the extension, so if we are going to agenda here- and we are going to the custom css properties, these properties- they will be available here inside your code editor, so there josh agenda and then you will see header color. um Oh, this is the event but yeah. Basically, if I go to event and then there we go so all these things that you see here, uh you will see also on the left side um and so on. So that was actually it.

A

um If you want to install these, then just go to visual studio at the marketplace and then look for my name or look for microsoft craft and then you should be able to find them. So that was it um so nothing more to show as those.

B

Are all of the demos those are excellent extensions to show in there earlier um quick question uh if people have any feedback suggestions, where can you point people to? uh Is there anything um open source for this, or is this just? You have a way to collect feedback, what's kind of your mechanism, for that.

A

Oh, if you just go to the visual studio code into the extension, there is a link to the github repository, so both of them have their own github repository open source. So if you want to add something um feel free to do so, um my accept was going to add a couple of things to them. You wanted to do post requests and also put the body of these um his post request inside the plugin. I haven't seen the pr from him, so I'm still expecting.

B

We'll keep bugging him about that.

B

All right well really appreciate yeah, so I've got called out there. I appreciate you sharing this uh look forward to people um taking a look at these. We did put a link to them into the uh chat window on here, but we'll make sure these also get published in the uh the show notes as well. So thank you so much elliot. I appreciate your time and showing this wonderful stuff for us to be able to take a look at.

A