Microsoft 365 Community Column and view formatting tips, 4 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Lists formatting backgrounds and borders using new isSelected placeholder

Description

In this 22-minute developer-focused demo, Chris Kent shares isSelected and other recently released list formatting capabilities. isSelected is used with classes, found on formatting samples site, for formatting (backgrounds, borders) to selected row or changes an image in column of selected row. Classes used ms-bgColor-* applies a background color, sp-field-border* sets border-width and border-style. Two Bonus on-the-fly demos show new “customRowAction” to expose a context menu and new expression called “split” for formatting text and borders around text. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on August 4, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• List Formatting Samples - Samples by Class: ms-bgColor-* | https://pnp.github.io/List-Formatting/groupings/classes/ms-bgColor/
• List Formatting Samples - Samples by Class: sp-field-border* | https://pnp.github.io/List-Formatting/groupings/classes/sp-field-border/
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdev-column-formatting
• Icons - Flicon.io | https://flicon.io/
• Repo - Farrier Community-tooling | https://github.com/pnp/community-tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

All right so, hey everybody, I'm chris uh yeah, I'm gonna talk to you about some list, formatting stuff today very exciting. So, let's head on over to our classic warrior horses site that we all have, of course good. So we're on our war horses site and the warrior horses have put together. A very short list of elite warriors all right, so we have this elite warriors list. uh What they're actually doing the list?

A

They're, not that important right, but the idea is they're, just tracking uh some things here and what they've run into is uh they've got a manager, that's decided! They don't like how this looks like oh there's, the weird gray. We use brown everywhere else, there's a weird gray. I don't like that. I want it to be all these other colors right. So now we can do some things like that and we've seen this before.

A

We go into format our current view, and if we go to advanced mode, we can do what's called an additional row class and what I want to show you with that. Well, first off we don't want an object. We want a expression here right, so we could easily say you know, ms, uh what is it bg color and we could say red, just cuz we're like here you like pretty there's pretty right. There's the prettiest thing possible right and, and that's not so pretty right. We want to do this a little more carefully.

A

Now we can pad expressions here right, so we could add an expression to determine you know what those should be and so on, um but I want to look at a fairly new placeholder that can help us with this right. So in this case we want to say you know the the background color is going to be.

A

uh I don't know, let's pick one out we'll say: theme lighter so msbg color, let's go neutral, lighter. That sounds good, alright. So, instead of that white bracket, I wanted this slight gray background and that's okay right, but now we've matched our hover color like ah dang it right now we don't have the hover and that's kind of annoying. So now we could add our own color right here. For that we can say. Ms eg color, you know we'll say, uh theme lighter dash dash hover all right when we do something like that.

A

Now we get now, we've got our home cover some public color. I got our own custom background color and that's nice right and then we run into this. You know I select an item and well now we don't run into an issue. Apparently uh it was supposed to be the wrong color. Oh there it is okay. So now we get the wrong color right. So now we get this weird gray and we're like well.

A

How do we set that right because that's unique based on when it's selected or not, and that's what we're going to talk about, and that is our new uh placeholder token called is selected.

A

So if I were to take the same kind of thing here and I'm just going to cut that, so I'm just typing again and I can say, equals I'm going to write an expression and say: if- and I can look at at- is selected keep in mind. The is is all lowercase and selected as capital s, but this is going to return a true or false value, based on whether it's selected or not, and so now I can, you know, type in some things here.

A

So if it's selected I'm going to do something, but if it's not we'll keep what I had before right so now, when it's selected we're not doing that. But let's add some other things here. So I'm going to say, msbg color, we'll go theme light right, because it's selected is our case. Sensitive all right theme light and let's just see what that looks like for a second right.

A

So now we can see now we're selecting setting a selected color remember if we want to override so it doesn't hover anymore, because it's not selected, you know we could come in here and we could say: msbg color theme, light dash cover all right. Then, when we do that now we shouldn't get that anymore. So that's kind of cool. So now we're controlling a little more of the experience right. If we want to go a little further, we could. Where am I getting these classes from?

A

So if you head over to our list formatting repo and you click on this link over to the right now, we've got this site with some documentation, some other groupings and things and the way I use this all the time is. I use the groupings and I go down by class and I literally use this to find out. What can I say? Oh I want to find out backgrounds. Well, here's some msbg colors, like we just looked at. I can see there's a bunch of name.

A

Colors, there's also theme colors, all right, there's the neutral colors all of these are in here and I can use these to help me determine what's available all right. You can see. I've got other things like what, if I wanted to slap a border on there right, so we coming out here and we got these like sp field border right. So, let's, let's, uh let's take one of those, so sp field border all dotted sounds exciting all right, so maybe we ought to add it when you're selected.

