Microsoft 365 Community Community Demos, 15 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Solve Teams and SharePoint Theme problems with "Enhanced Theme Provider" control for SPFx solutions

Description

In this 10-minute developer-focused demo, Fabio Franzini knowledgeably introduces viewers to the “Enhanced Theme Provider” control, what problem it solves (lack of support for Teams high contrast theme and basic styles), how it’s implemented, and how to use it in SPFx. Extends functionality of the Fluent UI ThemeProvider control by adding some logic and considered as a sort-of wrapper for all react and non-react controls that you want to add to the web part. Control available in next version of PnP React controls. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.

Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio

Supporting materials
• Documentation - SharePoint Framework v1.15 preview release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.15
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• Control - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

I want to talk about the enhanced team provider. It's a new console will be available in the next version of the pmp react controls so the agenda. It's we talk about the problem to solve the usage scenario and just the introduction of this control and how to use inside the spfx components, and then I'll show you just a simple demo.

A

So this control want to solve some problem related on the style problem when you use the fluent ui control or the basic html inside on a web part, and you deploy this web part inside teams or in a isolated web part. There are some problems. For example, we have problem regarding the font or basic html element are not styled very well or inside teams.

A

When you try to change the theme applied to the to the client, most problem is with the eye contrast team. All the fluent ui react, control supported by the sharepoint frame of the version. 7 are not showing very well so with this control. I want to to resolve try to resolve this. This problem, so the usage scenario inside teams- it's you are able to create a web part and deploy as a on a tab inside a channel or on a personal app.

A

When you try to deploy just the the simple web part, you are able to to see that there are some problems with the the text style, the basic text style and another uh use of the scenario. It's the isolated web part.

A

I don't know if you use there is a little part, but if you try to use the isolated part as a single part of page so on a web part hosted inside on a sharepoint page as a full web part, it's very cool because you are able to define your web part with a lot of permission, but the permissions are limited just to this web part and not to all the sharepoint application, and when you try to to do the same, you have the same problem inside teams.

A

So there are problems with the font and the basic html element with this control. I'm trying to solve this problem this control, it's considered just a wrapper for all react and non-react control, basic html element and this control extend the functionality of the fluent ui team provider control by adding some logics. Basically, I have the same properties of the team provider control, but I added just a new property, the context and by passing the web part context.

A

I implemented some logic to, for example, if the web part that uses this control, it's hosted inside sharepoint, we can use the team property or the default. The full team of the current site to apply the color set the theme, but if the web part itself and inside teams, we can use the context property. It's automatically implemented inside this control to check which team it's currently applied to teams and intercept the team variation.

A

If you try to change the team in the client- and we apply a custom implementation very similar to the default team teams to resolve the problem that we have with the default teams, so another cool property that it's hinted from the team provider control, it's the apply to property.

A

You are able to set element body or known if you set element, the all the theme are applied to the child of this control, but if you set to body the styles are applied to hold the page, and this is very cool to resolve the problem for the styles, for example, of the text, how to use this control, it's very simple: you have to install the pnp react control library at this moment. If you want to try, you are able to use the dev branch and you have just to put inside your react component.

A

This enhances the team provider, select the apply to property as a body element.

A

It depends the the usage that you want to use and you have to pass because it's a mandatory property, the context of the web part- and that's all in this way you are able to put all controls as a child html and the fluent ui components will be rendered with a great ui. But if you want to access the theme generated by the enhanced team provider, you are the possibility to use the use team hook if you created on a function component or the themecontext.consumer control.

A

If you are created on a class component in the same case, you are able to use inside the handstand provider and then uh your have the ability to take the theme and apply to your own custom component or read value from colors or something like that in which way this control it's implemented.

A

This is an a portion of the code. It's simple, but by using the context we are able to understand if the controller is hosted inside an attempt or not, and in case uh it's hosted inside teams, we are able to understand what is the team applied and in this case we are able to take the uh the implementation of the fluent ui team for the specific team of teams, for example.

A

This is the implementation of the palette, of course, of the default team, but I already implemented the dark, the height contrast theme and then, when we are retrieved all the information to uh to apply the correct theme. Internally, we use the team provider to apply this. This theme.

A

Okay, let's show you the demo- and this is the just a sample web part as deployed as a personal application, and this will part it's not using the enantity provider. So this is the problem. The font are not applied correctly and if you try to change the theme, you are able to see that the font it's not applied with the the correct color, the the component are not really the correct theme.

A

If you try to reload the tab now, the color is almost okay, but we have some problems with this kind of palette and then all the the controls are not rendered very well. So if you try to use the plain team provider, it's worked, I think better than the previous implementation. But if you try to change again to the different theme, you have to reload the tab.

A

Now the text, it's uh it's, it's correct with the correct font and the correct color, but we have the same problem of the palette applied to the default front, ui controls.

A

So with this enhanced the inprovider, we are able to resolve all these problem, so you are able to see that the font is the correct and all the controls are rendered very well. So if you try to change now the colors we are able to apply automatically the theme.

A

If you try to change again to the height contrast, you are able to see that the font is okay and almost all the controls are implemented with the correct colors. There are no problem now with the weight, color and and so on, and the same if you go back to the isolated web part. So this is an isolated part, hosted on a full page up part and we have the same the same problem. So the text- it's not formatted very well and the end stop.

A

So if we try to use a web part that implemented this control, you're able to see that now, the um the the font are implemented at the correct style of the all sharepoint pages and the same for the colors. So if you try to change the colors.

A

Black one more.

A

Okay, so go back to the slides.

A

It is my contact so and send me an email, twitter, linkedin or follow me on github, and this is some references regarding how to use the web part as a team, stub or personal hub.

A

Take a look at the isolated web part because our very cool way to create a sharepoint app up page and then the reference to the original reacting provider. If you want to use directly without the incentive provider. So thank you and back to you, patrick.

B

Great thanks fabio great stuff. There uh hopefully that'll help folks out getting things themed correctly and making stuff look great.