Microsoft 365 Community Viva Connections & SharePoint Framework, 16 Aug 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx and JavaScript community call - 16th of August 2018

Description

Recording of SPFx and JavaScript development in SharePoint Community Call from 16th of August. Topics include updates from SharePoint engineering on SPFx, latest on PnP JS Core, Office 365 CLI and Reusable SPFx controls.

Cool demos on VS Code Extensions for SPFx and how to modernize classic SharePoint list form experience.

You can download an invite to this bi-weekly call from https://aka.ms/spdev-spfx-call.

A

Hello and welcome to the SharePoint framework and JavaScript special interest group bi-weekly media is August 16th 2018 halfway through the month of August. Already we got a great call lined up for you today and advance hmm see I'm, not a certified master in PowerPoint I. Don't get these things so SharePoint patters of practices.

A

Why do we have the special interest group meetings and the reason behind that is we're part of the larger SharePoint patterns and practices program, but the issue we had is we just had too much content to really kind of cover that in a single monthly call, so we broke outs and we have bi-weekly calls you are listening currently, so the one for Shepherd framework and client-side development.

A

We have another call that covers see-saw manage code, development and PowerShell in addition to the monthly calls, but these allow us to be a little more focused and provide a little more deep dive into certain topic areas that we just couldn't cover on the larger calls.

A

Generally, this call is going to cover a SharePoint framework latest updates how things are going with that and associated client-side development patterns, as well as developments with the P and P libraries. Those are the reusable P and pjs libraries, as well as the reusable components and the office 365 CLI links down at the bottom s, P, P and P community will take you to the SharePoint area of the Microsoft tech community. That's a great place to ask general questions that aren't necessarily related to any of the specific libraries. That's a great place for your.

A

How do I design it questions? How have you architected questions stuff like that SP dev Doc's, the second link there will take you to all of the SharePoint developer documentation, so that is going to be if you're new to SharePoint framework and looking to get started. That's gonna have all the tutorials and walkthroughs. You need to get started there, but as well. If you're working on manage code development with the the solution packages or, if you're doing add in development, the documentation for those things will be there as well.

A

So do check that out for all your documentation needs. So what are we gonna cover today?

A

As always vases says, hi I forgot to take that off the slide engineering update on SharePoint framework, we'll start off with that, then we'll have update on P and P J's client libraries, as well as a short demo, on a little sort of play, play test, experimental thing, I, tweeted out last Friday and then some updates on office juices, v, CLI, SP effects, reasonable controls and then two great demos, one from Ralph discussing some good vs code, extensions that really helped out with SP FX +, SP dev work in vs code and then as well from Oleg, has a great demo on some tooling around modernizing classic SharePoint list forms and really helping out with that sort of thing.

A

And do you remember please do mute when you join the calls it does help with the quality of the recording.

A

Alright and hopefully at the end, we'll have a little bit of time for Q &, A.

A

So before we get to the meat of the call, just wanna highlight, as always, opportunities to participate. The best way in my opinion to participate is please do get in touch. If you have something you'd like to demo reach out to myself or visa and we'll get you a spot on an upcoming call, it might not necessarily be the the next call right. We might have stuff already scheduled, but we will absolutely get you on a call. So if you have something cool you've been working on, you want to show it off to the community.

A

Please just get in touch we'd love to have you on a call. I know, I, say this every time, but I always learn something new or see something I wouldn't have thought of in those demos, so I think they're a really valuable part of what we do on the call. So what kind of stuff are we looking for your demo, anything around SharePoint framework, anything around using the PNP, jeaious libraries or the office 365 CLI, or the reusable controls, excuse me or anything really having to do with client-side development in SharePoint.

A

So all those kind of demos are welcome. Please just reach out. We will get you a slot. As always, you can contribute on github. Contributions on github can come in a couple of different shapes, so you can report issues if you're using any of the libraries or SharePoint framework itself. Please do if you find problems or have ideas on how to make things better. Please report those we can't fix stuff and make stuff better. If we don't know about it as well on github you can always. We always accept pull requests.

A

So if you have ideas on how to make the library better definitely welcome those contributions would just throw out there if you, if you have an idea, that's sort of a big change before you spend a lot of time reach out. Let's discuss it, so you don't spend a lot of time on something.

A

Maybe we wouldn't be able to merge for some reason right so do just reach out if you have a big change, but if you have ideas, absolutely welcome those and love all the contributions everybody puts in every month out there from the community and then finally, you can always provide feedback on all the various things we do. So these calls the libraries the documentation, you know all those sorts of things, samples or lack of samples stuff, like that, we do appreciate that feedback. We do listen to all that feedback.

