Microsoft 365 Community Experts from the field, 10 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Unboxing the SharePoint Framework (SPFx) v1.17 Release: What You Need to Know

Description

In this video, I summarize what I found while picking apart the latest SharePoint Framework (SPFx) release v1.17. Hint: about 40% more than what Microsoft shared in the official release notes! 😱

🏆 CONTEST TIME! 🎉 Hidden away in this video, I share a little context I'm running to test your SPFx knowledge. The winner will be selected on April 17, 2023, & receive a free lifetime license to my "Building SharePoint Framework Web Parts & Property Panes" course!

🔗 Resources:
-------------------------------------------
🔗 Read the associated article - https://www.voitanos.io/blog/sharepoint-framework-v1-17-whats-in-latest-update-of-spfx
🔗 SPFx v1.17 🐞 PropertyPaneCheckbox missing aria-label for accessibility - https://github.com/SharePoint/sp-dev-docs/issues/8876
🔗 SPFx v1.17 🐞 Top Actions docs page doesn’t match published API - https://github.com/SharePoint/sp-dev-docs/issues/8877
🔗 Microsoft identity: Claims challenges, claims requests, and client capabilities https://learn.microsoft.com/azure/active-directory/develop/claims-challenge

📚 Chapters
-------------------------------------------
00:00 : Introduction
01:43 : SPFx Components - Web Parts
04:31 : SPFx Components - Adaptive Card Extensions
08:04 : SharePoint Framework API Changes - Azure AD
12:05 : SharePoint Framework API Changes - Microsoft Teams
14:58 : Tooling & Developer Experience Changes
16:29 : Core Project Dependencies
17:24 : ESLint Changes

🔖 My on-demand & free email courses
-------------------------------------------
📺 Mastering the SharePoint Framework
https://www.voitanos.io/course-master-sharepoint-framework
📺 Build Web Parts with the SharePoint Framework (SPFx)
https://www.voitanos.io/course-sharepoint-framework-web-parts
📺 Extend the SharePoint UX with the SharePoint Framework (SPFx) Extensions
https://www.voitanos.io/course-sharepoint-framework-extensions
📺 Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions
https://www.voitanos.io/course-sharepoint-framework-adaptive-card-extensions
✉️ Explore & evaluate the SharePoint Framework
https://www.voitanos.io/ecourse-explore-evaluate-spfx/
✉️ Understand the SharePoint Framework toolchain
https://www.voitanos.io/ecourse-understand-spfx-dev-toolchain/

🔗 Links
-------------------------------------------
Newsletter ✉️ https://www.voitanos.io/newsletter
Website ▶️ https://www.voitanos.io
Twiter ▶️ https://twitter.com/andrewconnell
LinkedIn ▶️ https://www.linkedin.com/in/andrewconnell
Facebook ▶️ https://www.facebook.com/voitanos
Instagram ▶️ https://www.instagram.com/voitanos_llc

A

Microsoft released an update to the sharepoint framework (spfx).

A

With version 1.17., this release includes approximately 20 changes,, such as features.

A

That are now generally available, api and sdk improvements,.

A

Dependency updates, and improvements to the developer, experience.

A

However,, just over half of these changes are listed in the official release, notes from microsoft.

A

But in my research I found an additional 40% of changes throughout this release!.

A

In this video, I'm going to cover all of these changes, so you can get complete details on the sharepoint framework, 1.17 release.

A

And to help you navigate the content,, I've included chapters that you can use.

A

To jump to specific topics which are linked below in the video.

A

As a bonus,, I'm giving away a license to my new course.

A

Building sharepoint framework, web parts and property panes to one lucky, viewer!.

A

Just like you! I'll explain how to enter later in the video, so be sure to watch till the very end.

A

Hey,, I'm andrew, and if you're new here, be sure to hit that subscribe, button,.

A

The notification bell to see when that published new videos.

A

For web and cloud developers on things like the sharepoint framework.

A

And also,, if you want insights and news in the microsoft, 365 and azure developer,.

A

Space delivered straight to your inbox, join the 10,000+ fellow web.

A

And cloud developers who've subscribed to my newsletter.

A

You can find the link in the description below the video.

A

All right,: let's get started., I'm going to break this video down into a couple main sections.

A

First, we'll examine some changes related to the different sharepoint.

A

Framework components that you can create.

A

next,, we'll take a look at the changes to the sharepoint framework.

A

