Microsoft 365 Community Column and view formatting tips, 8 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - How to use forEach and loopIndex to create awesome looking list views

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 4th of April 2019. In this video, Chris Kent (DMI) shows how to use forEach and loopIndex to create awesome looking list views

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-4th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

All right, so this me Chris tips developing to be core team, all that stuff. Okay, all right, let's start started with some cool stuff. So a couple weeks ago, I showed you some stuff on how to use like index of as a function. Do some contains right, so we can see when we were inside of a multi-select person, column right, alright. So then we also did some stuff.

A

Here we do MultiChoice icons right so gave you some cool tips on how to use the index of new, contains or starts with, and that's all cool, but what? If we want to go a little further? Let's make that so I can actually see it there. We go alright, okay! So what? If we had to do something where we don't just want to know ahead of time what they got right like in a person column right, you could have you know, hundred thousand people in the organization you can't prepare.

A

You know a special icon for each one of those, so we want to be able to do something cool right. So let's say I've got. For example, I've got this very exciting choice: column here, just gotten letters as my choices. It's a multi choice, column, hopefully you'll catch up here to say, go, doesn't catch up just you know, be sad and cry. Okay or you know rejoin. What are we gonna do? Okay, so you come in here and I'm in a good column, say I'm, gonna format, this column.

A

Alright, there we go, see them I'm, just going to take a very basic format. I'm gonna paste that in there and all this is gonna do. If we take a look at it, it's just going to draw a div and put an A and it's gonna make some pretty squares. So.

B

I made a single.

A

Square and that's okay, right now: what if we want to actually draw an element right or even a complex element? That's got multiple children and we want to do lots of conditions per choice. Well, luckily, we can do exactly that with the new for each property. So the cool thing is here on our child property. We can come in here and we gonna have this for each which is brand new as an FYI, a does not in the schema. So if you're, using some, like vs code expected to get flagged but trust me, it's.

B

Working this magical all right, I'm.

A

Gonna come here and we can type the head our virtual field name and, if I come back to that, second in Hartfield right. So what this is to do is this is actually going to convert this element here into a template element. So now it will now create one one element that this is nested in for every item in our array, in this case, with every selected choice.

A

Now this choice- iterator, you can name this whatever you want so I'm saying best practice is to have the word: iterator need to use the column type or the column name, because you can clobber over things because you're creating any virtual field. Let's see what that looks like we got a comma all right, let's preview, that for every one of our choices there and we're gonna have to take advantage of those values.

A

Now I'm missing the idea of a virtual field, so a choice: iterate became a virtual field copy that so where I'm referencing things say in the text content instead of a I get reference just like any other field, syntax. Alright, my choice, iterator is now a field. You do the same thing over here in the tip there now when I preview. That boom now is something those values right and we can start to see that everything gets pretty cool there.

A

So if we do something a little crazier where we come in here and we start editing stuff, we can so we want to add you know additional things. We can access everything else just like we normally do all right. So it's BG color.

A

B

We're just gonna access.

A

That I wanna say maybe it's not equal to see, sounds good all right. Let's do the theme primary and otherwise it's too yellow for our color.

A

Let's see if we did that on the fly boom, so you get the idea here so now you can start to do some really really cool stuff. So, as you can loop through your multiple person columns or your multiple choice columns, you can do everything you could do normally when you get this idea of a templated element, and one thing to note is that you cannot use the for each and the route elements up here and which makes sense when you think about it, you have to have a container for all these elements. You're creating.

A

So you can't do that to get to at least one child down, but the nice thing is you do this even further, so let's take a little.

A

Site now reasonably, we all know that the warrior horses would corporate, but even further than they've got several corporate initiatives right. So one of those is more inclusive. The opportunity does that word, inclusive to I, can't say that word is valuable and they want to make sure they provide more visibility to each of their individual horse slaves right. So if we go here, we've got our classic things. I'm gonna get this assigned to now, that's okay, so we showed how we can work with that text before Robin you have to join.

A

But what, if we did something like to come back up here to our SP devilís formatting right, we've got the some of these samples and we come down here. We have this cool one, the person round image format right. So this allows you to show a person with that cool little profile image, so we're just gonna grab that and what this is designed to work with a single column or our single choice, person field there we go alright, so I'm going to format this guy.

A

Okay, well paste that and you'll notice that that's a little screwy right. So we got rid of the fact that multiple selected- it's really only able to act on that first one and then even then, not so successfully. Now using what we just did, we can easily convert that alright, so you come in here. We're gonna have that for each so you could take that previous template looking out before each on it believe it say person.

B

A

And that that's made up by me, but I will tell you if you use something like title: you'll never have access to the title field from them at that point forward. So.

B

Just make sure you don't clobber.

A

It okay, I, don't have nice margin here, so they'll all stick together.

A