A

We aren't always able to respond to it immediately or correct, whatever might be wrong immediately, but we do take it to heart. We do listen and we do very much appreciate the feedback for everybody out there. So we get great feedback from the community and love that and please keep that coming as well.

A

I'm, just off my game today was changing slides. So basically, if you wanna go ahead and take over cool.

B

I'll, do that, but you'll need to be my lovely assistant, moving on our round slides and a few updates on a shipment framework from an engineering site so or let's say classic slides first, can we actually move to the next slide? We just like can move the slides?

B

Yes, thank you so reminder on the dev Docs we've talked about this one already and I promise to keep this and every single presentation what I do for years and years forward, so akms the dev, Docs or dev toast of my stuff that comes to ship when I'm in dev.

B

This is the location for everything related on SharePoint development and we are, we will be releasing actually the makers documentation here, relatively soon from checks as an example and one point: six shipment framework documentation is coming pretty soon SharePoint framework and SharePoint 2019 development documentation is coming pretty soon as well. So this is absolutely the right location to find anything what's relevant for you related on SharePoint framework or SharePoint headings or SharePoint development in general. Now the next step is the our issue list, and this is actually something a pretty late minute.

B

So that we can go to the phone, the Excel, so okay missus be the issues, and this is around reporting API issues from development issues to directly to engineering, so I, just that actually had a meeting hour ago with our support and we are going to increase the support resources on this one, which is good. So we will have also additional people joining on tacking and labeling stuff so which will help us to keep up to date on on any known issues what the community is recording.

B

So this is an option for those customers who don't have a premiere support and they cannot actually report their issues or development issues directly to the sharepoint online development or the support to support. So we are triaging these issues twice a week inside of engineering and then, depending on the criticalness of your reported issues, and we might jump on it. We might delay that for a while two other things, what we need to do, but things are heading to the right direction. We are getting more resources on this side in the future. Now next slide.

B

Thank you, so just a reminder, or just a updated, slides on SharePoint, same work, assumption okay, you such a this week, so you can actually see the spikes on the top right corner on the latest from Monday and Tuesday. Today is Tuesday and we can actually say that we did a again an all time record on a daily usage on SharePoint framework and the u.s. is growing extremely fast.

B

So if SharePoint framework is by far the most fastest growing third customization model initial office 365 and it's already outgrown every other customization model and office raises to five. So if you're wondering is it worth while to actually learn SharePoint framework development answer is actually this, so people are using. This people are deploying this. The right side is actually the tenants and the left side is the users and I I cannot provide you the exact numbers, but they are big, so they aren't really big on the usage sign now.

B

Moving on on the slides there, we go quick update on the roadmap and each have a monthly community caller this week. But just updating some items from here so SharePoint framework 1.6 will go out on end of August. We originally to be honest. We try to put it out in the end of July, but now it is the end of August.

B

We are locking down the server side and client side code by this week and then we'll do some polishing and documentation, work and Quality Assurance finalization and then we'll push it out by end of this month and that will include then the native graph access for SharePoint framer of GA. So you can actually start using that in production dialogue framework, a production usage tenant wide deployment is there as well, and that is something which we demonstrated in the monthly community course I'm going to paste in the monthly community call recording URL in the ion window.

B

If you haven't had a chance to see them, that demo is the last ten minutes of that call, but it actually is relatively efficient because you using the tenant, wide deployment or SharePoint framework extensions. You can easily enable extensions to be available across the whole tenant, and that is really really great and there's gonna be a preview on socket IO. So good I, oh well, let me actually explain this in a slightly more data. So technically our API is list.

B

Api is, and life array pairs already supports, subscribing to Evans, but we will have a wrappers for SharePoint framework and which will make it easier for your web parts to react on events on a list and and libraries, so somebody's setting an item or removing an then you were able to refresh your web pods easily and there's gonna be a live demo in that one obviously later, and then we're looking into having shape on native SharePoint 2019 support in 1.6.

B

So you can choose the environment to be a SharePoint 2019 and the storm behind of that is that that particular item is not yet finished. We're hoping to get it in in 1.6, potentially, it might be delayed until 1.7, SharePoint 2019 is in preview. So it's not a super critical thing, but it would be nice to have it already in 1.6 now. Can we let's move forward Patrick on the following slides?

B

