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

[Music] 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 there are some definite rules uh mostly if you just play with that it'll kind of make sense how things show up 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 and then we have these several samples for you and uh that's it excellent thank you chris really really cool stuff

Channel: Microsoft 365 Community

Views: 7,743

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Lists, JSON, header, footer, configuration

Id: RDapqO4opbI

Length: 17min 1sec (1021 seconds)

Published: Thu Feb 04 2021