Microsoft 365 Community Column and view formatting tips, 14 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Controlling list toolbar with JSON using commandBarProps option

Description

In this 15-minute developer focused demo, Chris Kent opens with high level positioning on column, view and form formatting options. Understand how commandBarProps are positioned namely Command bar property changes affect view, not list configuration. See the basic JSON schema used to make changes to items on the command bar. Add, hide, move items on bar or to overflow, rename, add/change icon, add a tooltip and even conditions to command items. Command bar options are useful for guiding users through workflow. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 14, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Documentation - Command bar customization syntax reference | https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-commandbar-formatting
• Icons – Flicon | https://flicon.io

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

All right: okay, good, I'm chris hello, everybody all right! Let's do it! Let's talk about some list format and it's been a while and it's exciting stuff. So.

B

We're going to talk about something new here and uh when I do that I like to show kind of where we are with list formatting. So when we first started out with list formatting, it was just column formats like you see here, um and you know if we take a look at kind of what's available, you'll see that we've got quite a bit more all right, so in general, you've got a surface you're going to render to right whether that's a list view web part.

B

Microsoft lists, you know whatever that is, there's gonna, be some standard. Ui elements right that are kind of all built in here um and then you're gonna have your data right, so standard rendering looks like uh excel in the browser very exciting. But of course you can then compile. You know you can add all these column formats to one or more columns across there and that's pretty cool and then, in addition to that, you can add a view format that is a row class. It's called an additional row class and we do that.

B

You can combine that with your column formats. They can just highlight individual rows based on whatever condition you want, or you can go a little further and you can specify a row formatter where you can take that data portion and you completely override row by row and draw your own stuff.

B

However, you want- and you can even combine, that with a tile props format, also known as the gallery when you select that and you can have both those in the same format and then, if you want to go a little further, you can hide that standard, ui right and whether you implement your own or not that's up to you and then even then you can have the groups right.

B

So you got your groups and you got your group footers, and you have your aggregate footer down here and you can apply group props to format it in there, and you can also apply a footer format here to apply to the aggregate row. It's getting kind of crazy. Even further, though, you've got the form and by default, if you've got a column format, that's going to show up in the out of the box render to the form all right. You can customize. You know what columns show up here.

B

You can even do that conditionally based on expressions, but you can go forward. You can add a form header format and you can add a form, footer format and you can even control it's not really a format, but you control the the number of sections and what columns are in those sections with the body layout and now what we're going to talk about now is kind of the latest edition, which is command bar props fancy well they're, going to see what these do and how they kind of fit in with everything else.

B

But I think it's important when we're looking at a pretty. You know broad landscape like this, where we've got all sorts of stuff happening right and all sorts of ways they can interact is understand these kind of fall in three major buckets all right.

B

So if we take a look at that, there's column, formatting view formatting and form format and the reason I want to call that out is because it makes a difference in where they're stored and so how they get applied to your list, so column formatting those get stored with the field on the list or even at the site, column level, and then it doesn't matter which view they're in.

B

If you haven't applied, you know a full row formatter on it, they're going to show up uh just like that, so you control them that way, whereas view formats are applied to the view, so you could have all sorts of you know numbers of these right, so every view could have their own set of those and then form formatted applies to the list itself, and so you really just have one set of those.

B

So the thing I want to point out with command bar props is this will feel like a configuration item for the list, but it is not.

B

It is a customization for your view and that's going to be important, because it will almost feel like you're doing something here with security or something else and you're, not uh you're, just changing how things look and so, which can be very, very helpful, and if you use that to keep things kind of an on rails experience and to guide users into what they need to do.

B

That's the perfect use case for this, but if you're trying to lock things down, there are other ways to do most of that right and generally that's going to be through security and permissions. Okay,.

A

Got that out of the way, let's actually take a look at what the heck I'm talking about.

B

So we go back to our classic warrior: horse's side we get rid of that before vesa mutes, perfect, okay, so we come over here and we've all got our warrior horses site right and we've all gone through and we've deployed a recruitment tracker because we're trying to hire more horses- and we all know it's a horse's market right. So we've got to get those horses in here and so what we've done is we've deployed.

B

You know the standard uh new template here for recruitment tracker and that comes with a couple of uh nice column formats around our choices and that's cool. In fact, we've even applied a custom icon in here and there's a video about that. If you really want to look at that, what I'm more interested in today, though, is this guy up here, so we've got this command bar right. So traditionally we haven't been able to do anything with that right.

B

