Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / Column and view formatting tips / 8 Sep 2020
Microsoft 365 Community / Column and view formatting tips / 8 Sep 2020
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: PnP Virtual Conference - 09/2020 - List Formatting Magic

Description

Did you know you can quickly and easily provide dynamic visualizations directly in List views? Both non-developers and developers can change how fields and rows look in modern list views. We'll cover the basics of getting started and provide tools and resources to take your lists from simple tables to meaningful views that create joy and happiness in the hearts of your users.

Speaker: Chris Kent (DMI) | @thechriskent

Supporting materials:
• Use view formatting to customize SharePoint - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
• PnP SharePoint List Formatting Samples - https://github.com/pnp/sp-dev-list-formatting

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hey everybody welcome to list formatting magic, let's get going here, so uh my name is chris kent, I'm the office 365 practice lead for dmi and I'm a microsoft, mvp and office development. A couple of fun facts about me: I've got three kids they're all school age and they're doing virtual school via microsoft teams right now. So if you hear them in the background, sorry about that I've got uh one cat named tomato and, of course, as this is pre-recorded, I am possibly dead at this point. uh I'm not really certain on that.

A

So I'm going to go ahead and ask future me to confirm either way through the questions and we'll just hope, I'm not a ghost regardless. uh I do a lot of tweeting over there on the twitters and uh right on my blog here, chriskins.com so feel free to check those out all right. Let's go so today we're going to talk about list formatting and magic.

A

However, this is a more of a getting started talk, so this will be an introduction to what column formatting is and view formatting. I'm going to show you. uh You know why you'd want to do it and how you do it, along with some resources to make that even easier and we'll round things off with some developer guidance.

A

So if you're, an architect or developer and you're wondering when would I use this versus say something like the sharepoint framework we'll cover that here as well so list formatting the modern list view or you know, if you go to microsoft list and you create a new list, a lot of those can sometimes look a little too much like just a spreadsheet in the browser. So what can we do about that right and that's?

A

Where list formatting comes in it's going to allow you to quickly and easily to really make things a lot easier to use, for instance, instant meaning, so the idea of instant meaning is when I come to this list, it should make more sense than just a wall of text across rows and columns. So one of the things you could do, for instance, is if you've got like a task list instead of a yes, no for complete, you can turn that into check boxes right.

A

It makes it very obvious that it's a task to complete just to make it much more obvious, what's happening. You could also do cool things like when the due dates passed due. You could turn that red you'd also make stuff look really nice, so you can incorporate all the themes, whether that's the you know, all the preset themes or the dark themes, or even your custom themes, and if you, you know, depending on how you do that, uh when corporate decides, they need to set a whole new set of branding guidelines.

A

Your formats are going to look just nice with those and, of course, we're using all the same classes and icons that microsoft is using. So it's going to look very nice, along with everything else in sharepoint online or microsoft, teams or microsoft list or wherever it is we're displaying these, and you can also do really cool things like when I come to this list.

A

All the items that are assigned to me chris kent are highlighted in blue right there, whereas when someone like dan gump shows up all the items assigned to him are highlighted in blue. That way, I can customize the experience per user all right. I can also do cool things like. Instead of just a percentage of complete, I can show a dynamic progress bar. Maybe I want to show that as a pie chart- or maybe I want to show that as a gauge right.

A

All these are options for us, which could really make our list much easier to understand. Now before we really jump into things, I want to call out our list formatting repo over in github. It is full of a 100 plus samples across column and view formatting. You don't have to install anything. You can cut and paste right in the browser right into your list very easy to use everything I'm going to show you today is in fact a sample, that's available to you, so you can go over there.

A

You can grab that and start tweaking it or just using it, as is they're all free. So let's talk about what is column formatting when you first go to format a column, you go to the column menu and you say format. This column you're going to be presented with some of these design mode wizards. So this is something that microsoft has provided for several different column types. They all get this conditional formatting, but really it's just a series of rules and formats.

A

So, for instance, we take a look at one for like dates, if you click that edit styles you're going to see they've gone ahead and suggested three different rules for you. So if it's before today, if it is today or if it's after today, you can apply a color to it. That makes it very obvious: well, those colors, by the way they look great in uh dark mode and everything else so they're a great way to go.