Do I actually have a reminder on this one, so she opens target at the reminder on this one, and this is our let's say reference solution on how to build modern and cool portals using modern experiences, and this is actually the the second bullet point on. The slide is something new, so this is super warranty already adapted, so the the the most used web part is actually the tiles web part from this package, and it has been used already in five more than five hundred and fifty ten months.

B

So it's nice to see that at least developers are using this and demonstrating and testing capabilities. It is fully open. Source code is available. You can see how it's actually being built. It is using reusable controls and other cool stuff, and it has a pretty complex provisioning logic as well, which you can use as a reference for your customizations as well.

B

By ignite, we will be actually release in a pretty cool self service, automation, setup and and where you can actually then sign in as a tenant, administrator and you're able to then select from a different content packs and one of the content packs is actually the shipments target portal.

B

So you're able to say hey to my whatever test and I want to provision that kind of a site, collection, structure and click test provision and our engine is going to take care of the provisioning and that's gonna then try and make your life easier for pre sells and demo whatever my usage and then all of the content box will be open source, so you're able to access all of the information as soon as possible, and also the automated solution which we will use and build for this one will be and source.

B

So we were able to see how everything is happening behind the scenes, but that's it for that. One Patrick! Next slide, thank you. We moved to your section, so you can actually take it over.

B

Patrick Patrick Patrick, and we can't hear you at least I, can't hear you no. No. We cannot hear you well. That went well. There's the first Skype issue of today so welcome. We went 15 minutes in this call until we actually did the first Skype issue, so your microphone apparently isn't actually catching Patrick and not sure. Actually what happened there so.

B

This five worked for me, but it worked didn't for a trick. He is his reconnecting clearly because now he's gone and now he's back.

A

There's much now.

B

We can hear you yes.

A

B

Okay, let's just continue.

A

No I'll just start talking and you guys will hopefully see the screen shortly. So.

B

Next page there's greenness there: okay, oh great, so.

A

Next release is gonna, be September. 7Th is the current plan that might be a major update to 2.0 I'm playing around with some of the internals of the library. I will keep folks posted I. Very much expect that change to be invisible to all of you using the library, but just trying to respect the whole semver stuff. That might be a major update because we will be changing some names and things like that.

A

But again, I do expect that to be pretty invisible, change, pretty invisible update to to everybody, but so you might see the version number jump, but I'm not sure I will, let folks know just reminded libraries are published on CD nsj. If you are having issues with the CDN, please submit an issue with us with as much detail as possible, so we can definitely check that out.

A

We've had a couple people report. They had some issues, loading the libraries from the CDN and we haven't really been able to reproduce that or I haven't so the more detail there, the better, because if they're, if there are problems, we definitely want to get those resolved. A quick note: we've gotten a few comments recently on bundle, sizes and I wanted to share some thoughts.

A

They're kind of a traditional way to handle that with webpack is, would be to make those external files put them out on the CDN and then also rely on the local caching in folks machines. So a file, an individual file, for example p.m. PJs- might be large, but really it should be about a one-time, download or maybe a once a month download if you're, if you're updating each month and then then it should just sit there.

A

So the real impact that bundle sizes or large files have is that is that first view, and especially on mobile, but as well a little bit on resources. So you have to load all this stuff up. You are really kind of sort of asking for a lot more memory or just general. You know system resources, then you might actually need so I mentioned doing some restructuring. So some of that restructuring is around kind of trying to look at different approaches for this issue.

A

So taking a look at that, but one of the big sort of not problems, but just things about SharePoint that there isn't a great way to get around is web references, everything and everything references web in some way or another right. So it's hard to split those components up.

A

One of the things we've looked at is we could have sort of two SharePoint packages right, but then that's more to manage more for you all to install and inevitably, if we had one that just had the core stuff like lists and webs and then another that had other stuff there'd be overlap and there'd be constant struggle about what should be in which package so I don't really want to go down that path either. But that brings me to a little thing: I was playing with last Friday and I'll.

A

Stop real quick I, see somebody said a good documentation improvement. Please submit an issue for that. I'm, not gonna, remember that from this list, but please do drop an issue. We'll have a look at that. We do appreciate all the ideas on how to make the documentation better, but so real, quick I want to show you guys. I played around this idea of or I should. Let me show this first.

A

So if we have, this is a SharePoint framework, hello, world webparts, oh I've run the yeoman generator and I've imported the P and P J's stuff and I'm. Making three really just dead, simple calls so I'm getting a list I'm getting another list and I'm getting another list and I'm using a select here, and so nothing crazy. But the idea here is well under the hood. These are just fetch calls just get calls right. So in theory we don't need we're not really using any of the SharePoint p.m.

