Microsoft 365 Community Column and view formatting tips, 27 Dec 2018

Previous Meeting

⏯

youtube image

►

From YouTube: Community Demo - SharePoint column and view formatting tips (multiple)

Description

Column and view formatting tips demo taken from the SharePoint dev Special Interest Group recording at 27th of December 2018.

Presenter - Chris Kent (DMI)

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

A

So uh Chris camps, there's Twitter using the blog I'm office development in VP and member, the core team very exciting I have several those formatting tips all rolled up together today as a special late Christmas present or a birthday present, professor, that sounds great sure, whatever its present sound good all right, let's take a look. So what? If I got this birthday list here? Alright, we see that my birthday was yesterday and I had a Hello, Kitty themed party, because I actually share a birthday with my daughter, very excited.

A

We got Vestas birthday right. That's today, he's working anyway and then Stephan Barratt doesn't have a birthday because he's actually immortal alright. But what, if I wanted to change this up? I wanted to fly some themes to this right, gonna make it look a little better. So that's what we're gonna talk about today. We're gonna talk about how to do some cool stuff with this using some exciting theme, colors right. So if I want to match those theme, colors and I can always come in here and I can format.

A

This view alright and I come over here and I've got something. Alright, so I'm gonna grab I'm gonna do a it's called a view. Format all right, so I'm gonna apply that to the view itself right so I apply my schema here and I'm going to add an additional row class right. It's pretty simple here. If I want to apply one here, I could say MS bgcolor, and this is where I got to pick a color.

A

So if we take a look over here on this UI fabric, color site, it's how you build these things, so you're gonna put font color or BG color border color and whatever the color name, you want alright. Where do you get those common names? That's what's down here. So these are all the theme colors and then you'll notice, neutral colors. Here, let's back that out, neutrophils are actually technically themed. Colors as well, which is a little weird.

A

Black and white, are actually theme colors and will adjust based on your theme so down here, though, our more fixed colors. So you see these actually have a hex code for those colors found there. So we're gonna take a look at all these and how you can apply all these fantastic things, to make sure that your formats always match your theme and always look good and that's everything else.

A

So we're gonna grab that it must be G, color, aren't ready to say BG color theme primary right, close that, let's add our closes Quigley, maybe that Wow right you'll notice. The first thing is that that takes something becames unreadable. Alright, so we can add an MS that font color white preview. That looks a lot better. We save that I'm gonna take a look now if we go and change the look on the site. Alright, so very pick, one of the dark ones is what I mean by that you'll notice. Now the Texas?

A

Technically it's black! Now, even though we said white right, that's why those neutrals are actually theme based, and that is super ugly, so I'm going to cancel that all right. We can go a little further than that all right. So if it's somebody every format that current view right- and maybe we want to do something where we had a hover style right. So now we got another actually into space for an additional class right, so BG, color team's primary darker sounds good.

A

Let me say hover, so we only want to apply that on a hover so preview that Oh theme not primary theme darker. So the darker and preview that maybe well you get the idea it would work. Oh look at this. Gonna do em s fast, BG color got it alright preview that there we go so you can see.

A

Now we get some nice stuff going here and, as you start to do this as you go, you can make some really nice-looking things that change styles as you go through it now, if you want to do start start to do things restricting conditional right, so if I wanted to say they only mark the ones where there is no birthday applied right, so that's where I can start to add some nice format, so I say it equals.

A

If now I'm gonna say if I want to check that that birthday right is empty or I'm gonna say to string I'm gonna reference that birthday call them birthday. All right equals equals empty string. These are the single quotes inside there then I want you to apply these styles now, because I'm now building these I need to actually wrap those and single puts themselves. Otherwise don't apply anything right. So now, if we say you preview that, let's see that was sign birthday, construing I did not put the imprint seer there we go alright.

A

So now only Stefan Bowers is highlighted right with this kind of things. So you can go a little crazy. With this, you get all sorts of cool stuff going. So that's the first one alright, so that's your first tip on doing styles here, we're gonna see that a little more elaborate in a way that makes a little more sense. So if we come over here, what if I've got something where now I've got a list here? It's fruit, I've got apples and oranges.

A

These are actually technically content types rather than an apple content, type of an orange content type now I want to apply formatting based on that content. All right, so I can do something very similar right here. So I come in here in a format from view all right. I'm gonna grab. Let's grab that schema. Let's paste that over here, so I got my schema.

A

I'm gonna say, add additional row class, all right so very similar here, but it's dead this time, I'm going to do something based on the content, types and I'm going to say when a reference to content, which is a little strange I want to talk about some of the quirks with this.

A

So if I say, define content type, you'll notice that this is not a part of the view, so things like ID content, type content type ID are available, regardless of of what your view fields are, which is unusual most of the time in view formatting or column format into reference another column, it needs to be a part of the specific view you're on alright. So, if I'm to say of content type, this is just the internal name equals Apple all right. Let's do MS BD color red dark, that's a beautiful color right!

A

Otherwise, since it's orange is the opposite when it's a MS, BG, color, I'm, going to say orange, lighter now, keep in mind these are case sensitive.

