Microsoft 365 Community SharePoint, 8 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List Formatting Magic – inlineEditField and setValue for making list fields editable

Description

In this 28-minute developer-focused demo, Chris Kent shows how for most unformatted/basic columns you can slap the inlineEditField: @currentField on existing formats to make the column editable (click and change). For formatted columns or columns with multi-value formatting, use setValue with actionInput and displayValue to accomplish inline editing capability. See how Chris finds and uses community samples (48 Inline Editing samples), found in the PnP List Formatting Samples repo to support his objective.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on December 8, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo – PnP List Formatting | https://github.com/pnp/List-Formatting
• Library – Flicon (Fluent UI icon search) | https://flicon.io/
• Sample - Multi-Person Facepile | https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-facepile
• Sample - Person Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card

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/m365/community

A

Foreign I'm Chris everybody all right. Let's dive in we're going to take a look at a couple of things. You know that is the point of a demo, perfect okay, so we head over to our classic Warrior horses site, as we do all right, we're going to take a look at a list. The warrior horses have used a number of times, uh we're going to take a little more in-depth, look at a couple of options to make things easier right.

A

So one of the lists that the uh the horses use right is a hit list right, so these are targets to be eliminated, murdered, destroyed, killed whatever you want to say right. So we've got this and we've taken a look at this. We've actually formatted this a couple of times we're going to format here. This is an out of the box format where we've updated the icons and a couple things like that right. What I want to talk to you about is making things easier to edit. So we have looked at inline edit field.

A

We've looked at set value before, but we haven't really looked at them in a whole lot of depth. So guess what we're going to do unit? That's right, we're gonna! Do it! So one of the things I like um is like on a status column.

A

um You know you can always switch over to Quick edit or you can open up this item right, I'm, trying to change the status and then I click on it and I can edit it.

A

And that's that's fine right, there's a lot of steps, and sometimes you want that exact type of thing right, if you're, if you're working with a whole form- and you wanted to edit everything and that's exactly where you'll embedded it right in line with all your extra stuff, but sometimes especially a status field, right it'd be really nice just to click and change that. So let me show you the quick and easy way to make any formatted column easily editable right. So I, don't I, literally don't care what's in the format right now, all right.

A

So this is one generated by the design mode, blah blah blah I'm just going to scroll all the way down to the bottom. Let's make it slightly bigger right and right before that last little squiggly I'm just going to add a comma and I'm going to say, inline it'll start to I just type an in It'll like here you go, hit Tab and set a field name I'm, just going to write at current field.

A

So let's make sure I'm actually in the Box, remove field, name and say, add current field and because that will apply to whatever the current column is when I save that eliminate that now, I've just made this inline editable right. So that's pretty cool, so I could change. You know, uh Ted! The horse assassin is now deceased, very sad all right, uh but that's the idea here so again: I didn't care. What was in the format I could apply.

A

Whatever I wanted, with my design mode right, I've got the data bars whatever it is, and then I just add that one liner and it's uneditable now I can make that even easier on things like if I don't have a format right. So this is just a date. There's no format, I can't just come in here and say format this column right, oh wait. Chris said just add the one line: it's not there right.

A

Well, good news is I've got a pretty quick format for you that you can type in I'm just going to paste it in for fun. So I'm gonna take a look at it. So all I'm doing here is I've, basically made a format and I'm using this display value. So let's bring this over so we can see it weep, weep weep there. We go. Let's preview, that so by using the display value I ensure that whatever I've set up right.

A

So this works like number Fields, uh to get that you know whatever your percentages and your commas and everything all set up works on dates to get this the way you wanted it right, it's because otherwise you sometimes get something a little ugly. Let's see I think in this case we're gonna get the same value because I'm configure this differently, but generally you're going to be a lot safer.

A