A

PJs stuff in these simple cases right we're not doing, updates and handling that we're not doing batching and handling that. So in in theory, the thing I started playing with last Friday is we really could abstract all this away right and just turn this into just simple, get calls and so I- and this is totally experimental code. So please do not use this in production or as an example of how to write amazing code, but this was just a play with the idea of.

A

Could we successfully abstract away at the sort of production, compile phase the PM pjs stuff in to fetch requests, and so this is actually out there. It's in my github, so it's not in the PMP json'. It's in my fork and I can I'll share a link as part of this call, but the the general idea and again lots of ways to do this. Don't take this as the the be-all end-all perfect way to do it, but we're just using regular expressions, the kind of look and see.

A

Are we importing something from P and P SP and then are we finding things that are just get calls so that start with SP and end with dot, get meaning they're a simple call they're, just a very simple call there, and so what we do, then, is we figure all this out and we're actually doing something very naughty and using eval, because what we're doing is we're taking the string text of this command so we're taking this part of the command and we're running eval on it, which is actually going to give us our object and then that object in PN pjs, we know, is going to have the two URL and query method.

A

So we're gonna drop that right into a fetch request and then to help us out and so that the stuff downstream gets the same things. We are also outputting the same options that get work that get requests would have, and this is again fast and dirty way to do this- we're just attaching into window not great, but it works for just doing this little test, and then we come in here and we're actually returning this promise. But this is how our internal parsing stuff works. If you unroll it and simplify it.

A

This is how that would look so we're producing the exact same output to the consumer, and but let's see what kind of real impact that has.

A

So if we go to our hello world project, what I want to look at and we're gonna comment this out: real, quick and I'm going to run oops build and bundle, and you can see here what I've done is we're gonna, be modifying the web pack configuration inside our SharePoint framework project, so we'll take a look at that in just a second, but I want to show you what we are actually going to end up with in terms of file size, so we're getting this bundled up and we will.

A

Hopefully that is not the right place.

A

Sorry, one second we're toast, so we actually look and we got 590 K and a lot of that is coming from p.m. PJs. So this is sort of our effort to kind of recognize that and here's one of the the complications. So it's smart enough to see. There's all these exports or unused whoops and it actually lists those out, but the problem is right now, because a lot of these are referenced by web, for example, they get pulled in. So when we come back to our gulp file.

A

I want to uncomment this real, quick and we'll save this and we're going to run the exact same, build and bundle, but this time we're using our loader here and right now again, this is a hacky experimental kind of thing, I'm hard coding, the base URL here right. We could have different ways of doing this, but at the end, what we're gonna see is so this will have run through.

A

And give that just one second, to finish up, you know, there's yep, but you can see we're down to 29k, so we've taken all of the P and pjs stuff out, which is good in this case, because it's very simple and if we can actually look in our bundle here, we've abstracted these out direct fetch calls and then we're using we're piping that to our parse and then piping that to the exact same stuff we had before.

A

So it's I think an interesting approach, an approach that could have some merit and what I want to kind of throw out. There is invite folks, if somebody is interested in helping out with this and helping kind of expand this to be a real thing. Reach out to me not right now in the call but reach out to me after the call I'd be interested in working with you on this. It's not something.

A

I am gonna, have a ton of time in the near future to really invest in, but I think there could be some potential here and just to show you it does work after you replace those calls. So I think it's an interesting idea. This kind of post-processing approach again this is super simple, but I do think you know, could have some promise there sort of get get down into the web pack stuff and really, you know, shrink things down as much as possible. So moving forward the NPD github do slash P and PJs link.

A

There is to all the documentation p.m. PJs on Twitter. You can also follow me, mediocre bowler on Twitter I, don't tweet too much, so you won't get a lot of spam and stuff. For me, you know necessarily so updates for the office 365 CLI new version 1.5.0 is out with support for managing content types fields, navigation, nodes, client-side web parts, as well as listing columns and updating site properties in progress, support for SPF, X versions for upgrade across sorry, more SPF, X versions.

A

So the the way the CLI can now upgrade your SPF X projects, cross-platform P&P, starter kit set up scripts is in the works and then more commands always of course welcome feedback on this as well. So please do check this out, give it a try and then, if you'd like to report feedback, you can always use the get ur channel the hashtag office, 55 CLI on Twitter or the issues list in the office. 365 CLI repository is a great place to provide your feedback as well.

A

