Microsoft 365 Community Column and view formatting tips, 17 Oct 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Getting started on creating SharePoint list formatting definitions with JSON

Description

This community demo is taken from the SharePoint General SIG community call recording on 17th of October 2019. In this video, Chris Kent (DMI) is showing how to get started on creating column and view formatting definitions for SharePoint lists.

Presenter - Chris Kent (DMI) @thechriskent

Official documentation for the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source community samples of different column and view formatting samples - https://sharepoint.github.io/sp-dev-list-formatting/

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

A

Hi everybody so I'm Christine time about of Knoxville Tennessee, now whoo as of one week and there's all that stuff. So let's take a look at some formatting stuff, so go to our classic warrior horses site right on the warrior horses site right: I've applied several different kinds of formatting I'm a horse. I come in here right, I've got this new status column. It's very generic here, but I want to apply a format to it. All right.

A

So I've seen a couple things on the call so I come in here: I go to column, settings and I format. This column I get a nice design mode thing, but I see this Advanced, Mode and I click on it, and it tells me to pay some Jason in here right. So I want to find some some over here in the sample. Repo and I'm. Looking at my groupings and I've got my categories and I've got a status column, so maybe I'd jump down to status or progress.

A

All right, I got a bunch of different options. I find this one text conditional format. I can see it. This happens to be very convenient. Leave my values how'd that happen right, so I want to grab this, so it's pretty cool I, just click on the Jason trial, alright and then I can without having to do anything crazy with github I copy.

A

This literally copy that and then I'm gonna go back to paste that sucker in here and when I preview that Wow it works, that's great and that's magic, and if that's all you need to do well, then there you go. You don't even need to know what all this stuff is. But what happens if say instead of done, you know our our status is the word completed right or instead of has issues, it's done be broke or something like that right. So now, I've got actually look in this craziness here right.

A

So now, I'm gonna understand this a little more like what is this Jason stuff I've just pasted it in here and how do I start editing and how do I make changes so that when I do something right and like I, don't need that :? It doesn't mean valid, I cry and I, scream or nay, as in this case right. So, let's take a look at some of this stuff, so if I come over here, we'll jump to our slides, so who is Jason? What is he doing? What do we need to know about them?

A

So we're gonna. Do a very quick, Jason, syntax crash course. Alright, let's take a look so the whole idea is this object right? It's just text! You can write it in notepad. You could write it in that tiny window. You can write in vs code which I recommend right, but all it is name value pairs right, so you got a name and you got a value. That's it all right! So objects begin with these squigglies here, there's a squiggly and a squiggly I'm sure, that's the official term.

A

All right, then each name: it's got this little colon between it. So you got your name in your value, put a little colon in there all right and then, if you've got more than one of those and it doesn't matter the order, you just put a comma between them pretty straightforward. Again, you can write this right there in that window. Now you can get a little more advanced right. You can start to get things like an array, so an array is ordered and you could tell it's ordered because it's got this more boring bracket right.

A

It's not got that cool squiggly, it's all square, so the order murders and you can put a bunch of stuff inside there right with more squigglies and more name value pairs, and you can keep drawing on the slides, I've just discovered zoom, it's very exciting, all right. So the rains begin with those square brackets. Values again are separated by that comma and then a value can be anything right. Almost all right. It can be an array like up here.

A

All right we got an array can be you know, direct quote here or direct string within quotes right. You can put a number, you click shoe or false, like in the debug mode, or you can put whole objects inside you're like in style blue. So now everybody here knows Jason perfect. So how does that actually apply to list formatting right? So, okay, we get the basics here, but how do I translate into that into making?

A

My pretty stuff pro with my I conned my colors and all that, but let's take a look, so here is a very exciting format. Right, here's a real format, programming. This is what it's gonna do. So if you've got a value like a text, column or a choice and the value is y is polar bear. If you apply this formatting, that's what you'll get all right. That's! What's gonna! Look like you kind of take a look at it. It's broken down into three elements right. We got a big deal.

A

