Microsoft 365 Community SharePoint, 17 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List and column formatting magic: Out-of-box UI design mode wizards

Description

In this 14-minute Site Owner-focused demo, Chris Kent steps viewers through the latest list formatting functionality in “design mode” wizards. Formatting capabilities include: view, date/time, choice & multiple choice, number, and yes/no. Capabilities are supported with “conditional” types – rules. Change colors, styles, icons, fonts. All this formatting through UI and no json! Of course you may switch to “Advanced mode” to view/change values in json statements created for you or insert your favorite json sample code. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 17, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Doc - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• List Formatting Samples | https://aka.ms/list-formatting

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

I'm chris: let's look at some stuff, I'm good all right, so we're on our classic warrior horses site and we're going to go to a list we've seen before and go to our disasters list where the horses track potential disasters and their plan to avoid them, and you see, we've already got a little bit of formatting with our classic font. Awesome, pooh, storm uh icon, we'll be covering that today. Instead, I wanted to cover some of the stuff you could do out of the box.

A

So this is some custom formatting, but what if I just wanted to throw something on there? Pretty quick? So let's take a look. We've looked at the design mode stuff before, but there's been a lot of improvements and I think it's worth taking a look at again. So one of the first things to do. We add a new choice, column and we'll call this severity and right away. You'll notice, we've already got some formatting you'll see that from now on, choice fields are using formatting by default.

A

So that's pretty awesome. So, in this case, we'll throw a few of these in here, we'll see uh what in progress sounds good all right and we'll call this one done all right in review kind of our classics here.

A

What another one here we'll call this one uh has issues: let's have one more here, we'll call blocked okay, so you can see I've already got some color choices here I can go ahead and do my formatting before I've even created the column, so I can say no fill and hit save and so, let's add uh some sample data here, let's go ahead and do another column real quick, so we can get that right as well. Let's add a date and time we're gonna add a due date.

A

Okay, we'll just save that. So if we edit in grid view- which is our old, quick edit, all right, much better name, let's go in here, we'll just kind of set these uh quickly. We'll say that one's done right. This one is interviewing you'll see even here, we've already got our formatting showing up right here inside the grid view as we set these, which is pretty awesome.

A

So we'll save this block to let's say this: one has issues, I'm sure we just got them all here, and this one is in progress, sounds good and, let's add some dates here. So we'll put this one a couple days ago, right we'll say in review is was really a while ago.

A

You know these things are are due a while ago, this one's you know due in the future sure this one, I will say, is due today and let's throw one more on there. Just you know way off in the future somewhere. Okay, that looks great.

A

I did it right here, let's see, actually, let's make the outs good okay, so let's exit the gridview. So now we've got some data to work with, but you'll see, we've already got formatting and all we did was create the column.

A

Now, if we come in here and go to column, settings and format this column, you can see it's chosen by default. This background colors design mode, which is nice right. It really just adds the nice rectangle behind it. Instead, I'm going to switch that over to choice, pills and you see- I can hit this edit styles now. I've got some options here. Let's make this a little easier to see, we'll make that more focused all right. So if we've got this, that's cool, so our in progress is blue. Maybe we don't want that.

A

So again, we can change those colors here, but you'll notice. We have this other piece right here called more styles, so if we click that we get these extended styles, so we can do things like add these icons right. So for whatever reason, microsoft and all their wisdom has decided out of the 2000 icons, you can choose between 13., but we'll see a way to change that here in just a little bit, but either way. This is amazing right. I can change all sorts of stuff. I can change size boldness, the font colors.

A

All of that I've got this nice breadcrumb navigation up here to easily get back and forth. So I can go in here. Let's add icons for each of these we'll put a check mark, but we can go back into styles. Click. This for in review more styles, and let's put that there all right, we'll go back one more now. We've got has issues and, let's add an icon for that. One. We'll say that that looks. You know what let's do this one for has issues that sounds good now we already use that.

A

Let's use that okay, so we come back here and we've got our blocked. Now, let's put a big x for that. Okay, so now look what we did there so now we hit save. Never once do we have to see any json or any other fancy formatting stuff, complete ui wizard.