So the SPF X reusable components, lots of stuff happening here. 17.0 has been released for the react controls, so these are the ones you would use more in the body of your web parts, and this would be the people. Picker has some added functionality. Three different issues were closed there, as well as shrinking down the bundle size, so we're all we're all about bundle size recently, but statically referencing, some of the office UI fabric components and things like that.

A

A couple of fixes as well, the fieldname render on click now is, is fixed per that issue 103 there and then for the property controls. These would be the controls you would use in the share price framework. Webpart property pane, the property field collection data had some significant updates there, based on those issues again coming straight from the feedback from all of you out there in the community.

A

So very much appreciate that and then as well a couple of fixes, so the property field, multi select and the property field order both had a couple of issues fixed. You can see number 85 and 81. If you want to go check those out for more information.

A

Do please check out the SharePoint that github io / SP dev, FX property controls or SP dev, FX property, I'm, sorry, FP yeah, you can read the second link, SP dev, FX controls react will get you details on the react controls and that first link would get you the property, pain control details. So do check that stuff out really will save you a ton of time. Creating your react components.

A

They are based, as mentioned above on the office UI fabric, so you're gonna get the same, consistent, look and feel across your applications across your webparts, your application customizers, but without necessarily having to invent all these controls yourself or write them all yourself. So really great work there and appreciate for all of these things, the great feedback that drives it from from out there in the community.

A

So now it is time to get started with the demos so Ralph. If you are ready to go.

C

Hold on making one more sacrifice to the skate gods here- and here goes here- goes nothing let's share and people will be able to see what you got hey. Why not stand by, and hopefully you see my screen yeah everyone's in everyone can hear me. I'm looks like I'm in good shape.

C

My second prizes have been apparently accepted, so so folks, really what this is is just a little bit 10 minute that version into these favorite extensions that I tend to see and I like to use myself for not just SP development, but really for a lot of development using a vs code. If you guys are like here a long time, those guys were really immersed specially our folks in engineering right they're, using this tool.

C

A lot I came from the world where was old-style, visual studio, so we were so used to everything being provided for us all those great stuff. Every time we added something it was pretty much direct or Microsoft forced the download on us whatever it was, it was out there so sometimes littlest things that you take for granted. Is you won't find necessarily over here?

C

So a lot of this sounds things I had to learn, but when I got into it, because I saw vias code when it came out, I'm like okay, that's very cute, but then, when the SP effects, when the framework came out with it, I was like yes now we have a real reason to use it and I started enjoying it and pretty much now, I preferred Believe, It or Not over regular visual studio, so that being what that is what makes it happen.

C

A lot of the cases are the extensions and I'm just going to start off with just a few mini mini little extensions that we have over here. What are extensions, basically not the same as extensions in SharePoint framework extensions are those little add-ins that they put in. Essentially, here we go as they. The extensions are those little things that you put in to make it do whatever it is.

C

You want to do you can create them yourself and we'll talk about that, maybe at the Irate at the end of my little session over here, let me put on my little timer and so I'll keep my time within.

C

What's in here we go, and here we go and the little timer just keeps things within that within time. We should be okay, all right. So let's take a look so with the first one I'm going to talk about this little this little one over here, let's see about the ones that are enabled I got some ones enabled and disabled to scho. Looked my disabled ones over here, the auto close to the and the auto rename over here. This is this is a simple one. So let me enable this guy over here.

C

By the way you go to extensions, to be able to enable it or you can just find them by just typing them up in the marketplace. Just like I can type in PNP and it'll. Show me all the PNP. If there are any PNP extensions, I think it's SP effects would be the extension to look for. That's just an example of how to find him real, quick, all right, so I enabled that a tag I reload it okay sure enough. It's reloaded in no time flat. So what is this one over here?

C

This one is the the Auto close tag. We need something we take for granted. Normally, if I like type in h1 and close it out great, it closes believe it or not. Without that extension, you have to manually have to set it up with Visual Studio. It seemed like it was automatic. Well, here's what's really cool about this I'm inside of a react. Little return render situation and it still works very nice okay.

C

So let's that's this very simple one: let's see the rename tag and I believe that one is enabled already so let's go ahead and just rename it to two there. We go changes it to a two that sometimes these are very trite, but this could make a big difference when you're trying to work- and you have very very large pieces of code that you're working on and you're getting through it. Alright, what's another one over here, ah the bracket, colorizer I, believe that one is still on.

C

In fact, you can see it on right now: bracket colorizer, you don't normally see this but notice as I go down through two levels and you'll see how, for example, that's blue, that's gray, if I added, for example, an if statement in here would do exactly the same thing. This is one of my biggest pet peeves, just about anywhere when I'm trying to find where the heck is the end of that.