A

uh However, they don't really match the theme colors, but maybe you want to do a little further than that right. That's when you click this more styles button down here and you're going to see you can actually really get in there and do things like apply icons or borders.

A

You want to bold it change the font color all that stuff based on these rules really really powerful at any time. You're going to take that as a starter, or if you want to take some of the samples we've put together, you can jump over to this advanced mode, just paste that json right in there.

A

So when I say json that means javascript object, notation, you know sounds a lot scarier than it is in this context. There's nothing to do with javascript. It's really just text, so we're going to come back to that in just a little bit, but for now that's kind of how everything's stored and those design mode. Wizards are going to generate that for you. But if you want to put your json in directly, you can do it in the field settings or you use that format. This column menu.

A

You just paste it right there and everything is stored with the field. That's a site column! You apply it there anywhere. You use that site column across your site, collection that same format is going to show up, so you can have that due date and no matter where people put it in their list. It's going to turn red when it's past the current date, which is awesome. It also means that it's going to support all of your standard tools of using site scripts or pvp remote provisioning. All that's going to be fully supported as well.

A

So let's go ahead and take a look at some column formatting here we've got a pretty standard list, we have a title column and we've got the severity column, which is just a choice column here now, if I come in here and I choose the column and I go to column, settings and format, this column you'll see those design modes. We talked about so for choice, columns, we've got three and for this case I'm just going to choose choice pills.

A

So if I choose that you can see it automatically get colors assigned, it looks like that nice new pill format. Now I can go a little further and hit this edit styles. Here, let's say for in progress. I actually don't want that to be a color at all right. So let's make that clear and in fact I want to add some icons here. If I click on this and I go down to more styles and say for in progress. Let's add this nice trending up icon and you can see that automatically shows up over there.

A

We go back and we say for done. Let's add an icon for that one as well. We'll add a check mark and we'll go back to interview and on this one we'll add an icon as well. Let's see, let's do that! Error, nice info label there go down to has issues and we'll add one there and again what has issues we'll just do the triangle warning and finally, we'll do blocked and for blocked. We'll do this nice x here.

A

So if we save that we see everything is in place, it all just looks great, and so that's a much better looking list, especially if I've got multiple these uh you can see that design mode was really great. I never had to see any kind of that json or anything else we talked about now. If I come in here and I go to column settings that I edit you'll actually see that these are fully integrated here with the edit choices panel.

A

So if I add a new choice, so let's say if I wanted to say canceled right, so I want a new status of cancelled. I could pick the color right here. So in this case we'll pick like a gray. That's nice, we'll save that! Let's go ahead and add an item all right! So we'll just add a new item here, we'll call it terrible idea and we'll say it's going to be canceled.

A

So even in the quick edit, we can see that things are being applied, exit the quick edit. So I've got that now. I wanted to add an icon to that all right. So I go to column, settings format, this column and I can edit styles. You can see it automatically picked up on my new choice, column here so just like before go into more styles, and in this case let's say for cancelled, we want to add womp thumbs down we're going to have the dislike icon. We'll just save that. So very straightforward, very easy!

A

uh You see it's a it's a wizard here kind of put this all together. It's awesome, but it is kind of an on rails. Experience right, so, if we want to see what can we do going a little further beyond that all right? So let's take a look over here. Let's go over to our classic warrior horses site. We've got a things list and we go over here. We can see. We've got several formats applied right. We've got that check box.

A

We mentioned before uh we're showing multiple people in this face, pile where we saw the first three, but if there's more than three then we're going to go in here. We're going to put you know, plus three: you can see. You've got the hover card showing up here, so we can see all the details there.

A

We've got a due date, that's shown in red and that's awesome right. So these are all formats that are coming from our samples, repo and in fact, what if we don't really like this progress bar and we want to go a little further than that. Well, if we head over there, our list, formatting repo, is divided into column, samples and view samples.

A

If we click on the column, samples and we scroll down here, we'll go down to number and gauge we'll click on that json file, we'll just grab it right here in the browser we're going to highlight everything, I'm going to right click and we're going to copy and we're going to head back over to our site, little column, menu, column, settings format, this column and I'm just going to take.