Apis and sdk days. and then finally,, I'm going to go over go over a handful of changes.

A

To the developer, experience and changes to all projects, such as the generator.

A

And their dependencies., so let's get started with the changes to the components.

A

Specifically,, let's start with web parts., the sharepoint framework v1.17 release includes two features that are specific to web parts..

A

The property pane link control, that's available to developers in the property pane was missing. An accessibility property,, the aria-label property.

A

This property allows developers to describe an interactive element.

A

Which is useful to screen readers in an accessible scenario.

A

It seems that this was an oversight dating back to the early days of the sharepoint.

A

Framework,, as a lot of other controls already have this property.

A

However,, it appears that this property is also missing from the propertypanecheckbox control, as well.

A

Shouldn't that get the same property?, I think so. and if you agree, I've added an issue for that control in the sharepoint framework issue. List, so check the link in the description.

A

Or jump to the issue and give it a thumbs up reaction to increase the visibility of microsoft, so we can get that fixed in the next release.

A

now,. Microsoft introduced a new way to interact with web parts in the sharepoint framework, v1.16 release with topactions.

A

Although previously a developer preview,, these controls are now.

A

Generally available in this sharepoint framework, release.

A

Now the purpose of these controls is to provide an alternative to editing web parts from the property pane.

A

now,. In my opinion,, I've said this: before, top actions are probably.

A

The first step towards eventually completely replacing the property pane.

A

Now,, when you add a web part to a page- and you put it in edit mode, you're, going to see either a button or a drop down control that you can click.

A

And by handling the click event in the code,, you can execute any desired action that you want.

A

Now, unfortunately, creating top actions, is a little tough.

A

Because they don't seem to work in the sharepoint hosted workbench.

A

The only way I was able to see them work is when I packaged and deployed.

A

The project to my sharepoint site and added to a real sharepoint.

A

Page kind of the same way we have to do with extensions.

A

Now, when microsoft released this feature in the sharepoint framework, v1.17 release,, they included some of the docs that are...

A

Well... they're pretty sloppy.. They include code samples that simply won't compile because they reference things in the api that don't exist.

A

and furthermore,. Some of the aspects with how top actions work.

A

That kind of conflicts with the api documentation.

A

Now, I've submitted some issues to the spfx issue list to get some clarification on these things.

A

I've got all these issues linked to in the pinned comment below the video, and if microsoft.

A

Updates these things, I'll be sure to update that comment as well.

A

So keep an eye on that. if you're interested in learning more about topactions,. Let me know.

A

drop a comment. Below., I'm already planning to add a lesson about it to my web parts. Chapter.

A

That's in my “mastering, the sharepoint frameworks” course and in my “building web parts”, course,.

A

But I might even create a video for it and drop it here on my channel.

A

If you're interested., but I kind of get to get some feedback on how interested you are in those.

A

So again, drop a comment below. If you want to see a video on topactions.

A

Now. next up,: let's talk about adaptive card extensions..

A

We got a few updates here,, including one minor thing that I found in my research.

A

That was not included in the release notes.

A

now microsoft has upgraded the version of ...

A

the adaptive card schema that supported by aces to version 1.5.

A

And this is a significant update, as aces have only supported.

A

The v1.3 adaptive card schema up to now.

A

It's also overdue, as the v1.5 adaptive card schema.

A

Was released in october of 2021,, which is about a year and a half ago.

A

So, what's new in this update that wasn't available, before?.

A

Well,, the v1.4 schema added support for a refresh and authentication property.

A

That defines how a card can be refreshed by making a request to a target abort.

A

And to enable and on-behalf-on-behalf of sign on or.

A

Just-In-Time us authentication for off.

A

Now,, the v1.5 schema includes several improvements to adaptive cards,.

A

Such as the support for right to left rendering of the container.

A

And column types, the ability to mask the test text, input, control.

A

For scenarios like passwords, support for overflow for an action set.

A

When you want to show more actions,, then the rendering is going to support support.

A

For a tooltip on actions to give the user a hint on what the action does.

A

Update the input choice to support a static list of choices,.

A

Updating actions to support disabling a button, and the ability to render tables of data,.

A

Which might be the biggest improvement? Yet if you ask me.

A

Refer to the adaptivecards.io website for detailed information on all of these features.

A

Now all card implementations contain an on action handler.

A

That you can use to handle actions submitted on adaptive cards used in the.

A

Two different views available on aces now in this release is going to add a new.

A

Before action handler that's raised before the action is actually executed.