I had a couple of spans, and this is the actual HTML that's gonna be generated on the scenes. So what's important to know is that we're gonna take one text format and we're gonna generate another text format of HTML and that the browser is gonna draw some things right, so you can think of this list. Formatting jason is just an HTML generator right which may or may not help you. It helps me quite a bit when I think about it.

A

That way and I often draw things out like this on a piece of paper before I get into all the squigglies and everything else right, because this is pretty simple one, but you can imagine you get a lot of lines in some of these, so let's jump in here. So the first thing is you'll see this schema and all the samples and you'll see it all over the place. It's completely optional.

A

So it's really helpful if you're gonna edit this and something like say vs code or the column format or anything else, because it will provide intellisense, just cut and paste that thing in there. But it's not required anyway. So I often leave it out when I'm just experimenting.

A

So the first thing you'll see- and this is always required- is this elm type right and if we look at that element of visualization here right, you can see. I've just got three boxes right: I got the big box. I got the two little boxes here and you can see. I've got an elm here, Elm type elm type here and an elm type here right. So every elm type you see each object is gonna have a basically a box.

A

It's gonna draw, so you got my first one div, because I just want to hold some stuff all right and then I've got this attribute right where I want to apply a clasp, so I've got SP field a severity, severe warning which really just means give me a pink background. So great naming convention. But there you go right, pink background and you can see it actually just adds that class SP field severity, severe warning right here.

A

Right there, the whole series of classes- you could add you could check those up, whether you just slap them in there and I've got my children right. So I wanted to break this up a little bit. Cuz I wanted an icon. I wanted some text so I have this children and I'm just gonna slap more of these objects in there all right. So the first one I've got a span and I've split this into two spans, so I can have an icon and I can have text, but I wanted to control the spacing between them.

A

That's why I've done two of these right now? If I apply this attribute icon, name right, there's a whole series of attributes, but this icon name all its gonna do is allow me to pick from thousand plus uij fabric icons and it's case sensitive, but I slapped that in there and I can do a an icon in this case have chosen the warning icon, which looks like a triangle with an exclamation point. But if I want to do that, conditionally I could do all that kind of stuff.

A

So that's pretty cool I want to make sure that it's not right up against the edge right. So I really wanted to make sure that you know especially my background. Color I had a little Spacey, so I do this padding-left. It's just a CSS attribute right of 4 pixels and then I want to put my text here in this case. I've got another span, but I have my first kind of magic text here or my placeholder field. So I've got my at current field and that just means whatever the value is, whether it's a text.

A

It's a number. It's even a calculated value. All right I could slap that in there if I wanted to reference another column from the view, I could certainly do that. All right. If I wanted to write a complex expression, I could do that. There's a series of these placeholder tokens. There's things like at me, which is the current users email address all right. Now, it's the current date and time at render, and so on.

A

Right, so I can just put that in there and I know that when it renders for each one of these rows, it's gonna swap that out and put whatever the value is in there. In this case, it's wise, polar-bear and again I wanted some padding here, one of those 4 pixels of padding all right. You can see all this time. All of this which looks kind of complex if you're looking at for the first time, is just generating this HTML down here, which then generates this pretty image up here.

A

Okay, now everybody understands Jason perfectly and then go write all they need to good, ok, so check out the full documentation on all the things that are available to you and column formatting and view formatting. You go to SP dev column format on the AKMs there.

A

If you wanted to see that specific sample, it's the text conditional format, but again we've got nearly a hundred samples in there to do all sorts of things and I highly recommend, starting with the samples and then tweaking from there sorry, so you don't necessarily have to start with all that JSON syntax we just went through, but the idea is it's not near as scary as you think, and you've got specific questions about Jason in general.

A

Writing go to Jason org and check out some of the examples and understand some of that format and everything there and that's about it. That's everything. I got thanks. Everybody awesome.

B

Thanks Chris, these are really really useful as well, because the basics of getting started is insanely important to get covered, and so that people can actually get unplugged on using these things, so really really really impressed on.