Alright and then the only thing I need to do is down here where were referencing our fields, we're gonna, get and replace that let's do a copy that self aside for the person iterator alright. So now we just come in here and we can say just like we would any other field. I'm gonna grab that email grab that title.

A

He does something like that and we preview it boom. Now we started to get all sorts of different people, so this is really really cool, but you'll notice. We've got some issues here. Where anytime we get over three people. We start to get weird shrinkage. Nobody likes weird freak kids. You quote me on that right, so we want to do something a little more elaborate and the only way you can really do that is to know some things about where we are inside that loop. You know and make some adjustments on that.

A

So we want to do something very similar to the UI fabric, face pile right. So we've got this thing where we want to show a couple people and when it starts now look good anymore or we want to show this kind of descriptive overflow button where we show how many other people were in there all right. So how can we do that? Well, the only real way to do that.

A

So the only way you can really do, that is to start using something called loop index, I'm just going to go ahead and copy that one here. So we've got some samples see. So we come back to our column, samples of that one from before. I just showed you the multi choice for each is there with those letters. So it's a pretty simple or a simple: it's just a straightforward version of the for each. We also have this new one here, which is the multi person face part.

A

So if I come in here and I grab, this I'm just gonna grab it and then we'll go through what it's doing. I.

A

Feel, like you guys, aren't actually having a conversation just messing with me: okay taste that preview that so what's actually happening there right. How did we accomplish that? Well, that's where we get this cool new guy called loop index, so we come in here and we could say our display. All right is if the loop index on the person iterate is greater than equal three. So what does that mean? So the loop index is a zero based index of where you are inside your for each loop outside before it's loop.

A

That means nothing, but when you do that, you can specify through a string whatever iterator name. You chose whatever your virtual field. Name is put that here, don't use the you know all the stuff to get that, but you just put it in here the reason you have to specify. That is because you can nest all of these four eighths loops. Okay. So we put this so all we're doing to say: if you've got more than three of these stop showing right all right, then we come down here.

A

We say hey to our standard image element, we're doing a quick check to say, hey if you've got more reason, the length function, which says how many actually selected items we have so how many people we have. We take a look at that we say: do you have more than three of those?

A

You know don't display this if your Dom on the third one I know you review this logic later, but the idea here is: we want to show it normally if there's three or less and if there's more than three, we want to show this kind of extra element. So you've got this extra element. We've stuck in here. It's not a part of our for each loop right, so the for each loop, I just probably suit, but on the forest, my gosh, it's abstract about is in this case. Okay.

A

So we got this cool thing here, where we're just checking to say hey if you've got more than three and you're on the third one, because it's zero based index then show it otherwise, I hide this little thing here. So that's all we're doing so. The cool thing is now: we can start to do stuff where we can apply these complex objects writing again. We can nest these. We can have multiple children and we can reference their values all throughout it.

A

We could also tell where we are so if we wanted to tell where the last one was, we could do all that, and so it's pretty really it's really powerful stuff. So if you haven't checked up the for each loop, which of course you have because it's brand-new now, you can alright.

A

One last thing to note is down here: I'm doing some things where I'm just determining what that number is bug here, where, when you go to minus a number from a complex field, leader up in parentheses, if you're interested there's an issue- and you can follow along on all that all right- let's click here so to review the 4-h. This is a do not enter the root element. It will not work.

A

You'll get an error, you will cry all right, but it'll turn your element into a template and is repeated for each item in the array. If you don't want to repeat it for each item, the erase like we do with the people, you can use that loop index I determine where you are on the array and cancel some of that stuff based on the values either. The fields.

B

Or other fields.

A

Are based on the actual position in the loop, it is alright and creates the virtual field. You can nest these and for loop index, it's zero based. It is position and you make sure this is the weird one right. So don't forget, your single quotes around your iterator name. You forget those. You might be kind of sad, alright.

A

Moving on here. These are the resources check out the full documentation. There there's two new samples that both handle the for each there's: a multi choice for each and the multi person face file. I've shown you both this column samples, but these can be used within view formatting as well. So you can use those with that row. Formatter element, no problem and if you're looking for a little more detail, you can check up this link here, and this will take you to a full write-up of everything we talked about in the blog.

A

B

Excellent, thank you Chris awesome stuff, as always, selecting actually moving back on the slides, because we continue from there. Quite a lot of people actually put this bedding on the under discussion under a window as well, really good, really really cool stuff and good to get that one recorded as well and like you've, seen Chris always provides the samples and the samples are available. There was a question related on.

B

Is this available out of the box in a sharepoint online answer is yes, the column formatting of a formatting is on sharepoint online in modern lists and libraries and those are getting rendered properly. Also in the list webparts, and if you embed any of the SharePoint page, is your point lists directly in themes. Everything is included in the dean's rendering as well. So that's absolutely available.

B