There are a few list settings that might affect some of that right, like you, could have additional items in the new and so on. uh But let's talk about what can we do here? So we do that with a view format, so I'm going to format the current view right, and so you can see. I've already got alternate row styles added there. So if I jump into advanced mode, you can see that I just had that as a wizard. So that's there. So I'm going to actually delete that because we don't want that for now.

B

Let's make it a little bigger now, you'll notice that when I select everything deleted, I don't get any kind of intellisense really right, so that'd be irritating. That's because I deleted the uh the schema reference. So if you do that, like me, all the time just save an empty one, close it and format the current view again go to advanced mode.

B

Oh I got my schema reference back and I don't have to remember this strange url right, but the reason you want that again not required, but you want it because you get the intellisense right so now, if I type c, I get command bar props, so I can hit that and sometimes the intellisense auto selects the next one we hit tab. So we'll pretend that didn't happen. I'm going to type in commands and then I get an array here and now I can do something pretty cool right.

B

I could specify different commands here and I reference them by key. So I type in key- and I automatically get this intellisense now- I'm not doing anything special here. There's nothing installed here. This is out of the box right. So I start to see these are kind of the internal name for all of these commands.

B

So we'll just start with the big guy here, the new button, because, that's obvious we'll say new right and just type typing new- it should be in there somewhere, but we'll just type it in ourselves new right. So that's our going to edit the new command and the thing we're going to say is hide, I'm going to say true all right.

B

Let's hide that thing preview that hey, we don't have a new button anymore, wow wow, that's pretty awesome right, so we can start to edit these buttons and change uh some key things about them right. So we can remove the new button. Now again, we didn't really prevent anyone from adding new items right. So you can hit this edit in grid view, and I can add a new item that way or I can go to the api there's a lot of different ways. You could do that, so this is more about guidance right.

B

So, if you're saying hey, this is a list we added to powerapps. We want to create new items through powerapps. Well, that could be a great way just remove the options here as a good reminder and keep people kind of you know on rails, again, you're just providing some guidance around the experience so that you're not confusing users by giving them options. You don't want them to use okay, so going a little further here. So we can hide it right, but we can do something else here right. We can actually say our text right.

B

So maybe this isn't new. We want to say add something you know or we want to give it some other context right. So in this case we'll say that now our new button says add something: that's pretty cool, um you know, and maybe we want to even further. We want to say icon. We hate that plus for some reason all right. We want to say our icon name is cat, because this is a list about cats, we'll pretend right. So now we have our cat icon and I'm getting those icons um from the fluent ui.

B

And again, if you go to flykin.io, you can search for all sorts of icons here uh you know, and so, if you type the new up here, you know- maybe you still see that plus button, but maybe you're like oh, but I want something extra fancy right. This is a you know, a common thing, so I say common ad, I'm going to grab that.

B

Let's go back there and let's change my icon name to that and we'll preview that and now we've got a nice icon again we're providing some guidance about how we might want to do that kind of thing right. So we can do icon name, uh let's go a little further right and, let's say title, I'm going to say: yeah, boyee right just making this stuff up, and now we get a tool tip that I don't know. If you can see that way.

B

You can't see it when I zoom, but there's a tool tip right, so title affects the tool tip, so we can give a little more context right. um You know, maybe we've renamed this we've, given it a cat icon. We want to say just kidding. This adds a new item right, so you can do that. That's neat um and we can go a little further right, so we could also say um you know, let's get rid of this new button or let's move the new button over all right.

B

So we're now we're going to say our position. Our position is a zero based index starting from the left. So this is position, zero position, one two three and so on, and so now we can say actually we want. You know it to be over a little bit, so we can preview that and what did I do- I've hidden the new button? Somehow?

B

ah Well, that's good! Well! The idea is, we can move it over. Let's just go back and make sure we've got position and we'll put it at one. There we go make sure I'm not missing it there. We go one position, two: how about that? Well then, you're gonna have to believe me.

B

Let's try this again edit and grid view, we'll just switch it over to this guy. There is some interesting stuff with the primary button, so we'll come back to that as well, but let's go with position on this, so this is that grid view. Let's change its position to three: let's see if we get that to work there, we go so the idea here is. We can reorder these. uh Oh, I wonder if I typed it wrong. Oh you're, right I see jim. I type position. Yeah!

B

