Microsoft 365 Community SharePoint, 21 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Configure list custom header, footer and the form body with JSON

Description

In this 17-minute Developer-focused demo, Chris Kent focuses on the new list form called Configure Layout for formatting list Header, Body and Footer. Header and Footer formatting – draw what you want using familiar column formatting syntax. Chris shows the ease of leveraging code samples. Body section formatting has limitations at present. Presenter calls out things to keep in mind when using this new capability that is powerful, not polished. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 21, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Configure the list form | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration
• Repo - Starter Form Samples | https://github.com/pnp/sp-dev-list-formatting/tree/master/form-samples
• Video – Sharepoint List Formatting From Customization – April Dunnam (Microsoft) | @aprildunnam | https://www.youtube.com/watch?v=wdbGtmFf7bs
• Video – Customize SharePoint List Forms using JSON - Reza Dorrani (Catapult) | @rezadorrani | https://www.youtube.com/watch?v=y_bdjMRHVmY&feature=youtu.be

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

All right, so we go to our classic warrior horses site, and uh you know I think a lot of you know that uh for warrior, horses self-improvement is just as important as carnage and destruction, and so as it is a new year, the warrior horses have put together a new year's resolutions list, because you should always put those in a public sharepoint site for everyone to see so we're going to head on over to the resolutions list saw there for just a second. uh We just got a simple list here.

A

Right we've got one little set of column formatting. uh This is using a column format, slightly customized that we have as part of our samples, repo and that's cool. But what we're going to talk about today is that list form right. So when you click on one of these guys right this guy, what shows here now we've had for some time the ability to uh customize that using powerapps right in the past, we've had infopath and variety of other things, but now we've got this new option here this configure layout.

A

So, let's take a look at that, so when we hit configure layout, you can see, we've got this formatting to header body and footer. Now it's a bit of a misnomer, because you're really only applying formatting header in the footer and we'll talk about what that looks like. So when I say header right, what I mean is this: is the header? Is there already a header? Oh look at that beautiful right, so there's the header and down here is a footer. There's, nothing there by default right. So we're going to talk about these two sections.

A

Now you've got a spot to put stuff. So let's put some stuff. So if we take a look at the header right so by default, it just takes your title and sticks it up there. So we can come in here and we're going to apply. This is just the same syntax as column formatting right so we're going to say elm type and we're going to make it a div and we're just going to put some text content and we're going to say my special form.

A

There we go if we preview on that notice. It also fixes my formatting all right, so I have my special form up there and just like with column formatting. I come in here and I can apply some styles right, so I want to say, like font, size and I'll, make it 48 pixels.

A

So we'll get real, nice and big, and we can see that guy all right so beautiful we can do things like attributes all right. We'll do the class and we'll just set this one to ms uh font, color and we'll say, uh let's say uh purple that sounds exciting.

A

Give you that all right- and we can do those theme, colors and everything else so now we start to see what we can do here now we can put images we can put. uh You know complex children. We can get really crazy with some of this stuff, very, very cool. uh We have some samples now for some of this available in our list. Formatting repo, you can see them under form samples, not a whole lot here.

A

This is a great area to contribute if you're looking for it and one of them here, which I think is fun a very complex sample here, because this is called the blank header. So if you came in here right- and you had nothing right- you you automatically get that. What? If you don't want that, because it's right there it's right there, you don't want that paste. This sucker in bam, header's dead right. So that's the header killer very exciting.

A

You know. We've got some other items here. What if we wanted to take advantage of some of these fields right, we wanted to actually display some of that. So if we were to come back in here, we wanted to say text content.

A

We can actually reference those fields, just like we did before right, so reference that status field, for instance. We just want to show it up there there. It is never mind and it matches right and that's very cool, and we can use that even you know a little further. So if we take a look at, uh let's see we toss some of this in I'm going to grab a sample as well off of here. Let's go back.

A

We have this nice status, header and footer grab that and I'm just going to grab this json as well. I'm just going to cut and paste right from github right from the website. I'm copying everything, so I just highlighted everything and I choose copy now I come back here and I can just paste that in so paste all right now we preview that and bam. So now we've got ourselves a nice header and some of the cool things it's doing here.

A

It's using the same kind of logic, we've seen multiple times through column formatting, but it's just looking at that status right. So it's looking at the status to determine the same color. So it's doing the same thing that our status column is doing to get that same color and it's showing an icon over here again using that kind of logic.

A

Now, if we go ahead and save that nice thing is, this thing is live so as we switch it, you can see that it actually redraws our header, which is really really cool right. So maybe we have decided. We have trained a small squirrel or secretarial task right. I mean they're done and that's awesome now. What about this footer, let's jump in there and then we'll talk about some limitations.

A

