Microsoft 365 Community Column and view formatting tips, 19 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Enhanced Styles for List Formatting in Lists Web Part

Description

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

In this 12-minute demo, David Warner and Hugo Bernier show off a SPFx Web Part used to put CSS styles on a single page. Capabilities demonstrated include banner formatting, hover effects, tilt list of photos, customize fonts, animations, sprites and more. Why not use an SPFx Extension for CSS? Extensions affect every page in a site collection whereas a web part affects only the pages on which it is added. List Formatting enhancements can and often do differ page by page. The code consists of controls and web part. The presenters suggest you should use this web part responsibly!

Demo Presenters:
• David Warner (Catapult) | @DavidWarnerII
• Hugo Bernier (Point Alliance) | @bernierh

Supporting materials:
• Enhanced list formatting sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-enhanced-list-formatting
• CSS Pseudo Elements: https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements
• CSS Pseudo Classes: https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes
• CSS Animations: https://developer.mozilla.org/docs/Web/CSS/animation

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Well, we are going to be discussing enhanced styles for this formatting. We have no murdering of horses or death by hugs today, but we will have some other cool stuff, so hopefully everybody will enjoy it. I am David Warner joined with Hugo Bernier. You guys know us both but feel free to reach out. If you have any questions all right, so what is enhanced Isles and how does it relate to a webpart? Well, what is it so?

A

It begins with an SPF X webpart, which provides us the opportunity to put CSS styles on a single page to override lits formatting definitions that we've created. Now you may have seen in the past where we've done this via SPF X extensions I've done one in the past, where I showed how to include icons and animate those icons.

A

But of course that was an extension, so it means it's going to be on every page and every site collection where it's loaded, whether or not you use it or not, and so a web part only affects the pages where it's added, which is beneficial because it's going to provide better performance and it allows you to provide different enhancements to the same 'less formatting experience on different pages, where you might find that needed now.

A

What are the rules of use, because this definitely has some of those toeing the line opportunities where you could use it for irresponsibility right, so you only want to use it where you own, the HTML we own, the HTML within our list formatting. So with great power, comes great responsibility. We want to be a superhero, not a supervillain, of course, there's a dependency here.

A

We want to set up our list, formatting definition out of the box to be as robust as we can so take advantage of everything that is included with list formatting out of the box things as well as what you saw, Chris doing for accessibility and all of the above. So if you do extra enhancements like you're going to see today, just realize that there's that dependency on your web part and the Styles being included on that page, and so obviously it's not attached to the list definition. It is an add-on.

A

So what are the types of opportunities for this formatting? Where do they make the most sense? And why would we want to use them? Pseudo classes and elements are two of the items right, because you can get hover. You can get visited, there's a number of things that you can tap into with pseudo classes and elements that are not includable on list formatting definitions by default that includes animations such as keyframes things like that. So we see a much more friendly version of Parker flying in on his warrior hearse we can hover over it.

A

We can see an animation occur because of that. Alright, it's the warrior horses charge. So, let's see a demo. What does that look like? So here we have a list formatting. This is on a page in the list web part, so it still looks great. This almost looks like it virtually does. Look like a custom web part right, but we can take it a little bit further. So the first thing we want to do is edit our page and we'll go load the web part. So it is called enhanced list formatting.

A

It should hopefully be in the repo. Soon we've got a PR ready for it, so feel free to look for that soon. You click on it and, of course, there's some warnings here right much like we get on our GPS. We don't want to be interacting with the GPS. Why we're driving? There are some rules of engagement.

A

So if you misuse this webpart, there's lots of side effects that you do not want to have to live with broken Styles, potentially, if you use them incorrectly, trying to override sharepoint where we don't own, the HTML users will call and ask you why sharepoint is broken. You'll have tears, nightmares, blue screens of death. Nobody wants that, so we want to go ahead and make sure that we use it responsibly. So when we accept that we can add our custom styles now, Hugo wanted to make a note about this feature here. Yes,.

B

So this is a custom property control that I that I built that uses the monocle editor I, actually largely borrowed from Chris Kent's solution for including the monocle editor I mean as a general rule anytime, you can borrow from Chris can't you know do do what he does. You should do that in real life, but this this actually is something that we've designed. So we could reuse it in other solutions with any languages.

B

However, if anybody is an expert when it comes to dealing with webpack I would love to define a way to leverage your expertise to optimize how this is bundled into the web part.

A

Excellent thanks hijo, so what I'm gonna do? What I've got off screen is a number of styles. We're not gonna go into the details, the styles cuz, those could be shared, but what I'm going to do is bring it over and paste it in now. What I've done is I've included the ability to create a very, very simple ribbon around our names. Now this is using a before and after attribute. You could do that with just an image. It's a little more complex. This allows it to be completely CSS styled.

