Microsoft 365 Community SharePoint, 20 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using @rowIndex and Custom Header in list view formatting

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on February 20, 2020.

In this 12-minute video, Chris Kent, adding to his previously delivered sessions on list formatting, demonstrates an extension to the baseline @rowIndex (Alternating Row formatting) available in a row formatting sample that allows the developer to not only select alternating rows, but also to hide existing column headings, to create independent row formatting, to add a custom header and to add icons and color fields based on position in the Row Index.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Alternating RowClass sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/alternating-rowclass
• Custom Header format sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-header-format
• Blogpost: bit.ly/LF-alternating

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

Everybody saw I'm, Chris Kent and let's go look at some list- formatting stuff. Alright, let's go over here, so we've got our classic warrior horses site. Of course you guys may not know it, but where your horses are global global doesn't just mean the land means the land and the sea, and the warrior horse is the master of all domains so as real. They do share point, of course, to track the aquatic assets that they have deployed around the world. Alright.

A

So if we check our aquatic assets, library here list we're going to zoom in and we're gonna just take a look at a couple of things that make this a little easier to read or a couple things that we could do now. The first is something we've looked at before. Let me zoom that in a little bit, so you can see it they Wow Terry. Oh that's pretty good! So the first thing I'm gonna take a look at right is alternating rows. So this is something in the past.

A

We've done through a format and we kind of take care of it ourselves. So if we go to format current view, we've got kind of our first of our view. Formatting little wizards here, alternating rows styles, and we just check that right and wow. We got nice stuff going on there. You can actually edit these I haven't seen this. You can pick some exciting colors right, so it's aquatic so kind of do this green and blue.

A

Alright, we save that that's cool one of the things to note, though, if you go to advanced mode, you can see the JSON that gets generated all right, you'll notice. In this case it's got that abstract syntax tree stuff right. So it's a little harder to read. What's going on there or anything, as you can see, is they're using this at row index. So that's what I want to talk about today is this at row index and how all that works.

A

So obviously one of the number one uses for this alternating row stuff, but it's got a ton of other uses. So let's take a look at those. So when we're thinking about formatting generally when you're looking at formatting, you are limited to exactly. What's in your row right, so you can get other fields that are part of the view and you can reference those and you can get. You know the current value of the field and there's a couple other context.

A

Type variables like the the URL of the site prior to the current date and time, but really row index is the only one that tells us something about the I'm adding itself the rendering. So we can't generally reach into other rows right. So there's no grouping or aggregate type functions that we can do because we can't reach past the rows. But row index allows us to know where we are in the drawing. So let's take a look at just how it works and it will make a little more sense with it.

A

So this is the alternating rows. If you don't like that, we also have, in our view samples and our formatting repo. We've got an alternating row class or if you want to take a look at that JSON, it's basically a one-liner, except for that schema, we'll copy that directly out of github I'm, going to paste that in because it's a little easier to understand than the one they've generated. The other thing is they're, using these kind of special backgrounds to their classes, which are fine, create that blue in green.

A

But if you take a look at like say, you're changing the theme here, you'll notice that it's it's very tied to those colors itself. So even though the site became red, it's not really red right and that's alright. They look fine and dark, but what if we want a little more control over there right? So we could paste in this format all right. If we preview that you'll see that it has it's using the theme colors. So we change the look now. You'll actually see that it did.

A

It corresponds to those themes right, so that's already an improvement, but the way that's kind of working here. Of course we want to keep our horse brown, but it's doing this modulus operator on the row index. All right and that's pretty cool I mean you can do all sorts of cool stuff with that. Let's take a look at just the row index by itself, so if I come in here and let's actually remove the hex I, don't like that blue green. After all, so we're gonna uncheck that and save them we're good.

A

So if we come in here we're just gonna go to this called here: gonna column settings we're gonna format, this column just to demonstrate advanced mode. Alright, we'll just say this is gonna, be an elm type and once they get a div right and then we're gonna say our text content.

A

Content yeah we're gonna, say that's just the @ row index right. We just want to see what that value is. So, let's make sure we add a comma, alright, we'll preview that there we go so now you start to see and let's save it, so we can move things around is that row index starts at zero and then goes up from there, but what's unique about row index is it does not care anything about the values inside of the list? Item alright.

A

So if I were to sort this right, so I want to sort all these things. Let's go A to Z on our aquatic assets. Right you'll see the IDS over here change, but the row index itself does not. So that means the first row: that's ever rendered is always going to be zero and even as we go right, we've got tons of items in this and things kind of lazy load in with our infinite scrolling right, we'll start to see mute.

A

There we go. There is a loading load in right. Here we start to see the format continues to apply, and so it's still instead of row index. It's almost easier to think of this as render order right. So what do we use this for other than alternative values? So here's a scenario: alright, so I've got this very exciting list. Let's remove that format, so we can not worry about the row index here. I'm gonna delete that now.

A

What if I want to do some cool stuff like right, I, want to I want to kind of change. This up. I, don't really want to show active right, I want to like change deployed, to show whether it's active or not. So, let's say, I've got a view format which I happen to have alright I'm going to come here and I'm gonna format, the current view I'm gonna go to advanced mode. It's like a paste one and the one that I've got kind of prepared and when I save this, you see Wow.