If you have this display value- and it's not going to be a problem, if there isn't a specific display value, so when we do that now we edit it sharepoint's smart enough to know. Oh, this should be a calendar right, so it's pretty cool. It's automatically going to pick all that stuff up, so this inline edit field is just drop. That simple way to do this kind of stuff. uh One thing to note is it doesn't have to be right here on on what you're doing here.

A

It also doesn't have to be this particular field right. So one of the things I could do is I could put instead of inline. It feels the current field right I could put a different field. So, let's say status here all right: if we preview that now, when we click on it right, you can actually set a completely different field on here. So this is where you can get into some kind of cool stuff where and you can have more than one inline edit field right.

A

You get one per element right, but if you've got children inside this div so say, you've got a series of icons here right. You can set up various editing types things and really kind of control that experience. That's pretty cool, um but it's okay right. All we're really doing is saying bring out whatever the inline editor is right, whether that's you know a calendar or it's the choice. Looked up or it's people field all that kind of stuff, but I'm going to get rid of that.

A

um But what, if you want to be a little more specific right? So this is where we start to look at things like set value, so set value is a different way to do this, and I should also note here that, when we were doing this when you're looking for help on this stuff right, so if you go over to our sample repo, so this is the GitHub site.

A

If you go to AKA dot, Ms, slash list, formatting you'll end up here on this site and if you're looking for help with setting up these edit values right, because this could be a little bit tricky. This is a little more of an advanced area. If you go into groupings, we've got a couple of different ways. You can look at that right, so one you can go by category and we've got a category for inline editing here, so there's 48 different samples that do some kind of editing from The View of your list right.

A

So that's cool. If you want to be a little more specific right, because this is everything kind of all dumped together, you can come down here and go by feature and so feature. We've got basically on keywords, so inline edit field. So if you want to see specifically the samples that are using the inline edit field, that's how you're going to find those, but you can also go by action so for the stuff I'm about to show you set value here.

A

We've got lots of samples that are also showing how to do set value so set value is a little more specific and let's take a look at what that means, so I say set value if you come over here. Let's add a column here, so, let's just add a person column hit next and we're going to call this. The this is our hit. Squad Squad, all right, we're going to say, uh yeah, show the profile photos that sounds great. We're going to allow multiple selections, Perfect, all right, so we're going to save that now.

A

We've got this go away, saying I promise, there's a call there. It is okay, you know and again we can edit this thing all right. So let's add just on this one. Let's add to the squad all right, so the squad here will be me. I I want to be part of this. It's murdering Brian, we'll, add another guy here, uh that's great for now.

A

Okay, so click off to make sure it gets saved and we close it and that's kind of the out of the box and that's great if we try to apply that inline edit field, uh we're gonna have a couple of issues there right. So if we apply the inline edit field, uh just like I showed you before phone settings.

A

We format this column scroll that over and I'll grab that one from before, with that display value, that display value is really only good for some of your basic column types right, so things that have kind of multi properties like lookup, columns or person fields, or you know there are multi-lookup in general. This isn't going to work great. So when we preview that object object, wow that looks terrible right. So if we wanted to, we could instead change this into say instead of current field.display value, so equalism could join them together right.

A

So at the current field we say you want their title because that's their name all right. We're going to just join those with a comma and a space with a single quote, a dentist there we go and then let's put a parenthesis on there all right. We can do something like this and then it's a little better right. Now, it's actually an editable field and that's cool right, but you'll notice. One other thing that happens right.

A

uh We get this it just it's okay right, but we lost some of that stuff. We had right where we had their display, you know photo and so on. It's not even correctly showing it here in the edit view, that's okay right! So now we need to get a little more creative when we have something like this. The other thing we've lost is that person card right, so we had that hover field before. Let me remind you what that was: let's delete that save that right, so we had this.

A

So if we want to keep all of that intact, then we have to get a little more specific and how we want to do this. The other thing we want to consider is sometimes we don't want to just add editing capabilities across the board. All right, if you want to add editing capabilities across the board, to keep your format as well, then switch it to grid View and then over here, you'll notice. Some people know this is an option. You can actually save the view as when you go a little star like that.