A

We also want to say ms: uh was it field order?

A

Actually, let's try a different: let's try, uh there's a couple of these, so sb field order all dotted and that one was on here. It's just in the sp field, border yeah! That's what it is all dotted. That's we got that let's pry it so preview that so now now you notice there's some weird things where they're actually doing a thing where they're?

A

Actually uh they didn't quite do the border sizing right, but you know the idea is we can start applying classes we can do so based on selection or not, and that's pretty cool right. So we'll save that and we do the same thing in our column format. So if we come over here, I've got a column format here on the horse.

A

Right, I'm going to column settings we're going to format this column come over here and all we're really doing is we're pulling a picture out of the document library and we're displaying it based on the value here you know we could have used an image column. We could use even a picture column.

A

uh We wanted to do something a little more elaborate here in this case, um and now we've got that, but we could come in here and we could even use that the same kind of pattern so app if at is selected right then we could say add to the url sitting right. Otherwise, just leave it alone all right. If we preview that and we'll save it, oh well, we have to put a plus symbol here pro card formula.

A

Let's preview that see, if that's right, I'm going to refresh I've had a couple of issues today with my stuff there we go perfect so now we can see that now the horses will sit down whenever we selected them, because they're ready to be doing something with them and that's very exciting. But the idea here is you know: is that particularly practical right now?

A

No, but you could find probably lots of use cases where this would be very, very practical right, the idea of being able to indicate when something is selected, whether it's in your view, format and so on. A couple things to know with this is this only works if selection is enabled. So if you hide that selection, you have no way to select, and uh there was nothing to be selected. I've also seen some weird stuff like you'll see here.

A

Like you see this, where, if I'm not selecting the select button, I don't get my same quite the styles, the columns I'll get it it's that additional row class. It doesn't seem to evaluate it quite right, but if I hit edit it does get re-evaluated. So there's a couple of the weird things with the additional row class and the is selected and how it's been evaluated, but otherwise uh you selected, you know, evaluates immediately and the idea here is. You could use this to indicate when you're customizing say the ribbon up here, not ribbon.

A

Sorry oops, oops command bar when you're customizing the command bar right, uh you're doing certain things with selection. You may want to indicate you know various things that could happen here to say like oh, this one is going to. If you hit delete on this one right, it's going to be doing something here. You can even change the button text based on what has been selected and so on. So you can see that now we've got an extra tool in our tool belt. All right, so that's for is selected, so that's really exciting.

A

Okay. Now let me make sure that uh that went very, very fast, so good news is um I've got something else. We'll show you too uh just for funsies here all right, so that was the the primary demo. But let's, uh let's look at one. That is uh we're. Gonna do on the fly just for fun here, okay, so what we're gonna do on the fly here uh is there's a new custom action here and we're gonna take a look at it.

A

So what if you were saying uh like the title class like this is cool. I've got these extra things, but you know what I really want to do. Something where I want to. I want to change this slightly based on a formula right, so we're going to invent an arbitrary formula here, we're going to format this column. Let's go advanced and, uh let's just say, let's put a div in there. That sounds exciting all right.

A

Div and then we'll say our attributes just to make this look the way we want we're going to class on there and we're going to say this is the ms font color neutral primary and then usually I start. I very rarely have things in the primary thing. I usually create children just because it saves you steps later right. So if you just kind of have a wrapper div up at the top and then anything you actually want to put in there, you put in the children that gives you a lot more flexibility and so on.

A

But in this case we're going to say this will also be a div and we'll just say our text is our text content, whoops text content, we're going to say is the current field right, so that'll, take whatever the title value is review that okay, so you see we've just done that. That's interesting right, we've lost some things and if we wanted to like the whole reason we wanted to do, this right was to have something happen. So let's go to our attributes again and we're going to throw a class on here.

A

We're going to do an expression for a class right, so we're going to say uh if we'll do what starts with the current field, give this a little arbitrary, but you know fun if it starts with a c: uh let's do an ms font, color of green and an ms font weight of bolt all right, we'll make it.

B

Bold otherwise,.

A

Just leave it alone right, but the idea here is now we're there. We go so we're trying to do something where we're trying to reuse this title field right we're trying to do some kind of expression, but you'll notice. We just lost. You know some of those things we had where's our dot menu with the context menu. We know we can right click and get a context menu, but that's it's a hassle doesn't show things right, where's our share button, a couple other things that we had before.

A

So we can actually start to restore some of these things and what we'll do is, let's just add, a another child. This is why we do the children, the children, all right, we'll say. Elm type in this case is going to be a div all right and we'll say: um let's make it an icon here, we'll say: attributes.