A

So I've decided down to the show my own columns right so I'm, just showing title and I'm showing the deployed and the deployed I'm, making it red if active, is no longer true right. So it's no longer an active asset, so I want to show it in red and that's cool. Alright. That works just fine. The problem is now I. Have these extra column headers up here? They don't really correspond. I can do stuff with them. Then it lined up the way I want them.

A

It's a little weird right, so kind of the obvious solution, not really obvious, but it might be obvious if you're familiar with this stuff right is to come in here and we're gonna. Add this hide column, header right so so thing you could do on beautiful maps. Gonna say hide the column. Header imma set that to true alright, when I do that? Hey now, I, don't worry about all that model. I know, but now I've lost my header entirely right. What does this date mean?

A

It's just kind of floating out here, so I could try and put something in line, but it would just look bad right. What the word deployed everywhere, so we're now we're gonna do is something it's a technique. We've used, it's called faking the header I just made. The name of that sounds good, so I'm gonna copy one. That's got that in here and I'm gonna show you what that looks like. So all I'm gonna do is I'm gonna draw that header myself. Now. How did I do that right?

A

Everything gets evaluated row at a time, but what I've done here we come up here, so you can take a look at this. This is a sample that's available, but the key part here is for my column, header right so I'm. Just drawing that, like normal, my display I'm saying if the row index is zero, so it's the very first row then then I want to make it flex. Otherwise don't show it all right. So by doing that, I've now got my own custom.

A

Header I can actually access fields that are part of the view like active, but I don't have to have a header for them all right. So I can completely hide that that way, I've got just what I want to show which is pretty cool, but you know we lose. Some of the functionality lose the menus right, I can't sort by these, and if I scroll down I no longer have a sticky header right. So I might do something like you know, mod I will say: 30 right equals zero instead.

A

So now, if we preview that well actually see that the column header shows up every 30 rows all right, so we've got a lot of flexibility on how we want to do that, which is really cool and all that's made possible through row index. So, no matter what my sort or my filter is I'll have all that kind of applied. So that's pretty exciting right, but for now I'm going to pull all that off, because we can go just slightly further for no reason at all and that's I did say that in every okay good.

A

So what if I want to just do something off the wall and pointless? Well, good news! You can so I've got this other sample here. It's called the generic row index. Drawing and I'm just gonna show you what we can do so if we take a column like active, so that sounds exciting. We're gonna call them set it to the form of this column. Again, I'm at a Vance mode or I can just paste my JSON myself, but paste it in here, and you guys can look through this again.

A

It a sample, that's available, but if we preview this or will actually save it, we'll scroll over here now we're actually gonna have a little drawing we'll come back right so or shot the Sun. We got a nice little boat and then here's the water and we scroll down right. We got some little fish that show up and the water gets a little deeper as we go all right and we just keep going all the way to the bottom of this ocean.

A

Let's see where we're gonna go here, you notice, the IDS are still got our other sort and that's fine scroll, Scroll, scroll somewhere down here the depths of the ocean. What might we see? Oh there we go Oh a submarine, so we've got ourselves or a scuba horse out here. Taking a look at the submarine and whole idea is we arbitrarily drew drew this now? If we take a look at the format here from at this column, we're gonna flip. Let's paste it again, so we can take a look at it.

A

But if we go up here, all we're doing is something very some of the other techniques we're only drawing certain things based on when that row index. So here's the Sun it's one of those UI fabric, icons right and we're just saying just draw on the first row. Then we've got our boat right, just draw it in the in the fourth row. Here alright and then we've got a little more stuff here. The fish. Let's draw those every 24 rows right, but not the first row and then we've got down here. We've got our submarine.

A

Alright, we want to just draw draw row number 200, because there's zero base index number to draw a horse underneath it one more below that and we handle the depth of the ocean right here in this formula for the background color. So you can actually set the RGB a value all right. So that's what we're doing here based on that row index and that gives us that nice a light blue, dark, blue and as we travel through the sea and that's very exciting, completely pointless, but hey now, you can do it too.

A

So that's pretty good. So let's take a look at that. Let's kind of summarize here on the row index, so the row index careful to keep it in mind that it has nothing to do with the value of the items, like all other tokens, do right so again think of it as like render order, and it's going to be the rendered index over Rose interview and that's going to be true, even as new rows come in.

B

A

So as you're doing that infinite scroll, it's going to keep track and you'll be able to do things with that. So it starts at zero. This is not available in SharePoint 2019, but it is shipped went online.

A

Only a couple things you do that so one of the key things people do besides the alternating rows is this custom header I, so turn off those existing headers check to see if it's zero and show it and there you go pretty exciting and so finally make sure you check out the full documentation on this there's a bunch of information about the row index and what you can do with it. There's also the alternating row.

A

Class and I didn't list them here, but we also have our custom header format and our generic row index drawing samples that are available to you within that sample repo. Alright, that's all.

B

I got excellent super useful super super subpoenas for business critical stuff, absolutely no just create demo on how to row index action. Thank you Chris. For that one, a lot of chats on the chat window.