We've got so if we come here, we can figure that layout again we head on down to footer, I'm going to once again just head over here and I'm going to go back, I'm going to grab the status footer just to grab all this, so it does the exact same thing: it's just a box at the bottom of the form.

A

So we're going to paste this and one of the nice things we're going to see here, oh fancy, so now we've got a border at the bottom, just to kind of match our overall color scheme, which is again based on an actual field for the individual item. We've also put this exciting copyright text. In case someone forgets what organization they're in and that you own this form data. You too can have a copyright right formatted to the current year, so it's always up to date. There we go so I'm going to save that that's exciting.

A

So now, as I'm looking at these items right, I get this nice header and footer, so I could say, murder and stuff, you know, and it totally just kind of works. So that's awesome and that's where you can apply some formatting, but what are some of the limitations here? So there are definitely a few uh one of the biggest limitations is with row actions.

A

So if I head back over here and I'm just going to go to our column samples where we've got some, let's see generic row actions right here and I'm just going to grab one of these this. So I'm just grabbing a standard, we'll grab the delete, one just a standard column format that you normally apply to a column.

A

If I grab that you know if we close our form here and we'll just take this uh field here, that has no formatting on it currently advanced mode, and I'm just going to paste over that just to show that we have a format. So there's a our format here and all this format does is: when you click on it, it chooses the delete option. So it's the same as selecting it.

A

Then picking delete up there and that's really cool I'm not going to delete these, but that's neat, but one thing: you'll notice is that if we go into one of these items that doesn't work here right, you do get all the nice format in here, but because, when you click on these, they become editable. You lose the row actions there, but we can also go in and kind of show something else which is when we configure the layout. We go to that header. Let's paste that same format here and you can see hey, it worked.

A

That's great, uh but nothing happens. So none of the row actions such as you know, edit the item uh open the item. Some of those obviously don't make a ton of sense anyway, but sharing deletion and starting flows are not working from inside the form.

A

One other thing: that's not working are custom cards or hover cards which again makes sense in some ways, but if you're, using a format that has been relying on that, that is not going to work in your header or your footer or even in the column formats themselves, and one of the frustrating things with that is the column formats, don't have any context for where they're drawing.

A

So it's awesome that it shows here, but I have no way of you- know changing this here when I'm in a form compared to when I'm in a list item.

A

So when I'm shown in the row or if I'm showing uh on a page and a web part none of that context, information is available to you, so just have to kind of make do around some of that. So I'm going to cancel that so we don't lose our beautiful header all right. So let's move in what about that body right. So we've been looking at the header and the footer and as I mentioned, I didn't. I don't want to call this uh formatting right.

A

So there's a couple things you can do and the first is just going to edit the columns uh before I go notice. I'm gonna remove that trash kit. uh Let's just kill that delete it and trashcan is gone all right. Let's go back in there just open the item- and we have this item here for edit columns now what's cool about this is you can see? I've got an additional column. I haven't shown in the view right. You can see it here, but maybe I don't want to show a little.

A

Maybe some internal thing, I'm setting the flow or some other thing, and I don't want it to be editable or shown on the form yeah. It's simple as that and I hit save and it's gone wow. That's exciting! All right. If I want to edit these columns, I can bring it back in that's fine.

A

If I want to drag it up, maybe I wanted above status all right, save that there it is so all the nice reordering which we've always been able to reorder these, but it was a lot more complex and it wasn't a back behind the scenes old school classic interface. Being able to move these around now is awesome. You can go even further, though, and that's with these conditional expressions right so conditional formula.

A

So if we edit this, we actually get to use the same excel style, expressions uh that we use in column formatting. The difference is we want to return a true or false value, so we have to start with the equals just like before, and so in this case we're going to say, if you know we'll reference the status column, you know equals done right. Then we're going to say show it otherwise don't show it, and this is kind of the syntax they demo in the documentation.

A

So we'll save that, and so now, if we save you notice that link doesn't show up. But if I change this to done bam there, it is. I didn't change the order, but it's up there right so now it shows so it is conditional and shows exactly what it's doing. That's very, very cool. There are some real caveats to that.

A

However, one of those is that a link here, so if we edit that conditional formula you can actually simplify this just as a fun fact, you can get rid of the if statement, all together as long as it returns a truthy value, right, that'll work the same, so that's a little bit easier to read, but if you're doing anything complex, I understand why they've got the if syntax uh kind of there for you, but one of the things that gets a little tricky here is: let's go ahead and save that just so it's always showing and let's move it back down for now.

A

Let's go back in here. If we go into our our our configure our layouts and we're going to go back into, let's say the footer all right we're down there instead of a copyright.

A

Let's say we want to just put you know a value, so we can reference a value right, so just like we showed before we can reference status instead and there it is now if we reference certain values like say, link, which is a hyperlink field, unlike in column formatting, where you've got to reference, just the the name of the internal column, to get the url and then add a dot d e s c. To get the display, you get everything and you can't actually do the sub property. In fact I found so far.

