Microsoft 365 Community SharePoint, 22 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework v1.12.1 new features

Description

In this 13-minute Developer-focused demo, Vesa Juvonen outlines v1.12.1 updates to SPFx that include support for Node v14, Gulp 4, Microsoft Teams SDK v1.8 and for creating Microsoft Teams meeting apps. Demos – 1) Increased access to page structure and context to avoid DOM dependency (web part detects DOM structure and selects output size to fit allotted space) and 2) SPFx support for Complex Microsoft Teams solutions (manifest included in Package to synchronize with Teams App catalog). This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on April 22, 2021.

Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Framework - v1.12.1 public preview \ npm install –g @microsoft/generator-sharepoint@next

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 talk about the sharepoint framework, 112.1 uh I'll, do two quick demos uh related on that one. We'll certainly have more demos, as we ga 112.1, but I'll show some information on it, which probably haven't seen yet so. First of all, I do want to always show the overall bigger picture, as our sharepoint framework is really intended right. Now, uh it's it's extending.

A

So it's intended to be extra, the extensibility platform for microsoft, viva, microsoft, teams and sharepoint and, of course, it's most likely being used in a sharepoint, but it's actually highly convenient for microsoft teams as well and and viva as we're surfacing sharepoint inside of the microsoft teams.

A

The really the power is is the fact that you don't need to set up the azure applications. Everything is all the hosted and optimized for hosting, especially if you only have a ux capabilities or you're hitting craft apis. So it's a really convenient scenario. Right now we are hitting tens of millions of monthly active users who are using sharepoint framework, third-party sharepoint framework components in microsoft, teams and sharepoint.

A

So it's a really really widely adapted and being used and then submitting third-party components, miss components being built by customers or partners, so not first party components which are provided by microsoft, and while we keep on pushing on this one because well we're clearly seeing with the success and we're also saying that there's a huge opportunity for using sharepoint framework inside of the microsoft teams, so as part of the 1.12.1 teams is one of the key focus areas as well.

A

I will show one simple packaging demo around that one as within the following: slides as well, but really the power of spfx within the teams is that you don't need to set up that dasher application. You don't need to worry about app app registrations, permissions scopes. Any of that one! Everything is basically automatically taken care of, so you can just synchronize the solution to microsoft, teams, app catalog and voila.

A

It works because it's all the hosted by sharepoint- and this is a model which we used also quite heavily and within side of microsoft, so sharepoint being kind of a transforming to be not only the backend on the for microsoft teams, but also the content and backend for microsoft teams so kind of a hosting mechanisms, in this case, so really really cool stuff and there's a lot of new scenarios which are coming related on viva connections.

A

So whatever has been released right now with vivo connections, just just a scratch uh on on on all of the things which are in the pipeline. So I can't share too much on that one. But within few weeks, there's microsoft build and jeff deeper is going to show some of those stuff which are in the plan now on the 112 one release details.

A

So we are updating the note version to 14, which is super important, so we are finally catching up on the latest lts version of note: uh we'll have more access on the base structure and context to avoid dome dependence. I'll show this one in practice: it's not a mind-blowing thing, but you'll get access on something which out-of-the-box webparts are using to understand.

A

Are they being rendered as a full white or in a section or in smallest pieces, which is important for web parts for sure the support for the complex microsoft team solution, I'm going to show a demo a quick demo on that one as well. So how does it actually work in practice?

A

But this is really for the fact that if you as an example, want to build a microsoft team's meeting application, which is now possible with 121 with sharepoint framework, you will need to set additional settings in the microsoft teams manifest so that the microsoft teams will understand that. Oh, this component is intended to be used as a microsoft teams, meeting application and in those scenarios you'll simply embed the zip file or the manifest file or the microsoft teams.

A

Solution, structure or the microsoft theme solution manifest file inside of the sbp kj4 and I'll show that one in practice how it's actually being created and packaged and how sharepoint handles that? That's for synchronizing things, so technical nuances, uh initial support from the team's meeting application, there's, unfortunately, small delays on the microsoft team side on the on getting some of the server-side changes out, so we're still bending on some some areas on there, and there was a good demo on that one.

A

However, two weeks ago and the recording is already available by none deep uh who showed how to do sharepoint framework driven microsoft themes applications. So I'm not gonna show that today, uh right now we're gonna support microsoft teams, sdk 1.8 1.9, is in the roadmap, so it's going to be supported in 1.13 of sharepoint framework, but not yet again. Technical dependencies here and there, which are delaying things and something which is new on this list, is also the list and library subscription general availability.

A

So previously, are you able to associate your web part to be, uh let's say, subscribed to events from document libraries and sharepoint sites, but now you can actually do that for lists as well, so you're, basically able to say whenever a new item is added on the list or a library or whenever there's a property change or an item. Modification in a list your web part will get notified so you're, basically then able to refresh the webpart ux automatically when there's new items being added on the list.

A

So as an example just a random scenario, you have like something like power, automate pumping in your business data from azure or in a safe way to a list, just the relevant data, just just that data which you're going to expose, and then you have a sharepoint framework webpart, which is exposing some business related data. It's a really cool scenario as well, and then there's a lot of small improvements.