A

Let's do that and then because I'm I also want to do that same thing, where I want that text to look correct, I'm going to do string, concatenation right here in this form of the formula, so I'm gonna, say plus the space ms font, color white, all right, let's close that guy squiggly, let's preview that and we didn't do so- that's when we just cut and paste the one I already did hey it works magic all right, so we see here so yeah sometimes can hear. Can you do else--if right?

A

So the first part, so the if you've seen these parentheses here. So this is the condition right. If this is true, do the first item here right? So I got the first time here that you put a comma. This is the else all right. So if you wanted to do an if-else, all you would do is nest another. If statement right here, I've got my else alright, so you can have infinite number of nested. If statements here, I, don't recommend you go infinite, but you can certainly go several levels deep.

A

That's exactly how you would create a switch statement right. So if you wanted to switch based off of a status column- and you want to apply it like- maybe four different styles based on that it would just nest those if statements right there in the else parameter got it very exciting. So that's beautiful we've got you know. Our content type is now determining the color we apply. If we wanted to do something, maybe a little more elaborate, that's where we've got a nice sample for you.

A

So if we come over here to our sample repo, that's the SharePoint! Currently it's an SP dead list, formatting right, so we'll paste that link for you. Alright, in the chat there, you go all right now. If we take a look here, we've got a view sample called content type format which will illustrate some of these things. Real, quick before I do switch back over here and show you a couple do's and don'ts.

A

So when you reference a content, type and list formatting, you can always reference the content, type ID or you can reference the content type. So the content type ID is going to be a good there's, no squigglies or anything it's just the number with the hyphens it's always available, regardless of what you do, but it is the list, content type ID. So it's not your site.

A

Content type ID with generally you're, not going to care that much, but it's a bit of a pain and if you ever trying to apply this format to any other list right, even we've got that same content type on your site, collection, it's not going to to work and have to change that ID. So that's like it's a thumbs, do not recommend so the content types just the internal names was the text and it's almost always it available.

A

So there's a weird little bug right now that when you add content type to your view, if you do that it will not apply correctly, so content type no longer becomes available for you as a reference. So that's a weird quirk, the only one that really works that way right now, but just keep it in mind. Don't add it to your view if you're gonna apply it for Matt anyway, there's really very little reason to add that to your view, because you can reference that value regardless, just to show you what I mean on that.

A

If we take a look, so I've got this one here. If I go to simple rows, failure all right, you can see where I've got the constant type. Here you can see it's not detecting anything. It's just doing that elf condition right and if I go to show/hide columns right I take that out piled in there we go so that's just kind of a weird quirk. Just don't add it. If you don't want to use it got it all right. So now, let's take a look at something, that's a little more elaborate.

A

So if you're coming here to this content, type format, I'm just gonna come in here and I'm gonna grab this thing the whole thing: I don't have to download anything. I just go to our repo I'm, just gonna select the whole things. Right-Click I'm gonna copy that then I'm gonna come over here. We're gonna see a couple. Things switch back to simple rows, all right. Let's format that current view, I'm gonna paste that thing in here boom preview that nice, beautiful, so we're gonna, show you a couple of different things inside this format.

A

They're worth taking a look at the first one is how we're referencing these images. Alright. So how are these images giving reference? So you can certainly upload these. These images are just in the document, library and a folder called fruit. All right, so I've got fruit here and there they all are, and so we're referencing them. If you take a look at the sample itself, let's see the image right here.

A

Alright, so we're just building it shared documents, fruit and we're putting in the type so we're checking the content type and we're then we're depending on with that which call we want to pull that value from right, there's a little convolute. The main thing I want to point you to is this: this is a relative link, so there's some disadvantages and advantages to doing this.

A

One advantage is, then: I can move this from site to site if I'm relatively certain, where I'm, showing this format and it's not a problem- I, don't have to put in the full URL to the site. Otherwise, right I've got to put in my tenant we're gonna, pull that full URL right, because I've got the sites.

A

I can't just put a slash, so the format then becomes very specific to a site so by putting the dot dot, slash, dot, dot, slash right, I'm, doing a relative reference to those images, so that can be really nice when I want to apply this to multiple sites. I want to move this thing around with little take a look at in a minute.

A

But again, if you're doing things, we're gonna put it on pages and those pages are nest up in folders, then that's going to be causing a problem if he isn't it's within the webparts, so just something to keep in mind it's one of your options to get away from that hard coding of your full-on site, URL got it all right, whew! So now the other thing I wanted to draw your attention to right.

A

So if you'll notice here we've got these things they're in different sizes and as I resize this window or let's go you can see when I format the view right things shift around. They move around. We've got a couple of things like that. So there's another really great one where you can see: there's some nice tile format and the sample repo. You take a look at that, but how is that accomplished? So that's accomplished yeah!

A

That's right here, I'll put stuff in our main element, so we've got a row formatter and our main element type we've got this style and all we're doing. Is this float:left now there's a couple caveats with that. The nice thing is: it makes these things completely independent. If you're going to do that highly recommend, you hide the column. Header hide the selection, because those get extra confusing when you're doing that one caveat is we're finding that there is currently a bug with the paging.

