Microsoft 365 Community SharePoint, 2 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Developing SPFx web parts for different section designs using CSS

Description

In this 19-minute Developer-focused demo, Stefan Bauer shows viewers how to make changes to the styling of a web part by creating variants on office UI fabric – site theming within a web part. Add a theme variant object to an SPFx web part. Redefine the CSS variables within the web part’s event handler. The theme variants are then available and called as CSS variables. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 14, 2021.

Demo Presenter: Stefan Bauer (N8D) | @StfBauer

Supporting document:
• Article - Develop SPFx web parts for different section designs using CSS | https://n8d.at/develop-spfx-web-parts-for-different-section-designs-using-css/

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

So what you actually see here is just a cool sample because it's the out-of-the-box webpart that you got with it, but we actually what I'd show you here is. I do a lot of things with this because, as you see here, actually it is embedded on a page and the page theme here, which also has a new header that is coming out uh pretty soon.

A

It says that it's a teal theme, but my web part is still blue in here right. There is also one another option that you have to consider when you develop or design your web part is the section background. So when you edit the page and you go over here and say you want to edit the section, then you have different color variants right. So you have these neutral one.

A

You have these soft one and you also have the strong one which is actually inverts the complete web parts, the uh the the complete side, theming that you have on the sharepoint side right and, as you see now, we are have pretty fixed colors.

A

We don't have really much control of it right now, but I show you how to gain control about this on this and the web part is always blue and we are lucky that the screen blue works somewhat, but we want to actually make this exactly to follow the seeming pattern for that microsoft provides us, and for this we actually use something which is now available in in the web standards which is named css variables- and I need want to explain you a little bit about css variables, what they are do.

A

Actually, the official name of css variables is css custom properties because it allows you to define custom properties in css, and I have here on a code pen, a small sample, and what you see up here.

A

Root means the document root in this case- and I have here, primary minus color is defined as pink, and this is exactly how you define a variable, so this defines my primary color as pic then I have another variable in here dash dash text minus color to black, and this defines actually my uh the text color that I want that. I want to use what you see on the on the left side. I here I have a small box diff with some laura mipsum in there and when I want to use this variables.

A

Actually I say just background. Color then use the keyword, var and define which custom properties in css I want to use dash.

A

Primary color gives us the pink as a background for this box, and I also have the color here set to the regular text color set to var dash text minus color when I have an alternative boxes, and this is important even for a web part, because I have here a box 2, which also defines the primary color and the primary text color and whenever you see variables inside such an element, and you always need to have a scope of such an element in there.

A

So it just defines for this box and the following elements in there: the primary color to black and the text color to yellow. So when I copy now the box template from the first box below. Actually, after I redefined my variables, you see, the box is actually again pink with a black text on it. This is somehow we are.

A

We can perfectly scope with css variables where actually, our color values are effected on right, so right now, still blue still, the old classic office ui fabric uh theme in here, and actually what we want to do is we want to enable our web part to have the seaming uh to have an object, actually that that provides us, the seaming, so the first thing in spfx solution.

A

What you need to do is to enable the support theme variants, and there is one important part there, because when you try even have tried on a darkened background, a regular webpart which has not set this property in the manifest, then it you have always see a white background.

A

When you enable this by the support theme variants, then this white background will be automatically begun and you don't need to have some css in there that actually removes the or sets the background color to to transparent. But this property in the web part manifest. Actually does this for you.

A

So what we actually do in the web part and we have javascript and we want to convert javascript somehow to css back and css variables variables. Allow us to do us this right. So when we take a look at the web part code, so then you have to import actually some objects from the esp component base and what you do on the init of the web part. This is a new function that you need to write.

A

You request the server scope and the theme provided in this case and then, if you're lucky you get you try to, you can say, try get theme, and then you get the theme of the current section back this. The thing why I say it is because there's some things that are actually not supported in there right now, but I I think there will be change.

A