C

If statement where the heck is that end of that tag, very simple stuff take for granted, if you're not doing it, obviously you're more mighty than I am alright. Let's take a look at what's another one over here. umm Let's look at some some type, some code snippets over here, so the concept of the code snippets and this one is enabled over here the concept of the code snippet. So this gets over here to some files. So we can see this in action.

C

Let me go ahead and make a file. That's gonna call it. Where is my planet tsx?

C

Okay, so I just make a quick tsx file, so here's the concept of the code snippet, that's it the code snippets. You will type in like letters like this, for example like TS and hey by the way, there's one of these for for SharePoint framework, but I'll cover that a little bit later. So here's like just quickly for for I just want to make a full react piece brings in all the bits that I need right off. The bat don't have to type it very very fast.

C

They have these, of course, in Visual Studio, and you can have these very quickly to use over here. But that's that's pretty much. What this does very, very simple other little things that are out here. Let's go back to our pieces of code over here. What do I have enabled what they don't have enabled good old es. Lint is still enabled. Let me just show you what this, what es lint?

C

Well, any lint thing you guys if you guys understand the concept of linting, it's basically to set your standards and and all these pieces there is, of course, an es lint and there's a TS lit for typescript in general. So let's go over here and look at our disabled list. I believe my TS lint is probably turned off at this point. Come on up here, where are you did I put it over here, died that I put it in I. Think I. Have it right down at the bottom there it is there's TS lint.

C

Let me enable it alright, so the concept of course is linking, but for for tight strip, all right es is just the regular ACMA strip stuff aware de TS length, of course, is probably something that not probably it is the thing that you will be using for more more likely than than the other side over here. All right, let's see, what's another one, to look at we're going as quickly as we can through these. ah So here's one that you probably don't see too often.

C

Let me go into our disabled ones, let's see if I have it up here here we go. Let me show you first what these files look like over here. So you see over here what you got over here: the concept of material icon, we're sort of like we're getting into that material, icon kind of material design, kind of thing. So it's like well, why not have a weight of looking at these things much better. So let's go look at that particular one. Let me enable it, sir. Here we go reload look at file real, quick.

C

All right so take a look see. What just happened over here see these nice little colors over here. Let me ctrl+, so you can see them a little bit. Better got a little, much more easy to define places for things, so we have like in there we guess it's, the SX, a typescript module, just a visual way of working with things that are just a little bit cleaner.

C

All right, let's see what's going on over here as make sure I, don't miss anything. Oh yes, of course, there's you know we have the the PS and es lint roll for a NPM packaging. In fact, there is the four intellisense as well.

C

Intellisense is not believe it or not out of the box for every single thing you actually have to bring him in, so we have, for example, just for your path. You can enable your path. Let me enable that and for NPM itself to enable these pieces just it gives you an example. Here's what I like about these extensions! They give you like a little literally live example for a lot of these cases, how they work, where you type something in and this it pretty much understands what's happening again.

C

These are, if you don't have these running on your system I, my suggestion is, go, get them enable them have fun with them all right. What's another one over here, I think woods, yep a little prettier, let's find prettier pretty pretty. Let's see enable do I have it still enabled, maybe uh no I don't see it enabled at the moments. Let's go find it.

C

D

C

Finding it over here so there's, there's different prettier that they have I, believe I had one that's really installed or did I, take it out, I might've, taking it out. So it's a code formatter.

C

This is the concept of prettier, basically code formatter, where you can go, collect command shift P and you format your document and you format your selection, here's the concept if you're like in projects like ours, where we're standards are important and you get code reviews where they tell you, hey, you're, off your format, your code, it's not looking right nice to have these tools ready to go.

C

They seem to be like out of the box for a lot of things, but again another piece to have in there another little piece that I have over here: good old typescript here. Oh, let me show you that one. Let me take pretty here out of the list: let's go look down over here and typescript hero, so the concept of, if you like to buy me, beer I liked it, but this guy his his payment, is, if you'd like to buy me a beer. Yes, okay, just remember that.

C

Next time we're we're out there all right, basically sorting and organizing imports, you're coding, your outline view and I'm no need to really show this. Here's the concept over here. Sometimes things are not loading the way they are just literally in the position where you place those things, maybe not so much for the framework, because a lot of the framework stuff that we get a lot of that stuff is already done and prepared for you're ready to go.

C

But when you're trying to do something new trying to extend that comes into play, a lot more, let's see I believe I have a minute and that's about it. Actually, that is that is about the extensions for now.

