Microsoft 365 Community Community Demos, 5 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List Formatting Enhanced Web Part

Description

In this 10-minute developer-focused demo, David Warner calls on the Enhanced List Formatting web part that extends the OOB List web part to enhance CSS Styles only on selected pages rather than across site collection. Allows you to use pseudo classes and elements along with animations. Add CSS Styles in Property pane. Examples shown include hover effects (animations), transform labels, community Polaroids, and custom fonts. Examples are CSS only, no JS. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 5, 2021.

Demo Presenter: David Warner II (Catapult Systems) | @DavidWarnerII

Special thanks to: Hugo Bernier (Microsoft) @bernierh, for his contributions on the development of this web part.

Supporting materials:
• Sample - Enhanced List Formatting| https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting
• CSS - Pseudo-elements | https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
• CSS - Pseudo-classes | https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• CSS - animation | https://developer.mozilla.org/en-US/docs/Web/CSS/animation

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

This is a little bit of a repeat from one a year ago, but it's important for new ones in the community be able to understand the opportunities for extensibility that is available to them. So we wanted to share with the community enhanced styles for list formatting in uh lists web part. This is won by hugo and myself. We contributed to this and built it together, uh and so I want to make sure he got the due credit that is deserved, meaning that he did most of the work and I'm just the voice.

A

So there you go. Why and what is a enhanced styles web part? Well, it is an spfx web part and it provides the opportunity to include enhanced css styles on a single page, so you may say: well why not just use an spfs extension right. Well, an extension is going to affect every page in your site collection, whereas the web part is only going to affect the pages where the web part is added.

A

That may seem simple, but it's important from a performance perspective that is going to provide you better performance, going to allow the use of different enhancements to list formatting in different sections of a site, and you don't have to worry about connecting to a list to pull the data back for the enhancements that we're going to show you how to take advantage of today so where, and how can you use it well, as spider-man said, with great power comes great responsibility.

A

Now this is a very powerful web part that is going to allow you to inject css onto a page, but that does not mean you want to use it for evil. You want to use it only on the html you own, which means the classes that you are creating within your list. Formatting definition so be a superhero.

A

Not a super villain only control the html that you know that you own, obviously on from a dependency perspective, you are going to be relying on this web part to provide that extensibility.

A

So it's important to know this is not an out of the box feature. It is not something attached directly to the list: formatting definition.

A

It is an enhancement above and beyond the out of the box experience, but once you're comfortable with that and you're able to uh utilize that what are the opportunities that you can take advantage of, you can utilize pseudo classes and elements, so things like hover effects and then you can include animations so using keyframes and stuff, like that. uh It's not something that is available as of yet to list formatting at the level that we're going to show you.

A

But again this is a lightweight extensibility that provides a lot of power to the awesomeness that you're going to see in a moment from chris camp. So let's take a moment and look at a brief demo of what it is that you can take advantage of so we're looking here at a list now this is a simple list of community contributors. We've got some photographs, some titles, some information, pictures, etc. And, of course, we know that we can apply things like list formatting to it at a view level.

A

So if I come over and we look at a version of that that we've used in the past, it shows all of the information that we saw on that list, but in a more graphical way right, so we're taking the icons here and we're showing the different information like their linkedin, their favorite marvel or dc, where they're located in canada, their favorite season or sport etc.

A

But can we enhance this with additional hover effects and uh transform effects? Well, absolutely so I'm going to go over to a page because, remember all of our list. Formatting definitions can be inherited within the list web part. So what I've done on this page is I've simply just dropped the list web part.

A

So I added that and we see if I edit, that web part we've got a list web part out of the box. This is all completely achievable by simply using the out of the box, but if you were to use the enhanced list formatting web part, as we can see available right here when I add that I've added added it to my tenant, so we have the ability to take advantage of that.

A

If I add that we do get a little bit of that gps warning right, we need to be reminded that this is a very powerful and must be used for good web parts. So if you misuse the web part, then you're going to experience things like loss of styles broken styles, why is sharepoint broken tears? Nightmares, blue screens of death? Oh my! No one wants that so make sure you use it and we hit accept we're good to go we're. We want to be superheroes you're, given the opportunity to add custom styles.

A