A

Now,, you can't change the flow of the action,, but you can do some things like add extra logging or telemetry to your solution.

A

That's going to go on that hub class that you have for your adaptive card, extension.

A

now,. This release also includes an accessibility improvement for the ace quickview,.

A

A new property called `focusparameters` has been added to the quickview class,.

A

And that's going to enable us to set the focus on a specific control in the adaptive card.

A

Now, by default,, the first control in the card has focus,, but I can now change that.

A

Using this property to do this,, I'm going to override the focus parameters,.

A

Access or method, and I'm going to return an object of type ifocusparameters.

A

And this interface contains two properties..

A

The first is a required property called focustarget that returns.

A

The id of the element in the adaptive card.

A

That should have focus and an optional property called aria-;ive.

A

That has three options that you can set for screen readers..

A

This can be set to ‘polite’,, which is used by the screen reader when the user is idle; ‘assertive’,, which is going to disrupt any announcement.

A

In favor of this property; or ‘off’,, which tells the screen reader not to read.

A

A

now, at the time of the release, this feature is not supported in viva connections. Mobile, app, experiences.

A

It's only supported in the desktop and the web browser experience is for viva connections.

A

Now another noteworthy change that was not included in the release notes is the default ace project, icon.

A

The sharepoint logo was previously used as the initial icon for the control.

A

In the yeoman generator,, but in the sharepoint framework, v1.17 release,, the sharepoint logo, svg file.

A

That was removed from the default project and it was replaced with a reference.

A

To the hosted viva connections, logo that microsoft hosts in their online resources.

A

Now that we've reviewed the changes for the different sharepoint framework component types,, let's take a minute and let's look at some of the api.

A

And sdk changes as part of this sharepoint framework release.

A

Now,, this new capability was added in the sharepoint framework, v1.17 and frankly,. It's not something that most people are going to encounter.

A

If you don't understand what I'm talking about,, you likely are going to need it.

A

But there may be one scenario where you'll think, “oh yeah, this one blocks.

A

That one problem that we've got!” this is for you..

A

Let's first understand the scenario that this feature: addresses.

A

When you request an access token from an off provider like azure ad.

A

For a resource,, the owner of that resource may have configured it.

A

So that you must include specific claims when you request the token.

A

For example,, the endpoint may require the user this requesting the token to.

A

Perform two-factor-authentication or not satisfy some conditional access. Policy.

A

If you request an access token. without that claim,, the resource and an azure ad will respond with a claim challenge.

A

That indicates that the access token you sent has insufficient claims.

A

So, to get past this, you need to include a claim. In the token request.

A

But until the sharepoint framework v1.17, the.

A

The api,, specifically the aadtokenprovider api,.

A

I didn't give us a way to do this,, but now we have the method on that object.

A

The aadtokenprovider has a method called get token.

A

That's only available in the sharepoint vramework v1.17 and it supports.

A

An option object as a second parameter,, and we can use this to preempt.

A

The claim challenge with a claim parameter: that's going to be expected.

A

So in this example, I'm including a claim parameter that satisfies a conditional access policy, requirement.

A

You can learn more about claim, challenges, requests and the client capabilities from the azure ad docs.

A

I've included a link to this in the description of this video below.

A

Now, the other improvement in the aid token provider object in the sharepoint framework. Api is support for the popup flow.

A

Again, just like last time,, let's first understand the scenario that this feature is addressing.

A

Let's say that you've created a sharepoint framework web part and it needs access and access token to call some api.

A

Normally things work just fine. you're already signed into azure ad in order to access your point, online,.

A

So the sharepoint framework can just leverage the authentication cookie in your request to validate your identity.

A

However, in our newish security minded world browsers now, support blocking.

A

Third party cookies that were commonly used to track user actions.

A

Across sites by these different ad platforms.

A

and unfortunately, this affects authentication scenarios that use that same technology.

A

So when a token is requested in azure,, it doesn't know who you are.

A

It has to prompt you to authenticate.. Usually this can be handled with a redirection prompting you to sign in again,, but that doesn't always work.

A

For example,, if your sharepoint framework web part is used to implement a microsoft teams,.

A

Tab and is rendered within an <iframe>,. The redirection won't work.

A

Because azure ad won't allow its sign in page to be hosted.

A

Within an <iframe> to protect against clickjacking.

A

or if you're, using the web in sharepoint online..

A

And if a user is using safari with the intelligent tracking.

