Microsoft 365 Community SharePoint, 31 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Accessing comment information in list formatting and advance form adjustments

Description

In this 14-minute Developer-focused demo, Chris Kent’s delivers tips to draw people’s attention to discussions around selected list items by more prominently displaying the number of comments on each item. Accomplish this by using CommentCount, a fluent UI icon and formatting. Be aware of and adjust for differences between how icon containing number renders slightly differently in forms, lists and tiles views. Use sample script in your list today! This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 18, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting documents:
• Documentation - Use column formatting to customize SharePoint | http://aka.ms/spdocs-column-formatting
• Samples – SharePoint List Formatting Samples | http://github.com/pnp/sp-dev-list-formatting
• Repo – Comment Count | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/comment-count
• Repo - Row Index Drawing | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-rowIndex-drawing

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: well, I'm chris! That's it! Let's talk about stuff, all right, so we're head over to our classic warrior horses site and we're going to take a look at a view. We've taken a look at before we're going to take a look, a couple of options with it. So if we head on over to our aquatic acids, as we all know, horses are worldwide and most of the world is covered in water, and you may not realize that horses control that territory as well.

A

So let's go over to aquatic assets where they track uh the various things they have in water and so on. So this is a giant list. We've used this demo before uh just to kind of illustrate this.

A

uh This sample, which is a sample I'll, show you a link to the sample in the end and the idea that sample is it's dynamically drawn based on row index right, so you can see it's getting deeper and deeper the further we scroll down right, regardless of sort and everything until eventually we get to a submarine and a horse. How exciting?

A

Right again, that is a sample that's available to you, we'll link at the end, and it's less the point, although I do have a reason for choosing this we'll come back to it. So let's say we've got this beautiful list and we literally do all right, I'm going to zoom that in just a little bit now, if I want to add you know so, if you see I've got this comments right, so that's cool.

A

I can see that I've got comments, so I click that I can come in here and we can do comments if you haven't seen this. Yet it's awesome right. If you open up the form you want to see me hit this little comments button. I had a comment that says that horse mines not hose mines, horse mines are best minds date all right and we'll just comment that right and that's great, and now we have this lovely uh comment, icon here and that's cool right and we can see that we've got one there.

A

We come over here to like uh laser shark 956.

A

You know- and we just say, lasers, we're having a very intelligent conversation, sharks right, wowie, remember the whole idea is we just got some comments that are happening here and now, if we look out here, we can sell which items have a comment uh by the way. If you don't see that uh the very first time you comment online you'll need to refresh for whatever reason, but if you hover over, you can see it's one comment or it's three comments.

A

There you've seen the tool tip there. Three comments, that's cool, but uh what? If we want to do something with that right, we want to actually use that in a format say. Maybe the title field is uh hidden right, so we're gonna show hide columns and we're actually gonna just take the title field out of there right. So that's where that shows up ah now we have no way of seeing which one do we have arbitrary comments on. It's very sad right. So we can add this thing here and now.

A

I've shown you in the past. The idea of if you just want to apply a format right. The tip here is to choose a calculated column of this kind of old school interface. When I chose more there and I'm just going to call this thing format doing very creative and hit equals and double quote double quote that creates this empty, calculated column and the reason we've done this in the past is because then you can apply format here. It shows up in display, but it's going to stay off of your edit form now.

A

Some other reasons for that are no longer true and we'll take a look at that as well. But in the meantime, let's take a look. What we can do with this format, so, let's format this column, I'm going to go to advanced mode. So I can just write this json myself all right, so we've got a little schema thing and now, let's add, say an elm type of div, because we want a box to contain everything all right- and in this case, because I happen to know we're building.

A

I know that I'm going to want some children. So I want some child elements here all right and we're going to say this. One we're just going to make another div all right and in this case let's set some text content so now we're actually at it. So what if I want to get how many comments there are know if there even are comments? Well lucky for you, we can reference the stuck any other internal com column. It's underscore comment count.

A

So if we use that- and we preview- aha, the ones that have those comments or had comments in the past right. So I had a comment here. I deleted it. It went down to zero, are going to show this number now. So I have a value in the comment count field so hey. I can use that right. We can start doing some stuff with that. uh So what if I wanted to be a little more explicit right, like that's cool, that one shows zero, but it's a little confusing, because this one doesn't show zero.