A

To do that, which is awesome and later, if I come in here and let's say I need to add a new, a new one right, so I go to column, settings and edit you'll see again it's all integrated right here and I want to add another choice.

A

You know, and this one will call it canceled right and we'll hit save all right. Let's add, uh let's add a new item here all right, so this one will call it uh ghost horses.

A

Unresolved issues right and our plan for this one is uh go on a fun, loving adventure to solve the mystery. You know, return the treasure and restore the declaration of independence. That makes me laugh. Okay, all right now we can choose our severity. Canceled, uh we'll put a due date of I don't know something just way out there right. So this way out from the future we'll save the in october. So we save that you see immediately.

A

It's got this new thing, it's all taken care of, and in fact, if we go to format this column, you can see we have a new option here. It's automatically picked up our new under the choice here we can come in here and we can change that as as needed right so for cancelled. Maybe we want this nice gray and we'll add a you know. Let's add an icon of some sort: let's go thumbs down. That sounds great right, so you can see maintaining these and adding. These is super easy using the design mode.

A

Wizards right, I didn't have to do anything crazy um and I've just got all that and as I as this list changes, I need new status right or new severity fields for my choice fields. All of that just kind of works. It works very nicely. If you've got a fill in your own right, you can have a style defined for that really really cool stuff right.

A

In fact, at any time, if I want to jump over, you can so if I want to go a little more hardcore right, I want to use one of the samples or something like that. I can format this column and you'll see down here. I've got this advanced mode. Now I can switch to that and you'll see. This is what's making all that magic happen. Now. This is using the old uh ast format, so maybe a little different formulas you used before.

A

But if you want to run in here, so you can see these are all the background colors. So this is for the done right. Maybe we wanted it the different shade of green. We could say, ms, you know bg color, we're going to just say, green light. That sounds exciting right. So if we preview that you can see, there's a slightly different shade of green or if we come down here, because we don't like you- know our 13 icon choices we can see. So this is our in progress instead of trending 12.

A

Maybe we it's in progress, we're going to call it heart fill that sounds exciting right. So there we go. So that's where we can use that as a starting off point and do that now. One thing I'd say: one big caveat here is the moment. You save that and you're no longer using the wizard.

A

You lose a lot of that really cool stuff right. So if I edit this column, I now have that traditional choice, fields right because I'm doing more advanced things I no longer have the ability to you know, see that thing and add new ones. If I switch back to design mode, it's going to warn me, that's all gone and look. It is all.

B

A

For now, I'm going to cancel right, but the idea here, though, is use the out of the box ones to do amazing stuff, and if you want to stick with that, you're going to have some options, but if you want to jump into more advanced stuff, you certainly can. So, let's look at another one here. I have a classic one, so called settings and format this column, our due date come over here and we just choose format dates.

A

You can see that it's going to develop some rules here, so by default, it's going to say if it's before today right make it yellow. If it is today, make it green and red now normally, I would probably make this one yellow right. So, let's make that yellow right, because you got last minute thing right now: you're good, because it hasn't come up yet right, so easy easy to do. Right and again, you can do the advanced stuff. We go to the more styles now.

A

What if I want to reflect a little more right um like who cares? This is overdue right, it's or this one's overdue, because it's cancelled right. I don't care, I don't want to mark it as red. I don't want to draw people's attention to it, so how can I do a little more advanced stuff without having to jump into jason?

A

So if we go back here instead of this, every column type has this kind of generic rules called conditional formatting, and so let's set this up so we're going to show all the values as right, so just by default, we're not going to do anything right. So that's kind of the default but, let's add a rule, so this rule we're actually going to look at another column, not due date.

A

Let's look at severity and we'll say if it's equal to let's say done right or if severity is equal to, let's say blocked all right or you see I'm just building these rules right in the ui I can see my severity is equal to and I can say canceled right so any of these three that I would consider like no longer does the due date matter. I come down here and now I can specify a specific value for that right. So in this case we're gonna come in here and we're gonna.