A

Now, if I save it again, my default view is now grid view right. So when people come back here, they're always in the grid View, and if so, if you're, really looking just for a quick edit list, forget all this format stuff just do that? Okay, that's not what we're looking for here. So let me save again get rid of that and let's take a look, a little more depth how we might do set value on here so set value.

A

If we want to look at an example here on this one, we'll come back to the person field, we have this sample and this is a sample that's available again on our our sample. Repo all right- and the idea here is that you can edit this field using these arrows right. So when I edit, the arrow, it actually changes that Threat Level. This is a percentage Field behind the scenes and what the idea is, what the set value say. Action set value right into customer action and you're going to give an action input.

A

Now an action input is going to be the field name, it's the internal field name, but now you don't need the square bracket and the dollar sign all right. You just put that there you could actually put in multiple Fields. You want to update at the same time right. So maybe, when you click a button you're also wanting to you know, set the person that it's assigned to. You also want to set a due date. You know out one week uh and you want to set a status to. You know, assign something like that.

A

You could do all of that with a single button here by just having each field listed inside this action input all right, so in this case we're just setting the Threat Level right. So this is the the left Arrow and what we're saying is we're looking at the value and we're putting an expression, so this this can either be an expression. It could be another column reference.

A

It could just be a value right, so if I just wanted to put a 5 there, I could uh one thing to note it's a little weird is that on percentage Fields, the value that you get back is a decibel right. So it's going to be a value between 0 and 1, but the value you set it with should be a value between 0 and 100.. I know that doesn't make a lot of sense.

A

That's just something to note, which is why I'm, showing this example right here so you'll notice that I'm comparing it as if it's a decimal but I'm setting it as an integer as a whole number. So there you go, that's just something to keep in mind, but the idea here is super powerful right. You can start to set the value of all sorts of different things.

A

So, let's take a look at an example right, so I love to provide guidance, I, think one of the number one things you can do with formatting is to provide guidance and direction to your end user right, make it easier with what you want them to do. So in this case I, don't necessarily want them coming in and editing everything here, but maybe I want them to volunteer right or remove themselves from a list of people. So wouldn't it be nice if I had an easy button to just say yeah.

A

Add me here remove me here that kind of thing right, so I've got this list. I don't need to edit the whole thing I'm, just it's a quick boom boom boom. These are the ones I want. So in order to do that, let's take a look at a format we can apply here, because I've got a little more time, we're going to start over here and instead of action. Let's go down here and let's go like uh by column type and, let's say person right.

A

So here's a oh that's, actually a multi-person, because that's what we've got and the one I like to use a lot is the face pile so the face pile is this guy right here? What it does is. It shows all the profile pictures, but it also keeps that person card and everything so I'm just going to copy this head over back here, column, settings format, this column and let's paste that sucker, let's preview it there we go so it starts to do this now.

A

One of the things this does is it's designed to only show up to three people right at a time, and that's not quite what I want here. So we're going to edit this just a little bit here, so we're going to pull out a few things to make this kind of do what we want and I'm doing it this way, because this is how I make a lot of my samples I start with somebody else's sample, or in this case mine right, but then I tweak it right.

A

I I sometimes start from scratch, but a lot of times. This is how you this is the easiest way right, go grab a sample figure out what they're doing in it and then mess around with it. Break it a little bit so in this case, I can remove all the logic that says: hey look at the number of things that are happening and kill them right. So I'm going to do that really quickly, I'm just going to go in here and display here we don't need that, so this is the actual photo.

A

We don't need any special display Logic on that anymore, and then this is actually the uh that's the last one, which is the one that shows. If we don't have anything so we don't need that either. So we can remove that. Let's preview that see if I messed it up there, we go all right. So all I really did it's a little weird, because we only got two. Let's save that and add a couple more on another one here just so we can see what we're looking at. Let's add to the squad.