A

It's because no one's ever added a comment and then removed it. So, let's just do a couple things here: let's make that a little easier to see right, we'll come to the end of that we'll add a style that sounds exciting, enter there and we're going to type in uh font size we're just going to make a little bigger. So we can see it in this case. We're going to say: uh 16 pixels should do her. Let's preview on that. Oh it's pretty much right there!

A

So now we can see a little better, but now what? If we wanted to do things like work with this, so we want to show zero. So what if we said equals when we say if and we'll say, if common count right, then why don't you show the common.

A

Count comment count and if that is not a value, in other words, it doesn't have a value on it. You show zero instead right. So let's see if we can try that out bam. So now we have an entry for everywhere. So that's very exciting. Now what if we want to make that a little fancier right, that's cool, that we've got arbitrary text and we can use that in all sorts of different places. What if we want to go a little fancier, I told you we needed children for a reason.

A

All right in this case we're going to add another child, make sure we add our comma there and in this case, we're just going to put another div. So another box, we're going to put it above right and in this case we're going to say style, because we want to give it a font size as well we're going to say font size of 36 pixels.

A

We want this one to be a big one, because we're actually going to make this an icon right attributes and we're going to say that we're going to say icon name because we're going to pull out an icon.

A

These are the fluent ui icons, so we just reference them by name here and in this case we're just going to say message now, if I preview that right, that looks a little weird, but we have this beautiful common thing if we want the actual icon they use by the way, you can just switch this from message to comment.

A

If we preview that you'll see it's got the little quotes in there now for our cases. I don't want that um and I'll show you why. uh So I'm going to go back to message so that I get an empty version of that, and now I'm just going to do a couple things here, I'm going to change it around. So let's change out our style slightly. So I'm just going to come down here to this guy and let's change out.

A

Let's put a width and some positioning and everything else, I'm just going to copy that, so we don't have to watch me type it I'm just going to paste this. This by the way, is a sample that is open, source and free and available to you, and I will show you the link within the end. So what I've done here is I've now taken this second box and I've positioned, absolutely right so that it goes above that icon right so now I've got this wonderful icon right.

A

That shows uh the actual common count right in there, because I've hidden the title field, or I didn't like how that worked right. I always wanted to show comments, or maybe I want to do. You know a little fancier where I'm going to take a look at the the comment field itself. So let's go back up to our attributes for the main parent element. Let's add some attributes here in this case we're just going to say hey if the comment count is greater than zero right, which will be.

A

It won't be true if it's also blank uh then show it in the theme color, otherwise kind of fade it out a little bit, because we don't need it to be very prominent. Let's preview, that there we go so now, we've got them in that nice horse brown right here, for when they actually have comments, and so on. So you can see. We could actually do a lot with that right.

A

We could conditionally show uh actions if they have comments right, draw people's attention to the fact that there's a real discussion happening here behind the scenes, and we do that all by referencing, this kind of hidden column. It is not a column, you can just add. When you go to the show hide columns, you can't just get an arbitrary comment count, so you will need to use formatting if you want to use that value in any way. Okay, so that's cool, very exciting!

A

I'm going to just save that, and you know we can do things like we switch to a tiles view or gallery view we switch to that right. We'll get this kind of default out of the box you'll notice. Our format has nothing in it because it's a calculated column with a value of almost nothing. But if I format this current view, if I switch to advanced mode, I've got basically nothing. I've got to go in hard mode, but if I go back to design mode I hit edit card, then I switch to advanced mode.

A

Hey look at that. They did all the work for me right. So that's exciting! I'm gonna just randomly increase the height here. uh Let's go 25 just because I know what I'm about to do preview that so it gets a little taller. But if I scroll all the way down here in this format, there's a couple things I want to point out. The first is you'll notice.

A

There's a p tag here, so we can actually do a paragraph tag now, you'll see that the schema still doesn't say it's allowed, but if you inspect the element, you'll find out that indeed you can now pass the p tag in as the element type. um That may be very helpful to some of you, uh but one of the things I want to point out here is instead of this format, which is trying to just get the value of the format all right, we're gonna do that trick.