You can see it already shows up here in the right panel if I click that it will just if that's closed, and I click that it'll bring it open. We can also expand it for a greater ability or more real estate on our screen. If we want to do that and then we can just add our css styles, so I've got a number of styles here that I'm going to to simply add in off-screen and they're, just nothing more than basic css.

A

So you can see we did a really good uh hard work here in making sure that you're also getting that color coding and it's not just plain text you're seeing so if I hit save- and I close that see- what's happened now is it took the labels and just provided some transformation to some of the things things that you're not able to achieve via inline styles, very simple, uh certainly maybe a little archaic.

A

In its view, right looks a little vintage there, but it's just showing the ability of being able to use that transform and the ability to override those pseudo attributes, but wait there's more if we replace that now we're going to get into a little bit of a hover effect right. So now we've turned into a little more rounded corners added some colors, and if I hover over it now, you can see there's a little bit of a glimmer that happens right.

A

So we see that animation we're able to change the color of the primary text there, and we also add that little orange glimmer that goes across the screen and gives us a little nicer effect, draws the attention for the user and it's driven by the user right we're not adding gratuitous animation here for the purposes of just annoying or trying to draw attention without the user, having decided to see that interaction themselves, let's jump to another version of a list formatting. So here we've got a polaroid effect, a pretty cool effect.

A

What you're seeing here is completely out of the box. This is using just a basic list, formatting definition, some of our favorite people as well, and it's nice. It actually looks good.

A

It's a good way to represent right, it's kind of got that vintage look as well, but again what if we wanted to take it to the next step, so we're going to edit this we're going to add that web part onto the screen, I'm going to say I accept, add custom styles and I'm going to add some css here and again we're just getting into some some basic hover effects right. So we're looking at that pseudo attribute right there, something that we can't achieve using just the base list, formatting definition on its own.

A

What does that give us? Well now, when I hover over see what happens is it brings a little more attention again, it's user driven, which is important, but it brings a little more attention to the actual card or polaroid that we're hovering over. Of course, we can take it another step.

A

So we'll change our custom styles here, select all delete come over, and now we see what's happened is we've got a little different right, we're injecting a use of a custom font, we're very specific in our use case here, by the way, we're not looking to override areas that we don't own. We are adding it to the html that we do own in a very specific use case and in this case we're using because remember when we use polaroids we'd write the name, maybe the location, the year etc.

A

So it adds a little more degree of reality to this particular experience. Now uh you'll notice as well, that it went black and white right. So when I hover over it well now we're able to do that.

A

Color contrast right so now we're bringing even more attention to the focus of the individual that we're hovering over again, a user action, a very definitive action by the user to ensure that we're we're only acting on what they are specifically hovering over we're not randomly bringing them to the forefront, but it allows even more information uh to kind of be highlighted as we're going about uh navigating the screen now. Lastly, the last demo I'll show you takes it one step further, because I love this one.

A

It's pretty cool and again everything you're seeing so far is nothing more than css right. There's no javascript here we're not injecting javascript, we're simply using plain css, so you'll notice. Now the heart has been added right. We've got a little heart added there and if I hover over it, we still get that effect where it brings it to the forefront kind of squares it up. But when I hover over that heart, we get that little sprite right, so we're using a gif animation to be able to provide an extra layer of experience and interactivity.

A

This could be a hyperlink that clicks back to some flow or something like that that actually favorites our our uh users here our community contributors right, um but it adds just a little extra experience to the to the users interactivity, which is pretty uh pretty fantastic and again list. Formatting is getting better and better every day. Chris always shows amazing things and I'm sure he's gonna show another amazing thing here in a few moments, um but this is one opportunity for you now remember points to keep in mind.

A

It is one to one on the page right so where you drop the web part is where it's going to be used. If you're going to use this in other places, then yes you're, going to have to drop that web part, maybe copy the styles. It does allow you to ensure that they're scoped only to the page, though right so you're, not including a bunch of extra code or css, or even just a call to another list where the css may live. It is specifically scoped and enhances that performance.

A

So, let's just go back to the slides briefly and just for some additional links. We'll include these in the chat as well as my blog post. uh You can learn a little bit more about pseudoelements classes and animations at these web urls and the demo or the web part is also available at the pnp spfx repository.

A

So please don't uh hesitate to take advantage of it feel free to reach out. If you have any questions other than that julie back to you,.

B

Awesome, thank you. That was very cool neat way to see um you get the css in the page, but I love your warning because don't manipulate the dom.