C

Let me just show you some of the other ones that you have over here, that we can probably cover at another time or more specifically, some of these take a little bit longer to explain so we're not going to necessarily cover them, but these are the SPF X ones, for example, all right so on the FPS PX x, FX ones, some of the ones that I liked a lot I like, for example, the good ol, elio and and and our friend Waldeck, have made pretty much the ones that I'm always going to go, get well-walled, X, they're, now called rank or I think they were wold like before, but they're red core for sure, but elio.

C

My other buddy over here are all our friends. Basically, these are our friends for everything. Sometimes he'll do things like include some of these other plugins already like, for example, and PFF, see there's path and NPM and NPM ready to go. When you enable this sharepoint have framework essentials. Alright, ah it also enables its dependencies.

C

It tells you right off the bat so, like all of a sudden you'll see all these other things are being reloaded and all of a sudden, a whole bunch of things are brought in with you, so very, very cool the rancor ones, I think the most the most significant one that I've seen come out is the one for deploying and let's go back to SPF X again real quick, come on up.

C

Man is this: one did deploy package, yeah I could say this one's got, this one would take a while and then perhaps maybe, while that himself can download this one. Let's wait for the documentation to show up, but the concept is rather than do, for example, from the command line. You have like their deploy all SharePoint sites. Things like that.

C

These are the reasons for these now guess what you can you can and let's see, does it says shop I'm sharing my screen, yes, I'm sharing my screen, you can't make these yourself and sharing is caring. Is what we're all about right. So you can't extend visuals, see you code for self. There's instructions right here, code that visual studio, comm, slash, Doc's, lash extension, slash overview and how to do it and how to publish your own.

C

So if you come up with something you have an idea, I'm sure it will be most welcome to the community and we are glad to see more of these I can't I can't, let's just say, I can't have enough of what these are, and that is my little demo for today promoting the extensions and promoting the fact that we're using them awesome very.

A

C

A

C

Very quick stuff and yeah: this is the equivalent of the that that link that you get where the cat predictably jumps into the pain, but you oughta forward it, but it's still fun, and it still reminds you that Patrick Rodgers is still tweeting, that sort of stuff yeah.

A

Just super super valuable for all of us, so I think ya, know great stuff. Thanks Ralph, it's always neat to see those extensions, because I myself don't use a ton of them, mostly cuz I, don't know about them, so this is a great way for folks to get in there learn about them and get them installed, and hopefully, smooth everybody's development experience a little bit moving, although to Oleg, if you're ready to go.

D

Yes, I'll: try sharing my desktop and see how it goes from here.

D

Okay, tell me when you can see it.

A

Got loading on my side and got it okay.

D

Cool I'll start with a small PowerPoint presentation shouldn't take more than several minutes to make this, and here we go so I enjoy the benefits of the conveniences. For so long and you know, haven't been doing anything to.

D

No js' and Japan framework and all this news, jazz anyways was you know, try to do something useful.

D

Some kind of reusable open-source package, which I hope after this presentation, some of you might find it.

D

The main challenge which we are still facing in some sense is, you know all these community calls are great, because here we are discussing and presenting bleeding edge. You know latest and greatest. There are cool kids playing in the cool new sandbox and that's that's great.

D

And looking through the window in our homes, you know officer 65 and for one thing you know for one reason or another we can still be tied to the old or just even in the office 365. We are utilizing the classic SharePoint site collections for one reason or another, and we have this gorgeous looking. You know lists for experiences or books and not everywhere you and start developing asthma attacks and utilize that and bring bringing new new, exciting capabilities which comes with deployment.

D

If you remember back in the days, we used to have content editor web parts, and this demo will feature that as well. So I'll show you how we can go from here through the code generated by note project to something to something like that. It can be deployed side, be it on premise or 65, and your code will be able to transform any out of the bog list you might have which uses standard direction of sharepoint fields.

D

I try to cover all of them in my transformations, so whatever you might have, it should be able to.

D

D

Which has similar transformations.

D

And my transformations here would be in VF, so 50 components will be formfields package, which does all the heavy lifting there I'd find all the rendering. If you remember how.

D

It and all of them they have there are aware of, and they are able to submit data on, save and download. Everything will be handled for you guys.

D

Genetic form field component and in your.

D

Invoke it so we need to install.

D

D

When that's done, we can run it.

D

D

D

I am basing my this and record the cost of in this case. What happens now is will be called as part of this and.

D

This, where you want your files to be pushed a once, they are bundled in the solution. So.