That's not gonna work out, okay, so it is important to type these correctly, all right so position, three, all right, that's cool! I can actually go a little further. What if I wanted to say edit in grid view, is my primary button right. So let's get rid of that and, let's just say primary, and I can say primary is true, and what primary does is it's going to affect that background, but you'll notice, something strange here: didn't actually do it and the reason is primary. True only works in position zero.

B

So just keep that in mind. It's a little strange! So if you put in position zero, then you could have it be that primary look right. So I can turn that off and preview that and you can take that away. So that's pretty cool, there's a little more. You can do as well. So the idea is here. If I want to take that grid view, I still want it around. I don't want to hide it right, but I want to put it out of the way, so I can say the section type.

B

In this case I get two choices: overflow or primary, I'm going to say overflow, that's! What's ever in these three dots! Now, when I do it, it doesn't actually move and the reason for that is when you specify overflow only you still have to specify position.

B

So it's a it's an interesting little quirk, but if I put it in position 0 now it's over here in the overflow and in fact you could put all of these in the overflow. I'm not saying that's a good idea, but you could do that all right. So and you know, we've got some other stuff here, uh edit all button in the list form. uh No, so we're not editing list form buttons. It's really just this command bar okay.

B

So we're setting things up here in the command bar, uh but we can do the section type. We can also get a little more advanced uh with our selection modes and let's take a look at an example where we want to do that in just a moment. But first I want to show you that in almost all of these properties right we can do these con.

B

We could say expressions in here right, so we can say if you know we'll say if our title or we're going to say position, call our position right equals equals assassin and, let's, let's actually, let's make this the edit button all right and we're going to say uh whether we want to hide it or not. All right. So we're going to say if the position equals assassin right, then yeah hide that thing. Otherwise, you know, let's not, and so that looks a little weird at first right now.

B

I've picked one that isn't visible here, but it really only happens when you have a selection. So if I speak seabiscuit a edit, if I pick pokey, hey edit, that good oh editing review all right, so I've got edit and grid view and so on. But the idea is here: we can write expressions and do all sorts of things. You can also simplify these expressions.

B

Don't have an if statement, you could just have position equals right, so you just have something evaluates to true or false, and that will work as well, whether that's hide the title: the text, the icon name position and whether it's primary you cannot do it for section type or the other one which is selection modes. So let's look at an example of where I find this extremely helpful all right, so let's just get rid of that and we're going to go to another list.

B

So we took a look um and in fact, if you're interested in this, because we're not really going to go through this, we created a list. It has a flow associated with it. We created a button that only shows the the flow when it matters right. It only launched the flow then, and it has this idea of a progress if you're interested in that they will probably paste the link. But there is a video on our youtube channel called displaying progress of powering my flows and sharepoint lists.

B

If you take a look at that, that'll walk all through that. But what I really want to look at is there's an issue here and that's this automate button right when I picked this. I've got it automatically, not selecting that, but I have an automate happens here. All right, that's got my rules, but it has my flow here which doesn't actually make sense right. I don't want to do that flow. um Oh thanks, david great right, so I don't want to do that flow at this time.

B

So I really want to control that experience, and so I could tell you just.

A

I just ignore that. Don't click that.

B

Also request sign off. I accidentally clicked that one time I don't remember how to remove it. You know whatever it is, uh don't click that either. So what can I do about that? Well, you might guess that we're going to apply one of these things we just did so I'm going to format the current view, I'm going to go to advanced mode. So I can write this myself and we're just going to grab one for time here and then I'll explain what it does all right.

B

Let's make that a little bigger, so we can see it. So what I've done is I'm targeting this automate menu. Now the problem is right: it's got rules. I don't want to take away rules in general right, but I want to take away my items here. So what I'm going to do is I'm going to say selection mode. So I'm saying when there's a single item selected or a multi-item selected hide it right.

B

I don't want it to show in those cases, in other words, it's fine to show right here, but as soon as you select an item, get rid of it right, don't make it an option anymore, and that takes care of that problem for me, and you can do that with all sorts of items uh which really again provides that guidance so now we're ensuring they're not running the flow and doesn't need to run we're only running through our kind of guided way that you know provides guidance around the buttons and so on. So that's exciting.

B

So that's that and I'm going to run over here- and I just want to point this out real quick. So take a look at this. This is the idea of all of the different things you can set right again. uh Most of these things evaluate to true or false. You can write true in a string. You can write true without strings.

B

That's kind of up to you and everything, but these last two can be expressions so section type and selection modes cannot be expressions uh just these guys and if you're looking for more details on these, you can always click on that schema, and it will tell you everything: that's possible right there in the browser.