A

So if you've got a large amount of items in your list or your view, don't do the float:left, because there's some issues there or trying to retrieve that kind of infinite scroll and that paging I expect that to be resolved. But for now just be aware of that one use the boat left, but it's a really powerful way to create a really dynamic, visualization right. It doesn't look at all like a standard ListView right. So now, let's move on to the next little tip here.

A

So the next tip is that you guys may or may not be aware of the column, format and view formatting is fully supported by PNP or will provisioning so you're able to take these things. So, if you're doing the kind of stuff that we talked about here, where you're putting the relative links right, you're, not using the content type ID, which that list content type, you can grab this whole thing right and you've been moved from site to site.

A

So generally, if you're moving to format, you can just come in here, you can select all and you can copy that you can paste with other sites. But what happens when you got back if such as you know, specific video you want to apply, we've got a list with specific columns or in this case content types and site columns and all that together well perfectly the kind of solution eyes. This whole thing is PNP remote, provisioning. All right. We can see that here so I come over here, I'm going to create a new site.

A

Alright and flip the communication site sure create a free site, see if I have a fruit set already I. Don't all right, perfect sort of finish that one apply that so I've gone ahead and I've extracted a template right. We're not gonna go into details of that we've gone over that a number of times and I have a link for you. If you want to research, some of that, but it's really just a simple PowerShell command.

A

You're gonna pull that out so I'm gonna do it on the current one and then all I've done is I've gone in that edited slightly. So you can actually see this in the repo for that sample got this fruit template XML file. So this is just remote provisioning here or you can see our exciting site columns coming over here and our content types are coming and they're. Our list instance will give those content types now. I did I did two minor things to this right.

A

Well, I made it where it's gonna, remove the default item, content type! That's a simple manual edit! You can see here, though this is where our custom formatter, for the view is actually being a blind. So the whole view format is right here, right in mine, pretty easy to do, and then the other thing here is I added this files here, which is just going to make sure that our images get added right.

A

So it's just copy one directory to another right, so it's copy the local directory it by the way always looks so beautiful when our mix and matching XML and JSON, but yeah right, yeah these at least this one. It doesn't look so bad. Sometimes you see some of those site designs, some other stuff. That gets a little crazy life thing, though, is like I, didn't write this right. This was generated for me by the their own provisioning. The engine all I did was run a command that said, get PMP. What is a provisionary template yeah?

A

That's all I ran and saved at the XML file. I came in and I added this little thing down here. This is normally not necessary, but I have those images so general. You don't even need to manually edit these things, it's all magic as far as we're all concerned right. Okay, so now I've got my fruit sight or I. Don't have anything on it. It's very sad, very sad, empty side. If I come down here, all right so I'm in here so without fruit, I'm gonna connect is the online connector.

A

Good line for me to provision in template to give it the path which of this case.

A

So I'm gonna run that guy and all this is doing is doing a differential against the site versus what I've got. In my in my template there, my PP visioning template and it's applying my content types. It's one of my site columns to find the list. It's adding those content, types to that list instance, and it's applying that view format and it's uploading, those individual image files which you see right now.

A

So it's putting all of that and because I use those relative image, links right and I use the console type internal name ignore that error. That's because I haven't updated. My provisioning template all right. My p2p proud shell, all right. So if I come back, though, to the site. Alright. So now I've got my fruit side. I'm just refresh here. I should have a fruit list there. It is alright and I, don't have anything in it.

A

But if I had you know a couple of was at a new Apple, alright, so Isis wowie mine, I, save that you see now. I have a format, so I'll apply to my brand new site, so you could easily wrap some of this stuff up, throw it in, alongside with some of your site, designs or site scripts and create a really powerful way to take your formats and make them a little more generic, but apply with the themes and apply with those colors that we apply to all across everything.

A

Okay, so that's several tips, all-in-one and here's your resources on that. So, if you want to find out more about those styles, the specific way you had to format those class names, you're going to go to the UI fabric site and you're going to go to the colors, there's also several things where you can do with fonts. So if you want to take a look at the fonts, you want apply different font weights or font styles or some pre pre-configured pieces. There want to check out our samples there's a ton of samples.

A

A lot of them are using these specific theme classes. Let students see examples of that. You're also going to see this content type format. Again, it's not a very pretty format, but the whole idea is just to see how you're applying those content types.

A

One caveat to note: there is: there's not you know a branching where I say hey. If it's this content type apply this format or if it's, this constant type apply this format you're going to be checking if it's this content type for each individual attribute. So take a look at that. It's just a different way to think about it. But it's one.

A

That's it's helpful to take a look at and really kind of familiarize yourself with that, but you can do a lot of really cool things to get some really dynamic views when you're mixing in those content types and then, if you're interested in what we just showed at the end there it's a little more advanced the PHP provisioning check that out, there's a ton of stuff with that and here's a blog post. That kind of goes over the details of using theme, colors and the UI fabric styles within your list, formatting.

A

Alright, any questions I'll be here in the chat, but that's the main thing I got here. All right, cool.