For example, if you have your web part on a full canvas page, then you won't get anything back from the theme variant, so you cannot use it and for this scenario we have a really really old object, which is the window theme state. The theme which actually has also the css colors the theme colors actually in there, and this is also supported in sharepoint 2019 right.

A

So this windows theme object, exists in sharepoint, 2019 still and the other theme variants up here only exist on the sharepoint online version, so what we actually get back from from the theme variant. Let me go over to my browser here and we get back an object which has then in their uh the effects like the elevation. They are defined in office ui fabric.

A

We have in here even the fonts, how they are defined. So we have here an object that says font large, which means the large font we have, and this is more important we have palettes in here. The palette is actually the office. You have fabric palette and what you see here is you have a button background.

A

You have a button border, so whenever you need to want to create custom buttons like this, then then you can reference these javascript variables, but instead of using it in javascript with css variables, I show you a way how you can use it directly in your css.

A

So what else do we have in here beside the palette? We have semantic colors in here also because the palette only gives us a seam darker, seam, alternative button backgrounds and so on and so forth. So what I actually do this is the the object. Actually I get back when I, when I request the scene and is in here when I say trigger theme, then I get the theme variant back and then I have the semantic colors. I have the pellets. I have the effect in here.

A

There's the the reason why I use this uh in this area. Notation is because there is still uh there's a small issue because it is and should be supported in, I guess in 1.12. It will come out that we have all these slots that are available on the seam variant object available in sharepoint framework. For now, I need to help myself and trick a little bit typescript to get access to these effects, so this is actually the console. Debug is actually this piece that you have seen that outputs me.

A

The theme variant object in the browser and what I do now with the set css variables is, I pass get the object, keys from the from the theming object and write it directly to this.dom element, which is actually the first dom element of our web part and set style and set property.

A

This seems like for people that are aware that are set to style here that are set an inline style, but what I actually do with this, and with this number glacier with the dash dash and then the key name, is I just define a custom property on my dom element that then dribbles down to all the elements that I have in there right.

A

So when I actually check my web part from a css perspective, what I have then, is you see it here on the element on this element? I have dash dash background color. I have the background framework. I have a link color. I have a primary button background and all these theme variants are now available as a css variable.

A

Okay, so actually to fix this web part and make this thing seem a variable.

A

I just have to go to my css in here, and we have here by default, the background color, which is set its theme dark and instead of using the background, color theme dark. I can say var dash dash theme dark.

A

And I actually don't even need this can refresh my page and it should screen in the screen now.

A

So when we take a look at all the section variants that we have in here- and I created a separate page for this, where we have a white where we have a gray where we have a some bluish soft tone and then we have the inverted ones. So what happens? Actually here when I refresh the page, you see the first ones. This is a some, I'm not sure if you perfectly see it, but this is a one. A little bit, lightish lighter green that we have in here.

A

Then it's get a little bit darker, even more darker and then the inverted theme we have here just change the background of the web part, but it's actually white because it inverts our complete theme right.

A

So when I go over to my web part again, then we have something like in here.

A

Ms minus font, color white and what I can see in here- and I don't do it like this, because I want to have here another thing in here: I guess the button background text and I have so we have the theme dark in here yeah button background text of this. Instead of the color white, I use the button background color uh the button text color.

A

Actually again, I use a css variable in here and when I refresh now the page, so I have the white ones in here, because the button text is white on this first three variants of the theme of the theme and on the inverted one I actually get also an inverted color for that. So I get here the green one, and I can do this with all the properties that are or all these these says variables that are using here- and I actually have done this already.

A

So let's take this one and overwrite this. So what I have here, for example, then I have the primary button text because it's always defined in here then I have here the theme primary again theme primary. I want to have a color. This is some fix because it was white in here.

A

I want to have the primary button text and when I compile now this and then I have everything looking and matching perfectly theme, so there's might a little bit an issue here with with the with the contrast of the web part, but overall, this is how you can make your web part work pretty. Well, whatever the user chooses and from a coding perspective. What we also have in here, so not only that I have defined in here that the css variables directly on the dom element, but what we also have in here.

A