A

What's there copy over it and I'm going to paste what I just copied and hit preview on that and wow now, we've got a brand new gauge. I didn't have to write any of this and it just works right. It shows me exactly how progress is going here, so very awesome, very engaging so here we've got a couple more examples, for instance we're detecting the first part of a international phone number to display the correct country code flag.

A

Here we have a multi-choice field generally, when you pick those right, it goes into a comma separated list, but it's in the order that they got picked, which makes it pretty hard, if you're, just trying to scan that list for exactly you know who wanted beer or who wanted uh juice right. So by putting here in this kind of table format, we can see that very easily. In this case, we've actually built these interactive buttons as columns here. These can do all the things you do before so generally.

A

If I want to edit an item already either right click and select editor, I click it here and I click edit or I could instead just include a button right here. That's just edit action.

A

These are all awesome, but the most powerful one of all is this flow action. So if you want to launch a power automate flow, you just click on this it'll actually launch. The flow panel here you'll see that it loads the information from power automator right here, so we've got the title: the owner and we've got. You know the description here and then through the format, I've actually customized this panel, I've set a custom title and a custom button, and I can even decide which flow I wanted to execute for this item in general.

A

What you have to do is come to automate you'll, see, there's nothing there. So it's not super obvious to users. But if I come down here, I select an item. I go to automate. Suddenly I have this emphasize it flow and that's okay, but what if I've got multiple flows depending on the status by using formatting, I decide exactly which flow this should launch, and then I can even customize that panel right. So we can see if I go to column, settings and format this column, you can actually see it right here.

A

So if, instead of like the button saying do it, the run flow button text will now say wow and we'll just save that we'll close this format and now, when we launch this, we can see now the button says wowie. So this allows us to really make things much easier. Your users don't have to know what flow is, or power automate or anything else. This is how they're going to launch whatever action you want them to launch at this stage for that list. Item in this case we'll go ahead and run that all right.

A

So when that ran behind the scenes, all it did was add an exclamation mark to the title column and when it did that we have a format set up here to automatically turn the title bold and we actually have a view format which we'll talk about in just a moment. That's adding a row class that makes the whole thing blue, you'll notice. We didn't refresh the list, we didn't do anything else. As the list item got updated behind the scenes, format was reapplied, which is pretty awesome all right now, we've seen column formats in action.

A

Let's take a look at view, formatting, similar to column formatting when you first go into formatted view, you're going to present with some design mode options. It's just a couple for now, but there are more on the way and you do almost the exact same types of things except there's. No icons available here view formatting is a super set of column formatting, and that means that everything you could do in column, formatting all the same syntax and everything else you can do in view formatting as well, there's just a few extra bells and whistles.

A

Now you apply this directly to the view. So, if you go to that view menu, you can go down and select format. Current view and you'll be presented with that panel. Now, first you'll see the design mode, but you can click that advanced mode and paste json directly there from our samples, repo now unlike column, format in the store with the fields. These are stored with the views themselves, which is really really powerful, which means you can have multiple view formats for the same list.

A

So you could have you know a dashboard for management along with a tracking list for employees all using that same list data with completely different formats applied as needed.

A

While you can use this conjunction with column formatting, if you're just doing some of these row classes like, we saw the rows that were highlighted for the current assigned person. If you use the row format style, it's going to overwrite any of your column formats.

A

So let's take a look at the kind of two flavors of view formatting. The first is row class you're going to apply classes to each row, so these are set of predefined classes that we apply conditionally across all the rows. You're going to use that to add a border or set the whole thing, a certain color based on whatever is going on inside that list item.

A

But if you use a row, format that'll override using a row class and now you're responsible for the full rendering of the row, which is both pretty scary you're in the deep end now, but it's also extremely powerful because you can control everything there. Now, alongside that, you'll see this tiles or gallery view. We've long seen this in the document library. Now this can be done in addition to your row class and row formats or can be done completely by itself.

A

You can even set it as the default display for a view which is really really powerful. This allows you to view your items as tiles. Fortunately, coming very soon, there's the tile designer, so the tile designer will allow you to select which columns you want to display. If you want to show the labels you want to show previews of images and so on and reorder very easily without ever having to touch any of this kind of format.