A

I can't really get sub properties in the header and footer and there's some other kind of inconsistencies there. I'm assuming those are bugs and that's coming, but I don't work for microsoft, so I'm not going to confirm that either way. So definitely some limitations, but you still can get the information. You can apply some expressions if you want to pull some of that out now.

A

One of the interesting things here right, so if I I'm just going to save that for now, if I go back- and I say you know edit those columns now, if I take away link right and we save you notice- the footer can no longer display.

A

I no longer have access to that value and in fact the same is going to be true if I edit those columns again- and I come back in and I make that conditionally available right so equals where we say status equals equals done when I do that, I still don't have access to that value.

A

So if I save that, so even if I move this to done well now I have access to the value. So I don't know we refresh we'll lose access to that value. But the idea is: there's very limited access here. Other fields such as id uh modify created all those kinds of fields that you can generally reference inside list formatting. If they're, not part of your view, are not available, so some frustration there again, I think that's probably coming, but I'm not 100 certain on that, but still very, very cool.

A

Very very powerful: now, let's take a look uh here at one other portion, which is the configure layout for the body. So, although it says formatting, it says paste your view, formatting json. Here it's a totally different type of json, so it is still json, but it's not formatting json, there's no formatting to it.

A

So one of the things we've got. So if you just want the bare bones, so everything right now is single column. And if you want that kind of wrapped look, we have a sample for that. Just called.

A

Let's go back to our view, samples or form samples, let's click on form samples and we're going to grab that wrap to body another exciting json, all right, so we're just going to grab this jason. We're going to paste that in here, when we do that, you'll see the columns start, wrapping, which is very, very cool. You can't control how many columns or anything like that, because that it's all wrapping, so it's based on the amount of real estate.

A

So, as you shrink your your window, some of these columns are going to go back down to two columns or three columns uh kind of depending on that real estate, but that's very cool, so you confirm these sections. So again, it's not formatting. It's more of a grouping of column types, you'll, also notice.

A

That attachments is a kind of special case in many instances so attachments you either disable that or enable that with the list settings you'll notice, it wasn't a part of our columns that we could move around or hide conditionally or anything like that and in here it. It actually shows it completely separate from these and put a line in here that wasn't there before right. So if we get rid of that, we preview that line goes away.

A

It's just at the bottom and when you use attachments and you create these kinds of sections attachments, if you list it will always be at the bottom of your section, regardless of the field order, which is a little strange. Well, let's, let's see what we can do here, so we want to create some sections right, so we're going to create a section and let's just put uh what field in here.

A

So we can just put our fields- and we reference these strangely by the display name, unlike everywhere else, where you reference with the internal column name. So this is the display name. So if I wanted responsible horse, the internal name has no space, but I have a space for the display name. So I need to put a space here.

A

If I preview that you can see it doesn't do a whole lot, because I only have one section, but if I add another section we'll say uh fields which is always a required thing right in this case, I'm just going to leave it empty. The idea here being, I could have a display name though so, for display name, which is all lowercase.

A

um It's not camel case like some of the other fields, but we're going to call this display name is other all right. We're going to put a comma there, I'm going to preview that- and I know I'm right at time here- I'm just going to show a couple more things and we're done here. So the idea here is, you could put this here and then everything else that's left over will end up there.

A

You can also list those fields just explicitly if you'd like, but this allows you to change not only that ordering, but how they're wrapped and how they're grouped a couple things to note again, you don't have to have a display name, you see the top section here doesn't have one, but it could. There is no way to format this. So if you want to change the color or the size of that, currently, there's no way to do that and that's all you can do so. There's really no formatting.

A

Here, it's just the uh section kind of layout all right. Let's do a really quick wrap up and then we'll be done here. So headers of footage draw you want here's the limitations. This is where the pause and the recorded video is going to be really helpful. So just pause on these slides. If you'd like a little more detail, because I got a fly and then our form columns again, everything shows up. It's really cool.

A

uh The biggest problem here is that there are limits with those conditional expressions that only works with a subset of the column types and certain subfields are not going to be available to you and then in those body sections.

A

There are some definite rules, uh mostly if you just play with that it'll kind of make sense how things show up.

A

Sometimes there's divider lines, if you don't put a display name, there's no divider line, for instance, so there's some interesting stuff there, the biggest gotcha, is going to be that reference by display name and if you change that you're going to have to go back in and change this, so keep that in mind and, finally, here's the documentation to check out the documentation um reza durrani uh who's on the call has put together an awesome video check that out it kind of goes over the stuff in a little more detail.

A

And then we have these several samples for you and uh that's it excellent. Thank you. Chris really really cool stuff.