A

Protection (itp),, if that features enabled,, it blocks third party cookies.

A

So when your web port requests an access token,, the only thing that sharepoint.

A

Online can do is force a full page refresh,, which isn't a great experience.

A

Now, until the sharepoint framework v1.17,, the aadtokenprovider.

A

Api didn't support a pop up experience,, but now it does.

A

To take advantage of this,, you need to set the argument.

A

`Isenabledappauthpopupenabled` property is available to us on our tenant.

A

We have to set that to true. we're going to do that using the sharepoint online powershell,.

A

Using the set-spotenant, powershell cmdlet.

A

But now once I set that,, I can then implement an event handler.

A

On the popup event., that's an event: that's on the aadtokenprovider.

A

Now I can then use that to initiate the pop up experience, because most pop ups.

A

Are going to be automatically blocked by browsers unless it's initiated by a user gesture.

A

Now, let's discuss some of the sharepoint framework api changes that are related to microsoft, teams.

A

The first update is an update to the microsoft teams, javascript sdk, before sharepoint framework v1.17,.

A

We were using the teams- javascript sdk v2.4.1,,.

A

But with this release we bump it up to v2.9.1.

A

Now this is going to add support for that live share api, that a lot of people are interested in.

A

Also,, the “sync to teams” feature in sharepoint online’s, tenant, app catalog.

A

That can take advantage of a sharepoint framework solution that contains.

A

Components that can be used in microsoft teams and automatically create.

A

And deploy the microsoft teams app package automatically for developers.

A

Now, prior to the sharepoint framework, v1.17,, the app.

A

Manifest that “sync to teams” used was based on version v1.8.

A

And what that meant is that if you wanted to use a feature in microsoft, teams.

A

That was implemented with your sharepoint framework components,.

A

Something like a meeting app, you had to manually, create the ms teams app manifest and package it up.

A

Rather than rely on the “sync to teams” capability that we have in the tenant app catalog.

A

But in the in coordination with the sharepoint framework, v1.17.

A

Release, the “sync to teams” feature now uses the latest.

A

Microsoft teams app manifest version v1.16.

A

You don't have to do anything to take advantage of this., it's actually not even part of the sharepoint framework released,, but rather this change was to a feature in sharepoint online.

A

That was just timed to happen alongside the sharepoint framework, v1.17 release.

A

Now this next feature is quite an edge case..

A

Now, when you're using the sharepoint framework web part as a ms teams, tab,.

A

If your web part displays a sharepoint page,, you need to configure the web part.

A

To force it's rendering within an <iframe>, instead of rendering it within a development.

A

Like it normally does. so to do this, there's now a property called supportselfframinginteams.

A

On the web parts manifest.

A

now, let's try something new and run a little contest., I'm going to give away a lifetime access to my new course on building sharepoint.

A

Framework web parts,, “building, sharepoint framework, web parts and property panes”.

A

That contains 39 lessons and is over 5 hours, long.

A

And you'll continue to get the updates that I add to it over time.

A

So how do you enter let's test your sharepoint framework, knowledge!.

A

Can you name a feature that's still in beta.

A

Or developer preview, as of the v1.17 release?.

A

If you can drop a comment below and make sure you.

A

Put the word contest in your comment, so I can easily find it.

A

Now I've identified a handful of sharepoint framework features that are still currently in beta or developer. Preview.

A

Roughly a week after publishing this video, on monday, april, the 17th,.

A

I'll look at all the correct answers and pick someone at random.

A

And I'll get back to you by replying to your comment.

A

bonus points. Go to those who list the name of the feature that's been in beta or developer preview. The longest.

A

Okay, now, let's get back to the sharepoint framework release.

A

And the sharepoint framework v1.17 release includes a few changes to the tooling and the developer. Experience.

A

The first one is a nice productivity, improvement.

A

previously,. When you create a new sharepoint framework. Project, you needed to manually, update the served out json file and the project's config folder.

A

To the domain, where your sharepoint online hosted a workbench.

A

Was that you wanted to test your component against.

A

That was a pain,, because you had to do that every single time and on every single project.

A

however,. Now that string that we used to have the one with enter your sharepoint.

A

Site in the url that's been updated to include a string “{tenantdomain}”.

A

Now, when you run the “gulp serve” task,, it's going to look for an environment.

A

Variable called spfx_serve_tenant_domain has been set on your workstation.

A

Use that to replace the “{tenantdomain}” string.