A

So it's going to be responsive, very simple, we're starting easy and slow here, but it's still a nice little experience. Let's take it a step further go ahead and remove that and we'll go ahead and add a button now what's happening in this button is there's a hover effect and it's going to be like a metallic glimmer or shimmer.

A

So as I hover over it, you can see it's almost like I'm kind of painting on the experience of orange or its metallic being shifted in the light right, so some hover effects things that are only accessible through that pseudo attribute.

A

Let's step it up a little bit now we're looking at a community collection of community contributors through Polaroids.

A

Now this as we see it, is simply just list formatting, you can achieve exactly what we're looking at here with pure list formatting, which is really really cool, but we can still take it a little bit further, so we'll edit, the page we'll add the web part we'll accept like boated and we'll paste in a little bit of a change and what's happened, is you see now it kind of added a little bit of a random tilt to the Polaroids?

A

So there's a little more randomness looks like they're laying on a table which I think provides a little better experience and, if I hover over it now it brings to attention the individual person that I'm hovering over right great, but we can do better. Let's go ahead and edit our style.

A

Remove the default add another one and now there's two things that have happened: we see that we've customized the font and the entire card or Polaroid has become black and white, and the reason is because black and white is because now, when you hover the color filter and shift into color from the black and white, so a pretty cool effect, but wait there's more if we go ahead and add one more we'll delete that and you can always go ahead and open the fullscreen editor right here.

A

So if we wanted to do that and paste it and we could hit save now we see that it's done everything we've seen so far. It's tilted it. It's turned it black and white change, the font, but you'll notice. We added a little heart down here. So perhaps there's some sort of engagement service that we work with. That works off of something like a hyperlink.

A

We know we're not gonna override this with JavaScript, but perhaps a click event could be tied to some service for likes or favorites, and so, if I hover over bow here and then I hover over the heart, you can see a little animation occurred and that's all using CSS CSS, animations and sprites. So the power here is significant. When you talk about being able to utilize things like pseudo attributes and animations via CSS for HTML that we do technically own.

A

So, let's jump back to the presentation and Hugo is going to talk through some of the sample code. Thank.

B

You David, so what you're looking at here is an overview of what the solution looks like it's broken down into kind of the controls which includes the the editor and the web part we're gonna focus into the controls, and specifically, what you see here is that we have kind of localization. We have the custom build of the monocle editor, which is a solution that chris kent used before and then we have the monocle editor.

B

A

B

Control and a property field control that allows you to embed the monocle editor in in your property pane. The second part is the web part itself, and the web part obviously is made of the web part and the control that renders the web part.

B

The web part itself has the enhance list formatting and if we go into the web part itself you'll see here how we call our property field. Monaco editor again, like I said we built this, but we could use any language like Poe editor in this case we're saying we're using the CSS language and we're using the visual studio light theme. We could use any theme or any language, including custom language support.

B

This is how we render the the control. So if you click on on the inside of this code, you'll see the first thing that we do, and this is very cheesy very simple, but we simply create a style element that we can embed and we actually put the custom CSS that that you anchor most modern browsers. Actually, all modern browsers allow us to embed a style in the body of the page, and it will render it properly on some older browsers.

B

You have to include it in the header when we designed this, we actually decided to not include anything in the header, because we were, we didn't want to break too many rules, so we included the style element in the body of the web part itself.

B

All we do here is if we're in display mode. All we render is the style, but if we're not in display mode you'll see that we, the first thing we do is if we didn't accept a disclaimer, we put our cheesy disclaimer on the screen by the way. If you don't want to have that disclaimer, it was kind of intended as a joke. But if you want don't want the disclaimer, you can just change the manifest of the webpart to say that you've already accepted the disclaimer and the web part will not display the disclaimer.

B

The next part here is how we render our list formatting and we just use the office fabric, UI message bar to say you know, click here to add some cascading Styles or you know, yeah you've already added some styles click here to change them and that's it for code I believe so we have some some links that are available to you again. As David said, we have creative, the PR for this web part in the the web parts samples repository, there's some links here for the pseudo elements, pseudo classes and animations.

B

All those are valid things that you can use within within the the web part, but I would encourage you and you're gonna see this. This warning many times in in the readme and in the code I would encourage you to only leverage what's available out of the box with the the ListView formatting first I'll use everything you can and only use this web part for things that are not supported. There's some styles that are not supported like RGB, a values are not supported. Animations are not supported.

B

That's when this web part should be used and again you should use it with with great responsibility. That's it for me, David.

A

Yep, that's it for me to appreciate the time guys. Thank you for that. One awesome stuff.