A

So, let's take a look at some view formats. We've got a standard list here with lots of columns and several rows and we'd like to make this a little easier to read. So if we go up to all items and go down to format current view we're going to see, we've got a nice design mode. Wizard here, alternating row, styles pick that and you can see automatically I've got those nice shades on every other row. I can click edit row styles and I can change whatever color.

A

I want that to be we'll make that a nice blue and if I save that close this, you can actually see that as I sort things it continues to do every other row pretty awesome here we have another list. This is kind of your classic classifieds list, and this is okay. All right, you got the information here, but what if we can make this a little more interactive, go up here? We checked our view. We've got this view here, which makes it much more obvious.

A

What's going on, we can click on items and see the details and we've got ourselves a miniature application: we've hidden the list headers and disabled selection, but we've still provided things to delete or even share these items directly inside the view format. Here, we've got another list with a lot of information in it about individuals and contacts, and we can see we can have a nice view. Format here called cards and in this case not only showing individuals, content, information providing buttons to edit those we have maps showing up here.

A

Information is showing conditionally and letting us launch into that, and it's a much nicer, cleaner way to look at this, and in fact this is a responsive design, but on the same list because view formats apply to the view we can actually have another format. So in this case we've applied the birthday format and we're using that same information displayed in a completely different way. Here you've got a classic faq list for frequently asked questions, and this is okay to read right, you've got your question.

A

You've got your answer, but this would be a lot nicer to provide some formatting. If we apply a full row formatter now, we can see we're making this much more obvious. What are the questions and what are the answers? Here's another list we're committing those that have gone on ahead of us and we've, provided that tiles view. So when we switch to tiles, you can see that same information is now displayed in a much more dynamic way. If we want to make that the default, all we need to do is save this view.

A

Here's another example: we've got a pretty simple list, but we'd like to display this in a much more dynamic way, so we've applied a format that takes over the entire view and provides some animation and additional details and we show conditional flow buttons that can affect our dashboard as things update behind the scenes. Now that we've seen examples of both column format and view formatting, let's get crazy. Let's get nuts, let's write our own formats.

A

Let's take a look at what's involved in that I highly recommend heading over to our github repo for list formatting 100 plus samples there. In fact, if you go to this link, you'll be taken to our sample gallery, the sample gallery has not only guidance on how to use the samples themselves provides listening to those samples by category by author by field type or even by operator. By far the best way to learn how to make your own custom format is to take a look at all the great work.

A

That's already been put out there by other people, it's all for free grab, it copy it paste. It start tweaking and matching up the various formats you'll find that looking at what other people have already written is the easiest way to understand how to write your own now in column, format and view formatting, there's very good support across the board for all the field types you can use those. However, there are a couple you can't reference, whether it's in viewforming or column formatting, the biggest one of those is managed metadata.

A

There are a couple other ones as well, so if you turn on ratings for a list, for instance, you can't get all those field types necessarily by and large everything in your list can be referenced inside your formats and you can make decisions based on them or display individual properties such as, like the hyperlink you can display the description or the url. You can grab the person, get their email or display name as needed.

A

Now we talked about jason before that's that javascript object notation we're not going to go into depth here. We have a video on the youtube channel that goes into depth on this gives you this crash course. The main thing I want to point out here is everything you're. Seeing there you can certainly write a visual studio code or visual studio or whatever ide you know makes you feel better, but you don't need to. You can write it directly in notepad. This is pretty straightforward stuff.

A

You got squiggly brackets, you got square brackets and you got things in quotes with colons in between this will start to make a little more sense as we get in here, but jason isn't scary, despite its scary name. So an important concept to understand with formatting is how it works behind the scenes. So when you go to that column menu and go into column, settings you're going to format this column- and you take one of the samples from our samples, repo and you're, going to cut and paste that directly into the panel what's happening.

A

Is that format is being evaluated on a row by row basis.

A

