Microsoft 365 Community Column and view formatting tips, 10 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using inline editing with list formatting – inlineEditField attribute

Description

A 9-minute developer-focused demo showing how to generate appreciation with field targeted editing. Chris Kent’s scenario: Track toy construction progress in a list where status is displayed in tile view format. Tiles show an image, randomization (Elf quote), and multi-level progress bar using images. The inlineEditField attribute allows user to edit the completion status field directly in the UI. Supported and unsupported field types reviewed. Full code in sample. Part 2 of demo (setValue attribute) to be delivered on December 23rd. A This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on December 9, 2021.

Demo Presenter: Chris Kent (DMI) | @thechriskent

Supporting materials:
• Repo - Elf Progress Board | https://github.com/pnp/List-Formatting/tree/master/view-samples/elf-progress-board
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting

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 everybody, I'm chris, let's go! Let's look at some exciting uh list, formatting stuff.

A

Now, as you may recall, if you hear on the american thanksgiving, uh there was an issue with some turkeys and some horses, and so the uh the horses are still out for now and we're gonna do a lovely kind of a christmas-based demo here. So uh just at the conference in vegas this week uh did a workshop uh with several of these guys and one of the things we were working on.

A

Was this idea of santa's workshop right, coordinating elves across multiple teams with all sorts of fun stuff, but as a part of that they're tracking, the toys they are building right, so they've got this lovely list here. You know with various toys and some information about it. Along with you know what how many they're supposed to build, how many have actually been built and of those have been built? How many have been wrapped right and that's lovely, to see right? That's a little bit hard to see. You know. Where are we overall?

A

You know we could try and slap a progress field together here, maybe using the calculator column or doing some of our own fancy calculations here inside of format. uh But what I've done here instead is I've gone ahead and applied a tiles view format? Let's take a look at that, so what this tiles view format is doing is a couple of things right, so it's showing an image, and this is a sample.

A

It's called the elf progress board and is available uh as of about 10 minutes ago, so check that out, uh but it's also showing some of that randomization. We talked about before right. We can see it's repeating a random quote here. um It's also handling- and this is important uh when images don't come in right, so we're handling that here, but down here. We've got this multi-level progress bar showing how to do that with an image and that's neat, and then we've got some other interesting items down here.

A

Now we're not going to go into extreme on this because we're going to move that to the next call. But the idea is: I have these inline pieces here. Look at this. I can actually click this and I'm editing the item directly and you can actually say updated list item, but we're going to focus on here is what, if I wanted to do that quicker right.

A

So I want to be able to click here and actually set this to say a hundred right, we'll see that not only does that value get set, it's actually updated behind the scenes for the individual list item. This list item gets refreshed and redrawn with all of our formatting intact, which is pretty awesome, and we can do some things with that. So, let's talk about how is this accomplished and how we might do the same.

A

So if we take a look at the format which is fairly extensive, so I'm just going to do a quick boop of that a quick find all right, so we're going to look for inline edit field. So that's not fine. Let's go with find so we'll go, find and we'll say inline edit fill there we go. So we have this idea of inline edit fields and so what's happening here. Is we've got this quantity field and we're just drawing it like normal?

A

Everything here is exactly what you would expect right, I'm just trying to show a number, so I've got the text content set to that display value.

A

The key difference here is I've just added this one piece right and if I remove that you'll see no real difference except I don't get any experience on that and then by adding that adding that I now get this experience all done for me right, so I don't have to do anything else to say that I want to let them edit that right here, inside of my view, format, how awesome is that right I mean that is super super cool now this is supported across a few different column types with the various field, editors uh included.

A

So if we quickly take a look at another site, that's just got several column types right. We can kind of see that so text field, all right, we'll come in here, column, settings we're going to format this column we'll head over to advanced mode, and I'm just going to paste one that I've got just for time.

A

Right, probably that one there we go so the idea here is very simple right, so we'll clear everything else out, we're just going to show a div and then we want to make sure that we set an inline edit field and we get this. Nice string editor some basic text right and we'll save that update to the list item now it actually saved, so it uh refreshed and that's cool. But let's see what that looks like on a couple other column types just so we get a feeling for that all right.

A

So if we take a look at the yes, no column, we go to advanced mode, we're going to place that same guy. Here we preview that right we took away the other format, but we can see that we get a check box right. So it's customizing that editor for us, so we can check or uncheck that, and the same is going to be true for a couple of these other ones.

