Microsoft 365 Community Column and view formatting tips, 7 Mar 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Alternate row styles for view formatting

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 7th of March 2019. In this video, Chris Kent (DMI) shows how to create a view formatting definition, which supports alternating row styles.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-7th-of-march-2019

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

All right, everybody, you know hello, so I'm, Chris Kent, if it be VP for Team all that other stuff, there's worse things reach out to me as needed. I got something real excited to tell you today so trying to show you last week has small issue everything's working today as of 30 seconds ago, so we will hope that we got it good to go, but I'm really excited about it. So let's get rid of this all right. So we've got ourselves a nice list here. I want to show off a new magic string.

A

So if I'm gonna go ahead and come here, I'm going to format this column right, so that'll of it's like column formatting coming here, Oh Patrick sees me. That's where the creepy type rivals, that's just for testing and we'll say, text content in this case we're just gonna, say this new magic string called app row index. So this is a very exciting one. Wow look at that. So now, I'm gonna see everything just turned into a number here, so it starts at zero. So that's the actual index of the rendered row. In the view.

A

That's fine! What that means in just a minute, so that's a really exciting thing now that we can do a lot with just putting row index but there's another nice new operator came out here called the modulus operator or the remainder, so you can say equals and I'd do something like 13 modulus is done with a % so I say 13% to preview that you see it's all ones, because the idea here is it divides it by two all right and it gives the remainder.

A

So in this case, because it's odd, it's going to be a 1 all right, change that to 12 yourselves 0, all right, 11 and so on. So the nice thing is you start to see that's cool. What the heck do I do with that as well. We wrap that up here. We max those together, so I stay row index all right and I say modulus, 2 and I said that equals 0 all right. Then, let's put the word odd in there, and otherwise it's put the work even in there.

A

So I preview that now we're getting somewhere right now, I can actually tell what's happening here. I got an odd I got an even and that's great, and you could use these. You know row indexes and column formats, but generally that's not super helpful. So let's take this a little further and let's take this over to a you know view for Matt, so come in here and I'm gonna go my view for Matt I'm gonna form out the current view. All right so come in here and you will do the same kind of thing.

A

We're gonna, say additional row class that allows us to fly a class to the entire row. I'll make sure before I forget I'm gonna close that thing out for yells at me all right, we'll do the same if statement. So if at row index you know modulus all right equals equals zero. So it's odd row all right, let's apply class here, so we say: Ms bgcolor, all right, we'll say feed white. That sounds great. Otherwise, don't do anything!

A

Okay, close that out, if you preview that boom look at now I'm starting to get something really really interesting here right. So now we've got some some stuff going on here. We can go a little crazy here right, so we can add an alternative style, so you must be the color. I will say: theme lighter how's. That theme lighter alt just to mix it up. That sounds good. Oh look at that. It's getting very, very fancy. All right. We go to advanced here. We can have some hover styles and everything else.

A

Oh good paste that in here BAM all right, so I've added hover styles and some text and now very quickly. I've got this very fancy. Looking list, it doesn't look near as excel. You know, giant spreadsheet, on a webpage, it's very cool, so we'll save that and see how that really works so that row index I mentioned before. That's not unique to your list item, which is really important. So a lot of the magic strings. Like current field, you know pulling out other values.

A

Those are all related to your exact value inside the item, and so they you know they stay the same as you modify that view. But these, however, are related to the rendered position of your item. In the view, so what I mean by that is the top one is always zero, so it's always gonna be on, so it doesn't matter if I sort it. So it's sort that thing right. Look at that stays in place. Sort of this way I can go over here. I can filter this guy.

A

So it's, let's just do choice two and three by that, so that's really really powerful. So if you want to apply things that are specific to the rendered positions, this is what you want to do. So can you format the list header as well, so you can hide the Tedder. You can't really change the colors behind the scenes on that one. So if I wanted to hide that, I certainly could okay all right. So that's cool. So now, let's see what we can do here.

A

So when is this helpful right, so it could be very helpful if you've got say you know a warrior horses sight and you've got the warrior. Horses and they've got this giant massive list here and you've got a little little gray line that comes across and if you hover over things the filter right, you can sort of see things, but as this list is really really wide yeah, it's got a lot of stuff in it. You so much easier forget to read this.

A

You know using a nice format, so luckily everything I just showed you is available as a sample. So if you come over here and you go to the SP dev list format e repo I'm going to come down here to view samples right at the top there's this alternating row class and that's what I was just showing you. So all you have to do.

A

Is you put on the JSON file and just copy and paste that no fancy get stuff needed, I'm gonna copy that and I'm gonna go back to my site, I'm, going to format this view just paste that in there and I'm gonna save that I am look at that now. I've got beautifulness I'm, not quite so happy with. Maybe that I could say theme secondary in this case right and preview that you know who read. Yes, that's what it was good tertiary there you go again.

A

This is a custom theme, so all of your colors can be applied here. You can also just apply colors directly. You know you can even do things like. Maybe I don't want every other row I want every you have their other room, I'm, not sure to say that, but right so modulus, that's a three! You see you've got a lot of stuff you can do here. Let's get rid of that, though. Well here's the power.

A

So if I save that close this, you can start to see so I'm really zoomed ed to try and make this little more obvious. If I zoom way out see this massive list right, it is so much easier to read and keep things on track when I've got this nice format across here and again, the fact that it stays in place like you'd expect as you filter and you sort is really really awesome. Okay, so there's a blog post on stuff. All this is in the documentation.

A

As well so you're interested in finding out more about row index or the modules I could check all that out. Let's head back over here, so here's the thing row index right starts at zero. Like all indexes should this is SharePoint Online only so 2019, sorry, that's not available for you and again the value which the rendered index was really important right. So a lot of people used to solve this alternative row thing.

A

They try and use a calculated column based off the ad, not realizing that you can't really do that in calculated columns and then they cry and then be sad. Well, be sad! No longer there you go and one other thing I kind of want to mention here is there's another thing here: number that was sample for this place, the absolute so abs.

A

So if you used this gives you the takes away the negative she can use this for math operations, so that is available as well, and with that I we are looking for samples demonstrating practical usage. So if you've got a sample, you know that would take advantage of that absolute operator.

A

Absolutely one tap, but that's it right. Absolutely! You want that added to the repo, so please reach out on that one. Alright, finally check out our docs SP Doc's desk column, formatting right here of the AKMs. You guys one found it grab that sucker come okay, go check out the list, formatting samples and there's a blog post. That goes much more in-depth of everything. I just showed you. You can go check that out as well, but that's it for today. Awesome awesome! Thank you. Chris.