A

Let's add myself: let's add that neat and, let's add Dan sounds good. There we go and, let's add a Vigo horsenberg just so: we've got a couple more in the tiny horse, Junior perfect. Okay.

A

That will also help me illustrate a problem in just a moment: perfect. Okay, so now we've got some weirdness right now, we're showing them all, but it looks a little strange right. It's starting to shrink them down right. So what's really happening there um is. We are drawing for each one of these we're using the four each on this to draw a little person field, but they're all kind of getting squashed down. So we can do is on that parent element. We could say a style and, let's just add some wrapping right.

A

So we're going to say display is flex and we're going to say: Flex wrap is wrap boom there we go so now we're now wrapping those right. So now we're not cutting them off, but we've got ourselves a display, that's cool and we hover over them all right. We should get the let's save it and make sure we're actually just refresh make sure. We've got that person field still working that we want.

A

We don't, which is sad, I limited that somehow all right we'll come back with that. But the idea here is we're editing this we're getting. This is going a little bit here and, let's see where's my default hover field, I think that's what I've eliminated I have updated my default hover field. It should be the person iterator.

A

Anybody see that I think I limited the wrong one. That's all right! Let's just grab it from over here and we'll add it right back in so the idea is if I want to show that right inside my image here. I would add that here instead of the attributes right under here, I would say default. Hover field is going to be my person iterator if I preview, that now, let's see if we got that back there we go now. We've got that back right. So now, if I hover over them, we should get yep.

A

There's the person editor. So the idea here is cool. So now we've got something going, but now we want to add in that add or remove kind of functionality right to volunteer or not. So what we're going to do is we're going to add an extra little button over here.

A

So we're just going to come down here and we're going to kind of copy some of this stuff from before, and let's just write our own div here, just like what we did for the above div, because we want it to be almost the same, but in seven image we're going to switch it up a little bit.

A

So we're just going to paste that in we're going to scroll up here, we don't need a four reach anymore, bye-bye all right, so get rid of that and then we're going to say duh when we come down here and we'll go to our children instead of an image type right. We don't need that anymore. Let's just bye, bye, all right and we're just going to put. Instead, let's put an L Type of, say, div all right in this case we're going to say some attributes and we'll say the icon name, all right!

A

That's where we specify an icon and we'll head over to the way that thing uh How can I gnore my teams underneath there we go, we'll switch it that way, all right, we'll go back to flycon right. So flycon has all these icons here. So it's fucking.io if I go to the user, there's a bunch of options here. So in this case we'll take the this one looks good, add friend, I'm going to copy that go back over here. That's the icon! I want to show it's going to be add friend all right.

A

We can preview that to kind of see how it's going- oh, looking lovely right, but we're starting to get an icon, that's showing up, but you just specify the sizing and some other things here, but we could do that. So maybe we do that on the parent right. So we've got this div, that's showing up here. So let's add uh some attributes here. Let's add like some class, so class ew, all right so class, and here we're going to just add some classes.

A

So we're going to say msbg, color right, we're going to say neutral, lighter. If we do that, then we get this ooh pretty all right. So now, if we do that, we go uh msbg color. uh This is going to be the one we're going to add so I'm going to say green, all right, but I'm going to say dash dash hover and when I do that. Now it's on the green on Hover, now we're getting somewhere right. So now we've got that on Hover.

A

Now, let's check that text right so we're going to say the MS font color is neutral secondary and we'll say the MS font color Dash white dash dash hover. So we can get it. You know, but it's hovers, let's preview that so now we see our icon actually turns white when we hover it and let's change that sizing a bit as well, because that's not so great, oh Ms font, size, Dash L, let's try large, oh, that's, better, okay and by the way, where I'm getting these classes, where I'm just pulling these out of nowhere.

A