A

And we'll go here: we're going to go icon name and we need an icon. So actually I've got flanking up. Let's see, I don't remember what that thing's called say: dots there we go dots, so it's called more vertical okay- and I will tell you more about this, but let's come back here, so we're just going to paste that in here more vertical all right and what does it not like? What did I do.

A

Additional attributes to be added to home type. Well, I don't know what I did wrong. Anybody spotting. It.

A

Let's see, I got a name, I don't know, let's just grab all this and find out what do you not like he likes all that. So, let's just paste that in oh cause, I didn't do it as a as the right spot. There we go paste it there. All right turns out. You have to format your stuff correctly. There we go so now, let's preview, let's format that so we can see it look a little prettier all right, but now you can see, we've got these three little dots.

A

I don't know if you can see them they're real tiny. There see whoo three dots. Okay, so now we've got three dots. Let's make that just look a little better because that's going to drive me nuts. Otherwise, let's add a uh style here and we're going to add this as a display we'll make this a flexbox. So let's say flex and we'll say, justify content and we'll call this space queen. That should help us yeah move that little menu over to the right. So that's exciting!

A

um You know we could come up here. We got this neutral primary, that's all good! So we come down here and let's change this up a little bit.

B

A

Let's actually make this useful right, so we've got a little three dots now we're just confusing people. Let's make it do something, shall we so, let's add a class just so we can see that a little better class in this case, we're going to say uh spawn color theme secondary dash, just hover, find an ms font, we'll say: l again, I'm pulling all of these classes off of that site.

A

I just happen to know some of them. So now I've made the button bigger and now you can see it changes color slightly to red when we hover over it. So that's exciting right. In fact, we want to do something a little further, we're going to say our style in this case, we're going to say a cursor and let's put that to a pointer, so it because obviously we should be able to do something. With that there we go now. We've got a little bit.

A

We still can't do anything so we're still confusing people, but here's now what we can do now we can actually say custom row action. Oh yeah yeah this action and the action here in this case is going to be open context menu.

A

Alright. So let's preview that and so now there we go- we've restored the three dots menu and we've got our. You know our uh our expression. Here we could add. We could add one more button here to add that share button back. We could even add one for the comments right. We've even got uh some samples on how to get comment counts. If you wanted to change that so, instead of add, comic actually show the comment count and so on. um So you can start to recreate that title field or whatever the field you're.

A

Looking for um and put that in there you know- or if you wanted to put this uh say, you know with a centralized spot with all your other buttons, there's a lot of options there if you're using this open context menu. So all right, that's exciting! There's your on the fly demo and it looks like I've still got time. David. I've got another one I could do if you want take.

B

A

At it, you got time all right and again these are unproofed. So we're going to see what happens. This will be exciting. So this is a another new piece here. So, let's, uh let's just we're just going to leave that for fun, we'll move over to our primary weapon category. Let's zoom this a little bit there we go now, let's go and call them settings we're going to change it here. So what I'm going to show you now is I'm going to ignore this primary weapon thing.

A

I just need to call them to format on all right, so we're going to say elm type in this case we'll say another div, because you know me: I love the divs all right, then we'll say our children. As I mentioned, I like to put everything in the child because it comes up and then we'll say another div in here and we're just going to say our text content right is, uh I don't know dog cat lizard all right. So the idea is that we can start to control stuff.

A

But what if we wanted to do something so say we had values that were separated by something right. We have the idea of a join, so if you've got a multi-select field or you can join those together, so you've got multiple people selected. You can join those with commas or if you've got choices you can join those. We have a new expression called split which is kind of the opposite of that, and that gets pretty exciting right, so we can say equals split. This is again arbitrary.

A

We're going to split this thing right, I'm going to split it by comma and you'll find that I think this will be interesting to work now. What did I do? Split the dog down again, it's new!

A

Oh, it doesn't really change anything okay. So let's try this. Let's do a four each instead that'll be more fun. So, if you're not familiar with four each's four each um allow you to do like an iterator right. So um you see just like that iterator and field name. So normally you would do that with a multi-select field right. So we would give this um we'll just leave it. Iterator name, you could name that whatever you want and then you would apply this what's interesting.

A

Is you can use a split right, so we can say split and let's do our same. You know dog cat, lizards, good and we'll split that by the comma in there and then what we want to do is our text content.

A

Now we go text content will equal the iterator name that we used up above and let's see if that works yeah. So now, what's happened here is they're all just being concatenated all together right, but if we were to change this to you know have style, for instance. So let's do a style. Let's do it this way, we'll skip the classes. For now we'll say border say. One pixel solid paint sounds pretty preview that you start to see that we've actually taken these and we're really generating a separate div for each one of these.