A

So if we look at the lookup column right next to it, paste that we won't be able to say display value on this, one have to say: lookup value. Give you that- and we click on these guys. We see- we've got a picker here and we click that x and we actually get the choice fields from all of our lookups that we're doing here. So again, we've got these nice kind of integrated pieces.

A

Now there are a few column types that are not listed as supported, but I will tell you right now: they are working at least in uh targeted release, for instance a hyperlink field. So if we come here and we paste that preview on the hyperlink field- let's instead of that, let's do the desc. So we just see the preview version of the link and if we scroll over just a little bit there we go. We can click that and we actually both get the the actual url and the description uh right here.

A

So you can see, we've got nice little editors, built in same is going to be true for person, fields, multi-person, multi-choice and so on. So this is huge. This is extremely exciting. This takes list formatting uh to the very next level right. So this is absolutely awesome again on the 23rd.

A

We're going to talk more about the set value action and how you configure that for various field, types where you can update multiple fields and you can use expressions and conditions and all sorts of fun other fun stuff for that and we'll do that on the 12 23 call that's december 23rd, but for now let's just take a look. What the heck do we just talk about so inline edit field right? These are the supported field types officially, um so you've got the single line. Text.

A

You've got multiple on text, still no rich text, editing and in fact, if you try it um it's just going to bomb out your field. You can do number and date times and of course, choice is multi-choice, burst, multi-person and lookups.

A

Now, just from my testing- and I think this may just be a targeted release thing, so your mileage may vary, I'm also showing this working for currency hyperlink location, yes, no fields and multi lookups right. So what's missing here, so we're missing. uh You know, taxonomy fields, uh we're missing image fields. um You know, obviously not the uh the other types of fields that are read only so, for instance, even though, like date time is supported.

A

If you try and put this on like uh the created column right created created by or the you know, created time, you're, just not gonna get an editor at all. Okay, so just keep that in mind, which is great because it respects everything you've got going there uh well one of the really nice things. This allows you to do right. So, in the case of the elf progress board right there are times you just really want to focus on editing some things right, but you don't want to completely customize that entire form experience right.

A

Just for that one scenario, so having a view that kind of enables the editing in just the ways you want uh really helps, guide and direct users just to focus on what makes sense for what they're doing at that moment right. So the task shows the things they want to do. That view does and then they can provide the edit experience explicitly for what they want to do. That's pretty awesome all right. So when you're doing this, you can use the at current field.

A

um You know inside your column formats and when you do that, that will make sure you just align the edit directly. If you want to edit a different field like we did with the view format, we want to target multiple fields right. We were editing three different fields with this inline edit field. We just specify the internal name, just like you would and then by default. You're gonna have these border styles.

A

So what I mean by that is, when you kind of hover over it right, you get this kind of two pixel. You know square. It's got uh two pixels of border radius around it as well, and then, when you actually click it to edit it it's going to have that whatever your primary theme, color is as order now, you do have some customization option with that and the way you do that is you apply these styles right here.

A

So we've got this either you have an inline editor border, so these are all these and then you just add this hyphen make sure you know there are two hyphens at the beginning here um and then you can use these like. You would any other version of these right. So if I wanted to set the border color to multiple colors right, so I could do that.

A

I could set it as you know, red and then blue, and that would set you know the top and then then bottom to red and the sides to blue or I could do all four right. So I can spread that out across those and go for whatever I need there, and I will say this appears to only be affecting the hover experience right. So if you change that border radius to 50 and you get a lovely oval, I don't know why you would do that, but you can as soon as they click on it.

A

It's going to go back to that theme, primary color and it's going to hit that two pixel border radius. But it's still super awesome and by doing that and keeping these hover styles, it prevents you know your format from suddenly looking very, very different than you intended, but still supporting that rich editing, experience all right so just to wrap up here check out the documentation.

A

This is fully documented up there and you can check all that out if you want to go ahead and jump into set value before we get into it in a couple of weeks here uh the documentation is available there and then this sample. So it's under view samples. The elf progress board contains both and we have several more samples that will be coming in here in just over the next week or so that also demonstrate these things because again super exciting. This is a great time uh to be using list formatting.

A

It really really elevates what we've got here. Alright, that's it for me, awesome. Thank you. Chris.