I'm, not we're actually listing those again back here. So we've got these grouped. So if you wanted to see like those uh those msbg colors I just typed right here, they all are so you can see, there's a bunch of those, but there's also you know the theme based ones. So you can see some of the neutrals down here. This is where I'm getting all these and you can see all the different samples that are using those as well.

A

So, if you're interested in these classes, this is where you find them all right now back to them all right. So that's cool! Now, let's look a little better. Let's you know position it the way we want right. So that's the way to do that is once again with flexbox, so we're going to say, display and we're going to say, Flex and we're going to just I'm going to justify that content, but that sounds fun. We're going to space it evenly.

A

This stuff isn't really formatting specific. This is more just understanding, flexbox, which is a bit of a beast in itself, but there are a bunch of websites we just type in flexbox that help you understand where all these different properties mean, but basically what I did there was I said, put it in the middle. So that's what I did. Those are the magic words for putting in the middle. So now we've got an icon, that's in the middle that shows up green. It doesn't actually do anything but we'd like it to right.

A

So now we've got this kind of plus button which helps guide that user. So what we do we're going to add that set value, so we're going to do that up here on the main div rather than that icon down below just so, we've got the full circle to click anywhere and say: custom row action there we go I'm hitting tab to have it auto suggest for me, and this one I'm going to put set value with a lowercase s and a uppercase V, and so then we need those action inputs right.

A

So action input you can see. It automatically tells me the field name and the value to set, so in this case right I'm, just going to put the value on the I want to set it on the squad, all right and the value to set in this case right. So this is a multi-person field. So how do I deal with that right? Because I don't want to just set I want to add to it. So the way you do that is you're actually going to set an array in here.

A

So an array is just a collection of objects right so but I needed to have my object in it. That I want- or not one in this case, I want to add myself right. So I want to say add me in there. So the way you can do that is we have these helpful little Expressions, so I type equal to say it's an expression, I can say append to so pen two takes an array and then it takes whatever value.

A

So the array in this case I, could say at current field right, but I'm just going to for clarity, I'm going to say Squad, okay, uh but I need the array, and the array in this case is not just Squad it's actually.

A

The array of the emails address so squad.email and then I'm going to say the person I want to add is me, which I've got this nice placeholder for my email address, which is at me I, just close that parenthesis and the idea is I'm saying, set the squad value to whatever it is already, but also with me inside of it okay.

A

So if we preview that or save it here, we go now, I should be able to hit this boom. I just got added, that's pretty cool right! This doesn't make a whole lot of sense, though I'm already in it. So what just happened right so now we need to change this around just a little bit. So let's go up here and do the opposite. So that's pretty cool. So, let's add another button to remove all right.

A

So, let's just grab all of that, and sometimes the easiest way to do that is collapse it and then you know you got the whole object, copy it and put comma and paste that sucker okay. So now we need a different icon. So let's go back to flycon over here and uh which one there that's that's leave user. Let's do uh I think it's called follow there. It is follow user perfect because it's got a little arrow on it because I can get out of there all right. Oh I made some beepings on my side.

A

All right! Follow user review that so now we've got a different button. All right! Oh, we don't want it to be green though so we come up here and we say instead of green right, let's put red.

A

So if we preview that now we get red that looks good all right, and maybe we want to put uh make this a little more obvious. What we're doing, let's put a a title right, so we can get a tool tip, we're going to say, leave all right and up here, let's put another one uh and this guy as well, because we didn't put one that would be nice of us to do that. So right after class, we're going to say title is volunteer I'm volunteering to murder them perfect.

A

Okay, so preview that now we get a nice little leave and volunteer. So that helps all right, but one of the weird things is well: first, we got to make the remove. We have to have this work so there's actually the opposite of a pin too, which is removed from all right. So we can do that if we save that so now, if I hit this button right, I should be removed. Perfect, so I can add myself and I can remove myself and that's okay, but I got two buttons.

A