We have here a theme provided theme changed event. So whenever the user changes the theme, it automatically changes, the styling of the web part and I'll show you this in sharepoint in a bit and let's take first, a look at the handle, theme changes. So what do we have in here?

A

We get a new object in there, which is our change theme, and what I do, then, is, I simply redefine the css variables and because, as css variables can set at any time in the browser directly, it automatically starts all my elements that use this uh css variable and what you see here is actually and I could do at this.render, but I actually don't need to do this because css variables is always like this.

A

You have it defined on your page and whenever you redefine it all the elements that use this variable unless it's overwritten by some local styling use automatically styling, and what I can do now is here on this on this page.

A

I can say here: change: look, I haven't refreshed it yet. I can then pick a theme which is, for example, the red one and automatically the web part changes accordingly to the seaming that I preview just preview.

A

So this is the orange version it just up, so it just triggers the event handler in my web part and then redefines the css variables in there or even if I want to use, for example, a dark yellow, which is also an inverted theme that is out of the box and sharepoint available. So I have here now the yellow background and of course I have a inverted one on the on the because it turns it back to light. I have the yellow one in here, and this is basically how it works.

A

As I said, for example, here, what I have is a full canvas page and I don't have yet on a. I hope this will be fixed in 1.12.

A

Is, I don't have here the theme provider available at the moment, but because I have this fallback in here that actually, where I use the window.themestate- and we just take a sneak peek into this object in in here.

A

These properties actually are com, 100 matching what we have in the theme variant in here, so I can perfectly reuse this and what I did here, I just use the window.seamstate object can refresh the page and the web part here on a full canvas page also get automatically becomes green, so, but what if you want to use actually this same method in teams?

A

Well, you can use, and this webparty theme in teams- and I already deployed it to one of my teams in here in my demo tenant and what we have here now is the blue one, where it doesn't pick up a styling or theming like that. So what I can do now is- and I haven't refreshed this one- let's refresh this, because it now supports our themes and it actually should also support here theme as well.

A

What I recognized yesterday, the last time I did the demo on uh on the office developer boot camp in vienna- is, I really got the colors from teams inside there I so the buttons were really purple and and not blue, like it is here, but it's what you see actually here, it's a little bit different blue that we have by default on our sharepoint site somewhere.

A

This blue must be coming from, but what you also can do in here is, for example, when I go to my settings and I want to use it on a dark theme.

A

Then this automatically also adjusts the the the branding of the web part on the dark seam or on the light seam.

A

And so I have one method with css variables that that I can use across the whole platform and always make sure that my web parts are actually perfectly themed.

A

Another benefit is this, and this is more like for people that works actually with developers with designers together is, for example, when someone said yeah what I designed a new web part for you. Can you give me, for example, a complete color set so that I can use it in my design?

A

So what do you actually have to do? You just have some sort of sample web part. You can go in here. Crap, this style uh fetch the style that only has the tesla css variables on it. uh Go in here, just paste it in and define it as a css yeah have some yeah. It doesn't know it probably, but you can pass this file then to a designer and he can use it even when you just use html and css what else we have in here. For example, what you see in the the round border?

A

uh We have a property here, which means dash dash rounded corners and let's make our weapon a little bit more fluenty and round the corners. So I can go in here. Where do I have a border? I have here a border, minus radius, just define y minus round round corners.

A

And refresh the page- and hopefully we see it because 2 is a little bit small.

A

Well, I guess you get the idea, so you have everything that office you have fabric with the seaming, provides you and and can use it directly here with css variables.

A

One caution here is the css variables are not supported in internet explorer 11, but internet explorer 11, on the other hand, will won't be supported in office 365 in august. So you still can have the border colors here defined like this. So then you have at least a fallback variant of this and then define the variables or use the variables, because css is doesn't throw an error when it's simply internet explorer. 11 ignores when some variable definition is in there that they don't understand and that's basically, it.

B

Thank you, stefan. That was really awesome, demo great to see the use of variables. I I certainly am not an expert in this, so it's always cool to see the latest css tricks.