A

We did a couple of weeks ago when we showed it, which is the column formatter reference, and in this case we're just gonna, say our format column, all right, we're just gonna reference it that way and we'll hit preview and oh and you'll see now look at this. This is interesting, see it's showing the format, but now we've got the the actual numbers floating way up to the top. You know what's happened here now, I'm going to save that we'll come back to fixing that in a minute all right. So what happened here?

A

Why is it look different here versus when we're not in that view right? So when I'm here it behaves correctly and in fact we're going to see another problem here. So if I open this up- and I look at the form in the past format- only fields would not show up here now they show up with this. This is a read-only field, but they don't show your format so just calling that out, it's a bit of a pain right now, so one of the things you can do is for these right.

A

If you still want to use these or if you have used them in the past, you can hit edit columns, I'm going to take my format and I'm just going to uncheck it all right, and then we save and no longer there. But what? If I also want to see it right now, so I'm going to arbitrarily copy it right now, so column settings will format.

A

This column, I'm just going to grab that format that we did before and I'm going to swap over instead and just use the deployed column because it already exists and we're going to hit advancement, I'm just going to paste it in there just so we can see it show up on the form preview that now we have the exact same format.

A

The reason I'm showing you that is because we click on it. We have the same problem you're, seeing all those tiles you see that one. If we look really closely is up here by deployed instead, so we have a difference in how those are being handled. So what's happening is the parent element. That's inheriting styles is different when it's in the row view versus when it's in the form versus within the tile.

A

So what you're going to want to do is test right so make sure you're testing these things.

A

So what we can do is we can just edit that format so column settings, I'm going to format this column again and all we're going to do is up on the parent, we're just going to make sure we set some base styles that match the base. Styles, it's already getting in the row, so we get those that same thing.

A

So in this case, I'm just going to add style tag and what I need to do is, I need to add a position of relative and the height is 42 because the height here the row is going to be 42 pixels, but when it comes in the form it's going to be based on what your format is. So because we made this icon, 36 pixels it'll be 36, pixels and it'll, make our little number here not be centered and then we'll be sad. There'll be so much tears and crime all right.

A

So, let's going to save that and then we're going to swap over to our format just so I can show that it's fixed in the tiles view. So let's save that so now, when we look here, hey look at that that fixes that. So again, we have to kind of set a baseline on some of those properties so test to find out what you actually need to correct and you'll find that if we swap over to the tiles view uh once again now that we've corrected that it's going to be corrected as well.

A

So that's an important kind of distinction. One other thing. The reason I pull up this particular list is to point out that in the form you see, this boat is based on only drawing in row index of four, and yet it shows here and if I pick a different item, all right, you can see now it's the blue, so the idea here is the row index in the form is still going to come from the row index. It was when displayed right so now this one's a row index.

A

So if I'm sorting this by that date, right you'll see that everything changes here, but the picture still draws because it's based on the order. So even though it doesn't have a commas anymore, it's still going to draw there. So all that to say I throw a bunch at you to point out that there is a real difference between what's displayed here in the form uh and what is displayed in the tiles view, and so on. So just be aware of those.

A

Now, let's swap back over to our slides, that is not how you do it there. We go slides, okay, so first up that column count empty with no comments. That's the total number of comments. There's also a comment flags you just reference like any other column and then form considerations. So again, those formats are not going to show up the way they used to uh the row index is still going to work. This is the big one though, so the format is not aware of the render surface.

A

So when you do your format, you don't know if you're rendered in the web part, you don't know if you're under the list. You know the list view uh mobile device, you don't know any of those types of things you have. You have some indication of like layout size at time of render, uh but that's about it. So what you want to do is test everywhere right, so the inherited styles are going to differ at times, so just look at it in multiple spots to make sure that your format is fully covered.

A

You don't want to be surprised when that, when those numbers flow to the top all right and there we go so there are some uh samples out there so that sample that shows how to access the comment field um and show how to kind of render that with that absolute position is available and then, if you are interested in that submarine, drawing for whatever reason that is also available to you and you can check that out all right. That's it! That's a look at excellent, excellent, excellent! Thank you, chris always entertaining stuff for sure.