So let's make those conditional because I don't want two buttons right. We want to guide users, not con, confuse them by having buttons that don't work. So one of the ways we can do. That is if we come to where we have display as Flex.

A

Let's make that conditional right, so we say equals and we're going to say if uh index of so index of can work on a string like text or it can also work on an array, so we could say add current field dot email, so that array, if me all right so the index of my email address in that list of email addresses in the field, is greater than negative one right. So negative 1 means it's not found, but if it is in there all right. So what was this our remove or is our leave?

A

So if it's in there, then we want to show it so flex and if it's not in there, we don't want to show it right. So let's close that preview that all right perfect so now, let's take that and we're just going to reverse it on the other button, all right, so we've got both buttons here we could have made everything else really conditional, but it gets really hard to do that.

A

I just like to make basically elements that are configured and then make them conditionally show I find that a lot easier to work with than trying to go and- and you know be real clever on on putting the formula in here to change it to green or red based on what it is I, don't do that I just do it all on the element itself right. So let's do that here.

A

Oop and the only thing we need to do now. Is this reverse what we did so now we're going to say none on this one on the true I'm going to say, Flex on the false there. We go preview that what have I done- oh I, said false. You can't talk and type, maybe that there we go so now. I've got my button right, so this is leave because I'm in there- and this is ad because I'm not in there, so that's pretty cool. So let's save that now.

A

We've got that and that's awesome, so I can come in here and I can say. No thanks. I, don't want to help with that. One or I could say yes, I do want to help with that. One sign me up right and you'll see that it's just updating the list item behind the scenes and that's awesome now. One of the things I wanted to mention is there is an issue here.

A

So we are working with email addresses exclusively on these on the people Fields, so you can update them with the username, but in this case we're just using the email just because that's the placeholder we have with the app me. But one thing to note is: if you've got users like I. Do that don't have email addresses like say, Vigo horsenberg here.

A

They don't have email addresses, so what happens when I, try and work with these email addresses the dies that fail so sad, right, I'm, sorry, Madonna, I can't join your squad to murder you and that's so sad right. So was it really Madonna? It was Madonna, that's funny, okay! So that's something to keep in mind if you have users, which I think is pretty rare, but if you have users without email addresses. This is going to be a problem and you're not going to be able to do this kind of fancy formatting right.

A

So in that case, you're gonna have to switch to one of the less fancier format options right or you know you can always just let them edit it by here um on this thing right so because you can still click and edit those okay. So that's just one thing to note and that's uh there you go.

A

Let's take a look at the slides and kind of wrap this sucker up well so inline in the field, so you can use that current field in the comb formats right so that inline edit field at current field is the the quick win to any existing format to make it quickly, editable especially helpful on those Choice columns, because Choice columns come with formats out of the box by default right, so get them configured with the colors and the icons and borders whatever else you want and then slap that on there and you've got a fancy field right and then, of course, you can use this quick format for most other types outside of the complex field, types like people and so on, and then finally set value.

A

That is important to note again, unlike everywhere else, for reference internal field names, you don't need the square Brack on the dollar sign and then all sorts of really cool stuff. There is one that I didn't show you, which is the replace, so replace, will actually remove it from the array and then add. Your item in between I haven't really found a lot of use cases where I'm wanting to do that, but it may come up, especially if you're, using a choice, column in a weird way. You know we'll say using a choice, column.

A

It actually means a couple of different things. You could use it for that and so on, but overall you're, mostly using these a pin, 2 and remove from for multi-choice or multi-person columns for just single person, columns, you're, just going to use the email address or not and so on all right. So if you're looking to find more details about all this stuff again, I should whether you can look at those groupings and that's where you can find all sorts of samples. There's some really cool samples out there doing some neat neat stuff.

A

The editing stuff really takes your sample or your format to a whole new level, so check it out and that's all I got boom awesome, Chris! Well, I tell you, I love how diverse and inclusive your samples are. I mean they're for everyone.