So you get all the power being able to reference the other columns as long as they're part of the view for an individual list item, but you can't reference previous rows or next rows, but things work very well in terms of scrolling down. So, as you continue to scroll and you have that infinite scroll, the formats are reapplied on a row by row basis and in fact, as list items are updated behind the scenes. Your format is reapplied as well, which can have the effect of having a nice live dashboard, but it's also extremely performant.

A

This way I've created you know formats across 100, plus columns with thousands of rows and I've not seen any kind of slowdown. When I run this in the browser, which is awesome.

A

So how does it really work right? So we've looked at this json stuff. How does that really map to a form on the left? There? We have an actual format for column formatting. This is what that columns ended up. Looking like just happened that that list item value was wise, polar bear behind the scenes. It's creating three html elements, creating a div and two spans inside of it. You can actually see that generated html right here. So let's take a look. How does this really get built? So this first line is the schema.

A

That's helpful if you are using something like visual studio code and you'll see it in all the samples, but it is not necessary. It's a completely optional field. I leave it out all the time, but first up we want to say what is our parent container in this case, we're going to say the element type is a dip. We just want a big box, then we want to say: let's make that big box have a class of sp dash vehicle dash very dash, severe warning, which really just means that nice pink shade right.

A

There there's a whole set of these classes, which see kind of those standard, colors and standard pieces that sharepoint online is using across the board. So now we've got a big box with a pink background. Now we want to add some sub elements, so we put those inside our children and so our first one is just a span which is a tiny box and we want to put an icon in there now. There's 2, 000, plus icons, and we all we have to do to get them to show up is write their name right there.

A

So in this case we're using the warning icon, which is where that triangle with an exclamation point, comes from and now we're adding some style on here. So we just want some pattern on the left, because we've got that background. We don't want that icon right up on the edge and then we add another span and this one we're going to put some text content, and this is where we're going to see our first placeholder token. It's this at current field and what that means is whatever the value is for the current field.

A

Just swap that in here, so in this case it's wise polar bear on this row, so just put that in there for the text and again we're going to put a padding left to four pixels, because we don't want that icon right up there.

A

So we mentioned this idea of placeholder tokens or I like to call them magic strings and the whole idea is there's a bunch of these and you're just going to take whatever that token. Is you swap it out for the value, so this is going to allow you to access other field values, that's what that field name represents up there, including their sub properties, and you also access to certain kinds of context like things about the window, the size of the window or absolute url for the current web placeholder tokens allow us to specify values.

A

We don't yet know such as me, which is just the email address of the current user, which is how we compare that to the values within the list item now. There are also expressions you can get really fancy with these we're not going to go into details with these right now. Just because there's so many, but if you're watching this as a video, just go ahead and pause.

A

If you want to take a look at this or you can take a look at the slides, those are available to you as well, but all this is also covered in the documentation and really. The whole idea here is to show you that you can do all sorts of really cool stuff and you get really creative with this. So you want to do some math bam, there's a bunch of math stuff. You can do now. If you want to do things conditionally, you want to specify some.

A

If statements right, you want to show you know the color is red. If it's this way or you want to show the color is orange. If it's this way, that's where these, if statements going to come in and you've got all these comparisons, you know less than greater than along with ors and hands.

A

If you want to make you know multiple, if statements, you can just nest those inside of each other there's also a ton of conversion operators. The values come back exactly the type they are. So if it's a date time, it's come back as a date time, but if you want to convert that right to a locale string, so it shows up correctly for europe versus the us they've used that two locale date string.

A

If person viewing is from the us they're going to see the month day year, if you're from europe you're going to see the day month year right, so it's a nice way to not have to worry about those types of things inside your format know that's going to show up the right way that you were expecting to for the user. That's using your format, there's also a ton of these text operators right, so you could do things like inspecting your text to see if it ends or starts with something you can even pad things.

A

So if you want to set a fixed format- and you want to add- you know a number of zeros on the end, so it all lines up exactly what you want. You can do all that, maybe you want to make your list items seem like they're shouting. Well, you can use that to uppercase, as you can see, there's a lot of opportunity here and you can combine these all within a single expression as needed.

A

There's also some advanced operators. If you want to work with some multi-choice columns and so on, and of course, there's even more operators such as, if you want to pull out, say the just the month part of the date, so you could do things like checking what quarter you're in say. Maybe your your fiscal year starts in june, so you want to see is june july or august, and you want to say that's quarter one.