A

So you start to see this becomes really really powerful pattern, um but hopefully we'll have a better sample of this soon. You know that shows us a little more um advanced detail. That is, if you had a column that had you know, a lot of different types of things. You could split that across and you could then you know iterate that on these and create an element for each one of those and then make decisions based on those right. So we could have made this instead of pink.

A

We could have determined when when it was cat right, so in fact we we probably could still. Let's do that, let's say equals and we'll say one pixel solid and a set of pink we're going to say, plus I'm going to say if the iterator name equals a cap. Alright, then we're going to say make it pink.

A

Otherwise we're saying make it duh. I don't know lime, because that's mine and pink always look good together right. So let's preview that and of course I broke it. Dude there we go equals equals it's your time, but the idea here is: I'm not splitting an arbitrary value, but this could be coming from a field or whatever else, and then I'm creating individual elements based on that and then I can apply um conditional formats. I can do all sorts of stuff right.

A

I could instead of these are all being because by by default in these columns you get when you have a selection on you get flex with a column layout, um so they go all side by side. So divs behave just slightly different when you have the selection on, uh but the idea here is. I could use that right to create a whole list of items right.

A

I could have these all listed out separately and I could pull that out and we've had all sorts of samples that have tried to work around this right by using their index of and replacement statements. So having a split finally is really awesome and the fact that split can work with inside of four each really opens up a ton of possibilities with a lot of power.

A

Again, that's much more of an advanced topic when you start doing the for each, but as you get to that, I think you're going to find that you can actually simplify your formats using this same technique where I've I'm using a hard-coded uh kind of sort of pseudo array here, and you could do that the same way right. If you wanted to create a collection of icons or something you could split those all up and create those all here and then create that way. You don't have to write these massive formats.

A

That are, you know five six hundred lines long. You could kind of handle that all together, because the four each makes this element into basically a template which is pretty cool and you could even wrap in those is selected and so on and open the context menu just to uh to pull it all together, which is awesome. So we have some additional things coming as well.

A

So there is an additional row action coming to open the approval dialog, which should also help, and then we even have another function which I'm not gonna demo here, because we're just running out of time here called replace all so. We've had replace and it's been very irritating because it just replaced the first instance of something.

A

So if you wanted to replace multiple instances of something you had to just basically nest or place and just hope that you got it enough times, capture that with the replace all like, you would expect it's a one liner and you can just replace all occurrences of something in a string which can be really really helpful as well, and we use that with split. That's awesome and there's a couple. Other array type functions like split, so split can work across an array.

A

This is creating an array of these values, but you can use append to and remove from on those as well. So if you're not familiar with this, please check out our documentation, which you can imagine dave, would probably dump out a link in the chat already.

A

But it's akms, sp, docs column formatting, is what that would be so aka, ms sp docs column, formatting, and if you haven't checked that out right, if you go to the advance or the formatting syntax reference or you can find out all about those operators and so on that I've just mentioned uh down here in the expressions section right so there's a ton of operators you can use uh those are those removed from append two I talked about if you wanted to start working with array type objects, whether you're saving them or not, or you're, just iterating through them.

A

So anyway, all let's say this stuff is getting better and better all the time. There's all sorts of new things being added behind the scenes, so stay tuned for more list formatting stuff, and I will kind of wrap up the one part of the plan demo.

A

That was this. The is selected. So if you actually just take that as your text content you'll get true, uh it's actually lowercase true and lowercase false uh when it gets converted to a string, but it's very easy to use right just by itself. So you say, if is selected, you don't need to say, is selected equals. You know true or anything like that.

A

You just say is selected, but you could use that within you know the ands or the ors to wrap that up in kind of an elaborate expression, and the main thing is obviously when you hide selection, it's uh it's a no go all right. Finally, a couple of resources for you right so apparently usb docs or sp dev, so that's fun for the full documentation um and then, of course, the icon side I showed off. There is the flycon.io where you can get a bunch of icons that can be used side.

A

Formatting, we've got another tool here, and this is more for if you're managing repos and then check out all our samples. And if you go to this link here, you can also get to that quick and easy link to see our groupings and so on to see samples that are showing you how to use these classes so the classes I showed you here are listed and you can sort of get an idea of what they do just based on the name.

A

We've got a slight preview of them, uh but you can also see any sample, that's using them and that's usually the best way to see you know how these interact, how they work together and so on. So uh that's it for me.

B

Awesome chris thanks uh and thanks for adding a little extra sugar on top there for the demos today, some extra stuff really appreciate that everybody loves to see sneak previews of upcoming and new functionality.