Microsoft 365 Community Community Demos, 23 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Apply a custom theme or a variation of the current SharePoint theme directly to the web part

Description

In this 11-minute developer-focused demo, Fabio Franzini shows 3 ways to change shading using the Fluent UI Theme variant inside a web part. 1) Use colors applied to the section where the web part is present, 2) Select color variations based on theme applied at Site level or 3) Apply variations set to the json of a custom theme, created through the Fluent UI Theme Designer tool. For all, change color variation from none, neutral, soft and strong. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 23, 2021.

Demo Presenter: Fabio Franzini | @franzinifabio

Supporting materials:
• Sample - React Fluent UI Theme Variant | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-theme-variant
• PnP SPFx Controls - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Tools - @fluentui/scheme-utilities – npm | https://www.npmjs.com/package/@fluentui/scheme-utilities

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

Welcome to this uh demo about uh another web part that I implemented to uh show you how to use the fruit ui team variant inside the web part. So let me share some information about me, I'm max of mbp in office, development and business application, and uh I work as senior consultant on max of 365 and power platform uh technologies. So you can find here some information if you want to contact me by email or twitter linkedin, okay.

A

So, let's start so in this slide, you can see two in two screenshots that come from the sharepoint lookbook and uh I market uh two were part, because uh when I uh take a look at the lookbook, I really impressed impressed on the possibility to highlight some content inside the web part. So for me, it's very important when I build some internet for my clients to highlight uh the content of the web parts, because some clients want to make more focus in some web art and less focus to another web.

A

And, of course, there are many ways you can use by writing your code on a background image, for example, or you can use the section background to change the background and then the web part inside this section uh on a different, for example, a background.

A

My web part, my demo, it's an exercise to how to use the fluent ui variation, not only inside the section page but inside the web part and this implementation it's implemented in three different ways. So in all these cases this example works very well with the different ui react control.

A

Of course, if you don't use the fluent ui react, controls of course, the variation it's applied on the background and some html element like text, or something like that, and of course you can use the team object to take all the property that the team have to take the background, color the accent color, the text color or something like that. So the first way it's uh the simple way take the current section direction. Color.

A

If I select inside this web part these settings inside the property pane, uh nothing appears so the background and the color come from the section, the section variation, but there are on a second way and then you can select the current sharepoint theme. If you select this uh value, you have another option, and now you are able to select the variation of the current share, pointing for example, known or neutral, or soft or strong.

A

It's the same variation that you you have for the section variation, but at this time the variation it's applied inside uh inside the web part, and you can see uh if I start strong. You see that background. It's uh it's green, it's the same accent color! I have inside the team applied to this site.

A

The third way it's the possibility to use a custom palette that comes from the fluent ui team. Designer later, I show you this tool, but basically you are able to uh define some colors and then generate on a json that contains the palette color for uh on a fruit, ui theme, so by select custom and then use these fruit. Ui custom palette, property, you're able to set the custom palette and then again you are able to change from known, neutral, soft and strong variation.

A

Of course don't worry about the the content of this web part because it's just some fluent ui components just to to to test this uh this barrier.

A

So if you don't know the fluent ui theme designer uh it's a free tool that you are able to use at the browser, you are able to select the primary color, the text color, the text color and the background color and then automatically this tool generate the the theme that you can export as a json or code or powershell. In this case, we need just the json file, so the json text and then copy and paste inside the property of of the web part.

A

So just a simple, a simple demo. This is a simple page that contains a section with two columns.

A

Of course, if I change the section background, you're able to see that the web part, so this is a simple text web part- and this is my my web part- this one part take the color of the of the section. But if you select the web part, you are able to change to the current sharepoint theme and then again we are able to change the variation just for visual part and the last way, the third way it's the custom.

A

You are able to copy and paste a custom theme and then change the variation just so the variation that come from this custom custom theme now the implementation, the implementation start, uh with the enable support for the team variants inside the web part manifest. You know that you have to put these supports in variants true inside the manifest to enable your web part to support the team variants.

A

The next thing is, you need to manage the team variant inside your web part. There are some code that you have to to implement. Basically, you need to take the team service and the team provider.

A

The third variable is the the team variant, the variation, the current variation for the web part, and then a good uh thing to do is to manage the theme change at the event, because uh later I show you that we need to re-render the web part, because in the render method, we calculate the variation for the team inside inside this web part.

A

The core of this example is the themeservice.ts it's a class and a typescript class that contain all the code that we need to generate the team with all the property that the visual part had, for example, uh the the type of the variation known, neutral, soft or strong, and, of course, the type of thing that we want to to use.

A

The current theme, the variation that comes from the section or the generate theme from the palette, the json file, then, in the render method we need to generate by using this generate team method of the team service class. We need to generate the current theme and then, when we have this object, we pass this team. It's a team variant to the react, control or the component that you want to to to use to render your web part. Of course, some uh information regarding the property pane.

A

So I used some pmp property control, like the property field code, editor to manage the uh the json part of the theme.

A

If you select the team type custom and for the selection of the background shading, I use the property pane choice group with a way to generate dynamically, an svg image as a background to highlight the different background for each variation, and then I use again another console from the pmp property control.

A

It's the property, paying field message to show, and uh just an info to the user, to remember if select the custom team type to use the team designer to generate the team, so just uh on a simple example of the code for manage the the property pay in a background sharing the first part, it's a meter that we have inside the the class of the web part the generating line svg for background shading type that I have on a type as a parameter and basically, we calculate based on the type we calculate the current theme and then generate an svg inline image.

A

And this is basically it's uh the image that you can see inside this slide, the the text a and the background and the foreground with different colors and then in the property pane configuration. I generate the inline svg for known, neutral, soft and strong variation and then use this text for the image source for each options in the property. Pane choice group.

A

The last thing is, you need to remember: to use the team provider control to automatically apply the theme to all the control that you use. So there is nested on the team provider inside your react control. It's very important because in this way, by passing our team variant property to the theme parameter of the team provider, the team provider automatically apply the theme, the current theme to all to all fluent ui component that you have inside your main controller.

A

When you use this uh team provider, okay, so uh somewhere some references, uh the first of the first one is the the part, the url. So it's the url of the repo when you are able to find this. uh This web part source code, the references to the pmp properties controls and the reference to the fluent ui scheme utilities. It's an npm package that you can add to your code to your project and these package contain all the utility to generate the different variation from a specific front. Ui thing.

A

So thank you and back to david.

B

Awesome. Thank you fabio very, very cool stuff, appreciate you sharing that with us in the community.