A

You can add that custom logic just by using the get month operator, but you can even do some more advanced and awesome stuff, so hover cards right now out of the box. If you hover out person fields and show you all those extra details, you can do that too. So you can attach a person card to your own format. You could have multiples if you're, showing multiple people you can have multiple hover cards, show up on the elements you want.

A

You can also make your own custom hover cards, so you could use that, for like, say a custom drop down or a light box, all sorts of really cool stuff. You can do there. The live list updates. We mentioned a couple of times the idea behind the scenes. As list items get updated, your format is re-evaluated, so you can leave up a dashboard of things and as people are updating them or flows, are running and updating things.

A

You'll see those updates in real time and then, of course, there's row actions as well, where you can do things like the delete button or share or edit props all those types of actions, but the most powerful one of all is you can launch a flow and you can even do that conditionally. So, let's say you wanted to launch a flow based on the status of an item you may want to launch flow, a for a certain status or flow b for another status.

A

You can do that and really help direct your users into what they should be doing. You can even customize the panel that shows up so it doesn't just say, run flow. You can say get approval or add to crm. Whatever makes sense. The whole idea is to make this as user friendly, for what makes sense for your organization as possible.

A

Now there are a number of free tools out there that can help you with this, along with, of course, the documentation and our samples, repo, there's a website called flykn.io. If you go there, it's going to help you search those 2, 000 plus icons. That's a lot of icons to sort through things are categorized and tagged, so you can easily find exactly what you're looking for there's. Also a nice chrome extension called sp formatter.

A

If you install that it'll provide intellisense directly in the format panel and auto completion, which is very, very helpful as you're learning and then there's a pnp column formatter. This is a web part provided by pnp that allows editing and some wizards for column formats.

A

Okay, so that's really cool. There's lots of stuff you can do, but when should you use this versus custom development? So, let's take a look so primarily we're going to take a look at column, formatting versus sharepoint framework field customizer.

A

So if we take a look at it, the first part is customization. If you want to do conditional style, formatting right, it's supported in both have added. If you want to take actions, we mentioned there's some very specific actions that are on rails for column formatting, but with field customize. You can do anything. You want visualizations column format is primarily static. Visualizations, however, you can do the hover card. You do some hover styles, but really that's about it. You're not going to get real animations. Unless you want to stick an animated gif in there field.

A

Customizer do whatever you want page context. You've got some page contacts with column, formatting right, so you've got the now me window current web with field customize you're going to have the full context. So if you want to get, you know extreme details about the list, you're on the view id all that kind of stuff, you're gonna wanna go field, customizer, javascript, note for column, formatting, custom, css classes, nope, interactivity, nope, outside of some minor actions. You can run right field, customizers, yep, yep, yep yep. So why are we recommending this? Well?

A

The main point is the developer's not truly required for column formatting, because you can just copy and paste these, but the biggest thing is that anyone with designer permissions can add these to their modern list, views which is really really powerful. You don't have to go through a change management board. If someone decides that now they don't want that due date to be read, they want it to be chartreuse. Is that color sure you wanted to be that color? That's a simple update right! You don't have to redeploy. You don't have to package things up.

A

You don't have to hire an expensive developer or get some it's time in six months. You can just do it and go so. Ninety percent of all list, customization use case, could be covered by column. Formatting itself and another five percent is covered by view format for everything else. You use sharepoint framework.

A

Lastly, I want to make sure you're aware I do a demo about every two weeks, so every other thursday at 10 a.m. Eastern standard time. We also record them and put them on youtube if you're busy during that time, but it's a recurring list, formatting tips and tricks. So we've been doing this for well over a year and a half now covered lots of things all of these are available on youtube.

A

So it's a deep dive on very, very specific topics or it's an introduction to new features that are out there join us for those calls. If you can, you can ask questions directly in the chat. Lots of people are there to answer them, including me, but it's a great learning opportunity plus there's, usually a lot of other cool demos as well, be sure to fill out the survey, the link there is aka dot, ms slash pnp vc feedback, and uh thank you very much all right. That's it for me. I'm.

A

Out.