A

Whatever was reported in 112 or those are going to be fixed and then, as an example in the the new yorm generator we're going to show the version number of the spfx, which are running a simple thing, but as an example, chris kent has been requesting that feature for a long long long time. So that's now actually there. So that's chris, at least this for you all right now, let's actually do a few demos on this.

A

Like I said, we don't have a massive amount of time, but I'll show the the two scenarios uh in a more detailed way, so more access on the base, structure and context about dome dependency, now not a rocket science thing, um but what it actually means uh is that, let me actually add here is really a simple web part, just focusing on the scenario and and technical thing. What we're doing here and the web part name is something like white tester.

A

There we go and basic idea is here, is that your web part will know what is the white, where it's being rendered so we'll expose the new property for in the web part base class, which will actually expose the wide of the web part spacing, and what it means is that whenever I'm changing, for example, let's actually do that whenever I'm changing the section to be smaller and the white is being adjusted and, and the web part will know and will be notified that hey now you're being rendered in a smaller space.

A

If you have a different rendering output, when you are in less than 400 pixels, you can take advantage of that. Previously, this kind of a functionality required that you are detecting the dom structured and then analyzing. Am I in a what kind of a section how many columns there is in the section, and then you adjust your rendering. So as an example, the out of the box, hero, webpart and the newest web parts are using this to change their rendering logics logistics from being multiple.

A

uh Well, I think the smallest one is that every single image is being rendered one by one and then being transferred one step at a time.

A

So it's a good example of an out-of-the-box web part which is actually taking advantage of this and how this actually works uh again, simple thing, but I think it's a good ad add-on and it's just fair that you will get access on the same things as what out of the box web parts have, and this is really nothing more than uh let me actually get rid of- that uh there is a new white property uh which is in the base class of the of the web board, which will give you uh the white in pixels, and then you are basically able also to subscribe on after after resize event, and this is basically for catching the resizing happening on a page so that you're able to re-render uh whatever you're, rendering and changing the rendering logic.

A

In this case. This is a super super simple example. Just focusing on the chains in here, but good to see. Joel rodriguez is already super excited on the on this one, but absolutely a useful thing and, like I said, autobox web parts has been taking advantage of this one as well, so it could be available for you as well. Now. The second thing is that we're going to change slightly uh the packaging structure and packaging model within the sharepoint framework solution.

A

This is not going to break, obviously anything which is already there, but this is an additional option, and what we're going to do is that by default sharepoint framework, when you sync your solution to the teams by default, what happens is the sharepoint framework basically reads the config packet solution? Information is going to use this information, for example in the developer section it's for the name and website url privacy, url in terms of use and npm id and few additional settings.

A

But if we have a look on a really complex manifest- or this is not super complex manifest, but a manifest can be super complex, this can have a dependency on bots. It can define a task module. It can define multiple other things. There are additional settings and options all the time being introduced as part of this manifest so rather than us in sharepoint engineering trying to keep up with all of the latest things.

A

For example, what's in the supported and manifest version 1.9, we kind of start supporting embedding the whole zip file as part of the solution, and this will work in a way that, in the themes folder, you will need to have a specifically named the zip file and slightly awkward. But again it makes sense, because the internal code and server side is then just detecting that save file inside of this apk file. So what I have here is that I I'm actually going to show this one in practice.

A

Let's open it in here. uh So this is manually created, zip file which have been created by adding mic. My image, my manifest, which I created manually and the two of the images and then basically just created a zip file in here. Of course, you can use app studio in in teams or whatever tooling. You prefer to create the manifest file and then export that from there.

A

But then I need to have the z file named as themes spfx.zip and that's basically, then, a detection for sharepoint that oh this is that kind of a zip file which is intended to be the one which we're synchronizing the teams. So um so, when we are then packaging the solution, let me actually do that quickly. uh So here I want to do cop co-op package.

A

Solution, I think I actually have a one version package already, but that's fine sharepoint engine and the packaging tooling will actually detect that that c file and it will actually contain or add that one included in the package. So you can.

A

We can see that if we extend the sharepoint folder in here and the debug folder, which actually contains what's inside of this sppkj file in the client-side assets, we have the teams spfx app, zip file available, and then this means that whenever I'm actually installing the packets manifest solution inside of the app catalog and synchronize, we actually take that manifest, which is included in the spp kt file. And then we use that one yeah where's my pros and there we go.

A

We use that one then to actually uh synchronize or add and install that to the teams uh at catalog so and like in this case. I've just created an example which is just using the eisencrust as well back or for testing, but I'm able to modify all of this stuff directly in the json file or creating the whole manifest in the manifest into app studio and then synchronize that in so and that gives the flexibility it can have a dependency or whatever it can have a association to bots.

A

It can do additional other settings whatever to manifest is supporting. We support that as part of the spfx solutions as well and also including store deployment. So, if you're looking into getting a solution to the store that works as well, but now we're running out of time. So that's a really quick demo on two of those things. I just want to make sure that everybody understands what they are.