D

One more thing he asks if we want to.

D

Buy things so here we just yes and it will do its thing, it will scaffold it. I cannot wait for the scaffolding sure and each on the other solution. First I wanted to show you a bit about the internals of the SPD act, formfields package, which has the base control and, for example, the easiest one would be the texture which will just inherit from it and if you have methods override the new edit form, if you have to.

D

Include some custom validations if the community is interested but anyways, two main components which.

D

And also one big one is list form which will be some kind of a whole things like a panel component inside of which we will instance our form field and field label, and that's done purely because if they are inside the list form, they will be able to react context of whatever was loaded whatever leased. An item. Data was loaded and list form.

D

Let me go to a scaffold if a solution and first.

D

All these ones are a part of an juice package and the main are built.

D

And push is the second one which will just push all of the all of your built into that folder, which we have specified a smart investor holding. There is a JSON file which holds all that information and one of them.

D

D

D

Replace list form and the story list form whenever you write you when you scaffold your solution and try to build, and if you ask you for the actual URL and for conventions, authentication.

D

We just want a small task which will ask us those questions.

D

Everything basically and you can for a few seconds. It's not the fastest in the world.

D

So, just just you know make it right here: slow.

B

These things do happen and we can always do some good jokes, yeah.

D

Okay, anyways I have that hopefully configured so I. Don't need to do that, but just.

D

Them you will be able to whatever you want, and unfortunately, I still need to run one more task, which is to replace this for me to show how it works and because currently on the first I have it disabled and if I click on the new item forum, it should just load them out of the box list forum, which you love.

D

Okay. So unfortunately we need to execute one ghost.

D

Wait forest fins, hopefully within the feminist,.

B

So what is that doing now in practice, replace lifts on, but what's happening under back behind of the scenes kind.

D

Of things right, it will compete information which we provided with the authentication method and URL. Oh, it's starting. Okay,.

D

It will prompt users to select a list.

D

You see a list of lists from that way and then the interaction starts. We will able to click on one of them and then the second question will be.

D

Which form we want to place so, if every one of those silly all in place in all of those three files, new foreign aid forms and what it does it hides, the initial form web part and injects the content, editor web parts and links it to one of the HTML files from here. So it's finished and let me just go here now: I'm, not sure about the caching and it might work it might not work, but in chrome it it should work if I open the f12 and disable the cache in here right.

D

So this is the forum. This is what you are getting without any development by just you know, installing the scaffolding solution building the axes as they aren't there uploading it and running the gulp task to replace a forum for for this right, and you can also have that develops and make that forum, as I said more more custom depending on your needs. But let me just show you how this works. If you can click Save here.

D

And well, it's we can go back to editing and we can close and go back. It will take us to the list we should see. So here we go and also I have another item here we can open just go from here into the Edit.

D

Different page, but the web part will be there. It will be context aware that it's in the edit mode, hopefully and wallah so, okay, just be sure you can drag and drop it. It will be a file. You can just save it after that. Hopefully, attachment will also be uploaded here, just click on it and display all right, and one last thing.

D

D

I'll show you just a part of our file which I prepared for you, where you can actually inject your own rendering logic, and there is a route des cités file provision there and it calls the render custom fields. Logic, which is here it is in terms now. It means that there will be no component, I should know. So there is no children. We can render the form.

D

But if you want, you can override it here and you can see that I don't have the tabs here.

D

D

You don't have to worry about saving because settings down inside that package.

D

B

You Patrick, it's double-checking the situation.

C

A

B

Now, yes, we can hear you all right.

A

Thank you. Those are two great demos. First from Ralph again on the vs code extension, some very good information there and then a very cool demo from all the laying about replacing the forms in classic sites, so really really great stuff, and please do stay nude. So no time today for the queue name, you actually got a couple minutes late, seemingly, as always appreciate everyone sticking with us. Our next meeting will be August 30th and the next general SharePoint dev will be on September 6. The notes- and they say I think this is correct.

A

We are skipping next week's general development, special interest group meetings.

B

A

You make a mistake on a site.

B

Either mistake on the slide so.

A

We will have the general share point of next.

B

Wait: I'm sorry on 23rd, yes, Absalom.

A

The 23rd of August, so I just wanted to take this opportunity to point out that ASA made a mistake on a slide or the recorded record and anyway. Thank you all very much have a great rest of your week have a great weekend. I look forward to talking to everybody soon, keep the great feedback, great involvement coming. We really appreciate all of you out there in the community and everything you do to make what we do fun and successful. Thank you have a great day.