Microsoft 365 Community Column and view formatting tips, 21 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Column formatting design mode

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 21st of February 2019. In this video, Chris Kent (DMI) shows how the column formatting design mode works in the modern list UIs.

Presenter - Chris Kent (DMI) - @thechriskent

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

A

I'm Chris Kent. That's me, that's my picture. That's been Twitter tweets and all that stuff all right. Let's take a look at what we're talking about today. So I want to talk about column, formatting design mode. We talked a lot about JSON and all the fantastic and cool stuff you can do with that. But right now there is some nice little wizards that are directly in the UI. You guys haven't seen these.

A

These are a great place to start they're, also a great place to learn, what's being done behind the scenes and you can customize from there. So you get these kind of options for date/time columns, choice, columns and yes/no columns, including the calculated versions. So if you've set your calculated columns to be the type of day time or but moving yes/no, these will show up as well and work for you. So what happens is when you choose these you'd use that format column.

A

We'll take a look at that you get this edit template button and when you click that they all pretty much work the same way. You can pick one of these pre-selected classes here for colors. You can apply those based on certain values and there's some cool options there and the nice thing is because of the opacity. That's a part of these. They work very well in the dark theme. So you don't do any kind of adjustments there they're just gonna work. They are not tied to your theme colors, however.

A

So if you want I'm get theme, colors, that's a whole different discussion, which we talked about here and at any time you can switch it back to JSON, including all the changes you made in the wizard. So here's the predefined classes we've had for quite a while. If you guys have seen these so we all the severity classes really just set a background.

A

Color I kept the data bars it's a nice little line at the top, and that is theme specific and you guess these other ones here and as always, I highly recommend using the UI fabric, color and typography classes to match the theme.

A

So again, if you're wanting to use some of these, you can use these to kind of setup, so a design mode, and then you can swap out those plots or some of these theme classes, which we'll take a look at and last thing to note, really helpful naming conventions behind the scenes is all of these colors are actually classes themselves, so they have really catchy names like SP, CSS background color, neutral background 50, so everyone's gonna remember that right and you'll notice that the background does not follow the same naming convention self extra awesome there, but at any time you guys can use these.

A

So let's take a look at what that looks like oh here we go back over. Oh no I can't see Tim's there. We go. Ok, so we're here on our warrior horses site right. We want to just do some quick customizations to our new assets transcripts, alright, so over here we can do things on the dates, so we say the recorded date. If we come here to format this column, you know we don't get that same box we get on the others. We can always get to about it in advanced mode.

A

We can paste our adjacent here. We could take from any of those samples over here, but instead I'm going to go back to design mode, so all I do is I hit edit template and notice. I immediately get these fancy colors behind the scenes and they're all based off of today, which won't surprise. That's the ad now magic string behind the scenes right I could choose to change that. You know certain colors. It's it's pretty easy to customize all this, however I need to alright I can take a look here.

A

I can also switch this so instead of today, I can put a specific date alright. So if I want to say which one tomorrow right, we can do that and I can switch all these around. So there's some real power to this alright and at any time I could say: Advanced, Mode, alright and you can see, what's been generated for us. So it's basically a giant switch statement, but it's using the old abstract syntax tree, so I've got the operator and the operands right. You may not have known that.

A

You could use the colon instead of the question mark they're both equivalent, but you come down here and you can start to see where they're using these classes like right here, SP CSS background, color, neutral background, 30 again very classy, but if I wanted to switch that out right, so I wanted to go to SP field severity des severe I was a warning that sounds right. Let's preview, that it's not right. So let's go warning.

A

Yeah there we go so the idea here you know, could easily swap it out for those colors if I won't want it right. If I want to come in here, instead I wanted to say Ms eg color red dark.

A

How do you do that as well and you search see we can start using with theme classes all right if I didn't want to use red, dark, I could certainly say, theme primary and they get my nice, beautiful brown and so on all right, so you can begin to use these things for all that you can switch back to design mode. It's gonna warn me that it's gonna lose all that. Well, then, I can go back in there now. So that's for date times all right.

A

Moving over here we also the exact same thing for boolean's right. Let's hear that come over to compromise was the acid compromise. Where you format this column, you can see it's the exact same kind of thing, a few less options in terms of you know we could choose here, but I can use the nest, know all that and then I can also do the exact same thing for choices.

A

So if I've got my status over here, so just format this column, you notice it gives me all different shades of blue Thanks, all right, but again, I can come in here and I could switch those out as well. Now one thing to note: it's going to apply on that will keep one is that that will not work for your multi choice, columns right, so it'll act like it's going to see for Malthus column. You come in here. You notice none of these work unless they were single select.

A

Now, if you'll go back to our demo from two weeks ago that recording there we showed you how to deal with multi select choice columns, so you don't have to get a little more advanced, but the design notes not gonna work, all right, yeah, good, I'm, glad someone remembered it. That's good! Someone paid attention. It's very exciting, and the other thing to note is again: we've got this date. This is a calculated data Stu days later, so it's just a calculation, but you could do the exact same thing so does not matter.

A

This is a calculated value for a long time. Calculated values have not been supported, but they're listed is not supported. Still. However, there are a couple of minor limitations, but for the most part you can reference all calculated columns. You can apply formats to all calculated columns and even the out-of-the-box Wizards apply to calculated columns, so that actually opens up a lot of possibilities to do some of those advanced formulas. You may not have been able to do before.

A

In fact, we just have a sample added yesterday from April that uses a calculated column specifically to submit, like date, text to get an exact format. She wanted so check that out. That's our birthday format. That was just added all right. That's all I got for today, and hopefully I want to come back next time. We'll have maybe some alternating rows to show you. Okay, thanks.