A

Now any your project, you run,, even one, that's created by a colleague or one.

A

You pull off, github, is going to use your preferred, hosted workbench without any extra effort.

A

That's awesome! so much nicer now..

A

I noticed a small change that was not included in the release, notes, previously.

A

When you created a new project,, it generally would say “welcome to sharepoint online., let's create a new sharepoint solution.”, but now as part of the shift two.

A

From sharepoint to microsoft, 365,, it now says “welcome to the microsoft 365.

A

Let's create a new microsoft, 365 solution”.

A

However,, when your project is done, creating the last confirmation message,.

A

It still shows the sharepoint logo and ascii art indicating that.

A

They kind of forgot to change that to the microsoft 365 logo.

A

Now, lastly,, let's cover the core project dependencies that were updated.

A

There's nothing you need to do here. all of your new projects automatically receive all of these changes.

A

When you create a brand new project,, you will have to do this if you upgrade a project. Up.

A

now note that none of these dependencies are listed in the release, notes.

A

At the time of this, video was published,. The office ui fabric package.

A

That's part of fluent ui, that's been updated to version 7.204.0.

A

That's the latest version. As of the release of this sharepoint framework v1.17., this was just a small bump from the previous version of v7.202.0.

A

That was found in the previous version., the sharepoint framework v1.6.1., also the rush-stack-compiler that is used by the build engine.

A

To decouple the sharepoint framework from the version of typescript, that's used.

A

That's been updated to v0.4.0,, that's up from v0.2.2.

A

And finally, the version of webpack that's used to create these bundles.

A

That's been updated to use v5.77.0.

A

Now, there's two changes to eslint, and they were not included in the release.

A

Notes., one of them is explicitly setting the version of eslint that's used by the sharepoint framework projects in the project's.

A

`Devdependencies` section of this package.json file.

A

Previously,, the sharepoint framework assumed or relied on the fact.

A

That underlying dependencies were including eslint,.

A

But that meant that the sharepoint framework was not controlling the version that was used and then something else was controlling it.

A

for example,. In the previous version of the sharepoint framework, like v1.6.1,.

A

Your project was using eslint v8.30.0,, which came from.

A

Some underlying dependency,, but now it explicitly is set to v8.7.0.

A

Now I wonder what caused them to do? That. someone must have run into something., oh well,. It really doesn't matter at this point.. This is a better way of doing it. Anyway.

A

you want to set your dependencies that you rely on to specific versions.

A

You don't always assume somebody else is doing. now,. Another change that I notice was a rule that was changed in the default .eslintrc.js file. That's added to your projects, previously.

A

The rule “@typescript-eslint/no-parameter-properties” that was set, but apparently that rule.

A

Is deprecated in favor of one that doesn't have the no in it.

A

It's now called “@typescript-eslint/parameter-properties”.

A

That was deprecated by the typescript or the eslint team recently.

A

So the sharepoint framework team, they just updated it- to use the correct term.

A

For how I think we're done now., it's everything that I found in the v1.17 release,, at least for now.

A

We hope we don't have any kind of breaking changes coming out. Soon., there's quite a few changes,. Don't you think?

A

to recap, well, microsoft included about 11 of these 20 things.

A

That I just ran through and their release notes, the other ones,. They came from me.

A

Picking through the code base and the release, notes, too,, to show you everything that changed., what do you think about the updates that I've covered in this sharepoint framework release??

A

Do you see them as a positive move, or are you disappointed by how.

A

Small of a bump, it was?, are you interested in seeing how I go through and do these this deep research and figure out what the differences between each one.

A

Do you find value in this kind of in-depth review beyond what you get from the release? Notes?.

A

It takes a lot of work for me to do this,, so I want to make sure that it's worthwhile for me to keep making these videos..

A

So please, let me know if you're appreciated,, if it actually helps you by leaving a comment below the video and make sure you like it as well.

A

And if you like this video,, please give me a thumbs up and subscribe.

A

To my channel by smashing that red subscribe button below the video.

A

So you'll see when I published more videos for web and cloud developers on microsoft, 365, microsoft, azure,, including topics like this on the sharepoint framework.

A

And lastly,, if you want the latest news and insights, delivered straight to your email, inbox,.

A

Join the 10,000+ fellow web and cloud developers who subscribe.

A

To my newsletter, that's linked in the description of the video below.

A

I'm andrew connell (@andrewconnell). thanks for watching and I hope to see you next time.