Microsoft 365 Community Community Demos, 28 Mar 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Introducing SharePoint Typed Item VS Code extension

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 28th of March 2019. In this video, Sergei Sergeev (Mastaq) introducing Visual Studio extension called SharePoint Typed Item to increase the productivity of the SharePoint Framework developers.

Presenter - Sergei Sergeev (Mastaq) - @sergeev_srg

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-28th-of-march-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Thank you very much for this opportunity for the demo. It's a real, quick introduction, so my name is Teresa, gave I'm sure in point and o365 developer and consultant office as of his development in the P yeah right and most of the time, I workers in the brethren conductor. However, recently I have started a new brand and company called Gnostic, so I'm going to develop late and future and planning to sell some Phoenix for SharePoint. Of course, under this brand. So in my demo, I want to show you a SharePoint site item.

A

That's yes, code, Padian I've created recently. Fortunately, that's the only slide. I have so. Let's go ahead and see the demo.

A

Okay, I have a website. It's inside fufufu, Gophers I know probably they're, not so powerful, as warrior horses by Christian, but anyway, I have a list called a Afghani events here and imagine that you have a task to to create a web part. A point framework web part to show the data from this list. Volcanic events and I have prepared some basic math, perfect react to the part and I've added the code, which gets all items from the list using perfect straight away.

A

Using spirits require and using integers, of course, and here you see that let's say I get on the the first one. The first item and I want to show something. Let's say title and both of examples have one issue that this item has any type. So what does it mean? It means that my item object has many properties. I can type something like this or I can type, for example, if I want to display.

A

Let me actually start himself if I want to display, let's say venue right, I should and I should write video like this, and the issue here is that we do not have intelligence from us code didn't we do not have build time, chicken from typescript compiler and in general. That's this pattern, consider it as bad practice for type script development, and we should avoid using painting.

A

Fortunately, you can fix it very quickly by introducing a new interface. Let's call it upcoming events friend lists and we can include, let's say title and then here right and I should change this painting to upcoming events and now I have intelligence and all good stuff.

A

Well, if we as you and have I, have hosted work when she, let's refresh the page and I, have finished a big poke right right, that's right, and if you want to display any other field like just description, etc, the end you should type another field and this interface etc, etc, and this process quickly becomes routine and that's the reason why I've created a SharePoint type item reduce to the code extension which automates the process of creating such kind of interfaces for for using them inside SharePoint framer with integers or using spiffs a client.

A

It doesn't matter so how to how to use it. Let's, first of all, let's go ahead and install it. You should search for SharePoint type item I, have it installed already now, let's go like savor it and let's go to the escort settings, the JSON. You should manage settings for the extension and the escalate into the JSON or in a separate file. You have two options: let's go ahead and add new configuration for this extension under settings of JSON, so there is an entry and you have also have an intelligence here.

A

You should provide a few required properties like site URL, so I'm going to use my own full go first web site. You should also provide an output path. Let's say: I want to generate my interfaces and the answer C / generated and also I should explicitly specify which lists or pension types I can. Some types are also supported, which lists, in other words, for each lists.

A

I want interfaces to be generated so, in my case, I'm going to generate an interface for my kind of ends list so I'm going to use URL settings and list slash up cannon events like this Safari remember yep, and basically this is it that's the minimal configuration you should provide in order to make it work now, call your dress code, command palette and five SharePoint and select generate interfaces.

A

If you're running for the first time, it will ask you for for authentication details, you see it supports and princess as well I by using a line here. So I select SharePoint Online I select, let's use on the notification, and let me provide my.

A

Educational details like client, ID and client secret in just a few select this now in the bottom. You see this flashing message saying that it was generating interfaces and finally, I have I. Have this folder and subfolder and I have a file called upcoming events, so if I open I see that it generated for me all the fields I have in my my initial upcoming events list so now, I can simply remove from this one.

A

This interface completely and instead I'm going to use upcoming events right yeah right this way and of course I should provide an input statement. Now it's safe and now, if you type item dot, and you see that it shows you intelligence for all the fields available, so I can show the scription. Then you have cetera et cetera.

A

If you have a need to, let's say, add a new column, let's add Hyperion field and call it let's say my my input, for example, save it and, let's add some actual URL here, for example, HTTP the URL and please go here safe, so I've added a new field, and currently my upcoming events, interface doesn't have this root included. So I should again call the command palette and select generate interfaces once again and what okay? Of course there is no the occlusion it happens if the iranian go up serve.

A

So, let's simply try it once again. So this time it worked, I have my interface, it's regenerating it now. I can use it such way. My teen fold, dot. Let's say I want to output description. Let's save it. Let's see the bills completed.

A

Yep, that's her fresh out. All apart and now I have my description for from the link. I'll just add it right. There are additional options you can configure here. For example, if you don't like the oops, sorry, if you don't like the file name, you can change it to, let's say e pi coming events, click Save and click generate interfaces once again and this time and this time it should check and change it to PI upcoming events.

A

Ok yeah, the thing is you new name, and you should fix it here and here here. Additionally, you can provide filters for fields. If you don't want all fields to be food, it included. Sorry, you can exclude hidden. You can also exclude field by internal language. This way so for advanced scenarios. Please use the extensions official web page and that's it from my side. Thank you very much for watching, also very cool demo. That's going to be a great feature for a lot of folks.