A

Let's go more styles, so we can change that background color. We don't want a background color and we're going to change it. So it's kind of grayed out a little bit and, let's add a check mark right just to show we don't really care about those, but it still shows that data.

A

Now, if we come back here, we can add another rule right, so these rules will be applied in order. So, let's add a rule. So if that didn't apply, let's get this rule. So now we're going to say: let's look at the actual due date. I want to say if it's you know before today, we can use a specific date. This time we're just going to use today, all right, so if it's before today, in other words, we're overdue.

A

You know let's come in here and let's go more styles and let's actually set that fill color to whatever this pink and make it bold all right we're going to put a big. uh You are bad kind of icon on there right and font color, we'll just make that you know this nice red right. So now we've got our due dates that are overdue, but they aren't marked as complete all right. So that's pretty awesome.

A

Now if we come back here, let's add just a little more so let's add another rule all right so now, let's add a rule for uh if the due date is today right. So this is the day it's due all right so equal to today, I'm going to show this item. The other yellow looks good, but, let's add a you know: let's go more styles, let's make it bold. Let's add just a calendar icon right so now we have the idea that oh, these are the ones.

A

I've got to get done today right and then, let's add just one more all right. So we add one more rule here and we're going to say if the due date is after today right so now, you've still got time to do this. We're just going to come in here and we're going to say more styles. Let's remove the fill all together and let's make it that nice green right and we'll make it bold, so we can see it better and we're going to put a thumbs up because you're on track.

A

There we go and just like that, we've created some pretty complicated rules and never once do we have to jump into the json unless we choose to, and you can see that's just going to work. If I add new values in here tomorrow, when I come back to this list, all these will be reevaluated right. So if this one has been marked as done, blocked or canceled, the sudden they're going to be red and so on, so this acts as a really great way.

A

uh You can just use these design mode wizards to create all sorts of. You know: fancy rules without having to really really jump into the formatting and the best part is you could create all these rules and then jump into the formatting. So all the you know the switch statements, the if statements are already built for you and you can just change those values. So if you want to use a very specific shade of red or a different icon, you can jump right in there and do that all right.

A

So let's review real, quick, all right so design mode all right. So these are the various wizards that are available right now, there's also one for uh view formatting, which does the alternating rows, which is a nice addition, but every single one of them, including the view format, has this conditional, formatting type, which allows you to define those rules and they're. You know, building those is pretty straightforward. You can do the ands or the ors and kind of loop them all together again.

A

The the main thing to note is they apply in order, so the first one is going to apply and if that doesn't affect it, it's going to go down the list from there all right.

A

So when you go there again, you're going to just be presented with that by by default on several of these column types you set edit styles and you've got all sorts of options. You know these are pre-selected, color classes, which means you can swap them out later. With your own classes, they are not your theme colors. However, there is options to choose your theme colors for the font color, but not for the background color inside the ui, for whatever reason, but they do look nice in dark mode. So it's hey!

A

You know it's a trade-off and then, of course, these extended styles, where you do all sorts of stuff, which is what I'm really excited about. We didn't even take a look at some of the border options. The icon alignment, but check those out just give them a give them a try play with them. One thing to also note for those that really want to jump in there. Every single one of those represents a class.

A

So it's not just setting bold right. There is a class to make that bold. So, if you wanted to use those same classes in your own formats, apply them here, take a look at it and you can too all right and of course, you can always switch json. If you want to take a look at some of the samples or some of the other stuff, all right. So this here you go. Here's the documentation check out our samples over 100 samples out there on how to do all this stuff.

A

If design mode isn't quite cutting it for you and of course, if you've got some of those icons, you want to use more than those 13. You can check out flycan.io to find your icons pretty easy all right. That's all I got thanks.

B

Chris really really great stuff, and it's good to always recap that out of the box capabilities are evolving all the time, so it's good to actually go back and see what's always possible there, so, rather than ending up doing extensibility and json definitions- oh I can do this already wow, it's a good example of a evergreen capabilities for sure. So thank you for that.