Microsoft 365 Community SharePoint, 29 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List item filtering on modern pages with complex dynamic view formatting

Description

In this 12-minute developer focused demo, Chris Kent’s objective here is to make a list with topics and lengthy descriptions more readable and interactive. Create 2 new views (list and gallery) for the same list. Gallery view for button like navigation (topics), and List view to create mini navigation – to move up/down through item descriptions. Use “ID” attribute that links everything together with anchors. Expose views on webpage. All bowser - client-side with out-of-the-box formatting. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 11, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples – List Formatting (View samples - Content-browser) | http://github.com/pnp/List-Formatting (Sample available very soon)

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, hey everybody, I'm chris! Let's, uh let's talk about some of my list. Formatting stuff, that'll be fun all right, so we head on over to our warrior horses site, get rid of all you guys all right now, the uh the horses. You know, they've got all sorts of things they use in battle right, they've got weapons and all sorts of things we've gone through before they've got battle plans. They got agents everything else, but they also have tools right. So tools can cover a variety of things.

A

So, of course they decided to put those in a sharepoint list. You know- and that's great so they've got this tools list and that's okay right now. Some of these are kind of long. So, in order to read them, you got to click this guy right, it's it's! This is not great right, but I mean this is a list formatting demo, so you know we're going to make it better. So what are we going to do?

A

Well, we want to make this a little more readable right, a little more usable, maybe a little more interactive, ish right now. We kind of want to create something on a page, but we don't want to pay a developer that costs money. So luckily, uh we've got uh some skills here with the list formatting. So let's take a look now. The first thing I'm gonna do is we're gonna create a new view and the reason we're gonna do that.

A

So we just have this list uh kind of for editing, we're just going to call this content content and we'll just create that and it looks exactly the same now. I have found that, for whatever reason, if you choose to format things right now, uh it'll apply it to the original view. So I'm just going to go directly to that view that we just created just to make sure all right.

A

So I'm going to come in here, I'm going to format this current view and I'm going to paste something in just so we have something to start with, so you don't have to watch me type at all and then we'll start working from there, and so, if we take well, I've got it on the other screen. I'm going to paste this in in our lovely, advanced formatting box and we'll go through it very quickly. What we did.

A

Oh, we didn't do anything apparently so just refresh the page here, because there we go okay, so here's what that format is doing. So all this format does so far. Is it places the title up here makes it a little bigger, makes the text a little a little higher and then we're setting the height to 240 pixels I'll come back to why that number is important in just a little bit here, but we just got it.

A

It looks a little better, a little easier to read right, but what could we do with that to make it a little more interactive type stuff with a page? Well, that's where we can start to use an attribute. We haven't really covered before so there's an attribute uh that you're, probably familiar with uh called id. So all we're gonna do. Is we're gonna?

A

Add that in here right now, let's put it right here on the main guy right, so we're just going to put attributes and that and then we'll select an id and for this we're just going to build one. So we're going to kind of make a dynamic one, we're going to say so in order to do we're going to say equals, I will just say tools, or this is a tool and we're going to say and on top of that add the end of that at row index right.

A

So we're just saying the row index uh tells us the order in which the item was rendered so exploding hope is zero. Decoy has one and stabbing knife is two and we're doing that because we know it'll be unique for our particular list. So there we go, we've got that if we preview it nothing happens and that's cool uh because we haven't done anything with it. So what can we do with that? Well, let's take a look.

A

One of the things we could do is we can add a button down here and in this case it's I say button. It's just going to be a link, we'll add it here right next to our title and we'll say elm type of a because it's a link, we're going to make an anchor here and we're going to say you know our attributes for it we're going to make this an icon right. So all right, you could help with the intellisense here. So I'm just going to paste the attributes here.

A

So we don't type that and I'll tell you what I did. I want to make sure I get to the other part okay. So if we take a look here, let's preview, that we've got this lovely button right. So what we're doing here is we've just set an icon, we're calling this one, it's chrome back, which just really means a left arrow all right. We've got some stuff that controls how it looks here with some classes.

A

So we get a nice hover, ooh fancy and we put a title which just tells us we're going to go to the previous item right and then you'll notice, our href here. So that's where we want this link to go, we've started it off. We're building it again and we're using almost the exact same thing we did from the anchor up above right and we're from that id we're saying a hashtag right or an oglethorpe or whatever.

A

You want to call that guy uh tool underscore and we're going to add the row index, but instead this time, because we want to go to the one before we're going to minus 1 on that we're going to put that in parentheses, because row index is a number, if I put in parentheses, we'll get it to auto, convert to a string which is exciting and then the other thing we're doing here is some style stuff, including one because we happen to know.

A

We don't want to show a previous on the very first one, we're saying if you're, if you're the very first one you're zero, you have to worry about it now we're going to add an almost identical button here for the next and we'll just paste that right there and we'll wonder what I did. Okay, doesn't like something: oh, because I pasted in the wrong spot: let's try it right there we'll see if we can fix that, I think we got an extra piece all right, we'll format this document there we go, looks a little better.

A

So now, if we enter valid jason, ah look at that come on okay! So now we'll put a comma now we'll format that document. Oh, it's so much, prettier preview that now we've got two little buttons right. So let's save that and what does that do for us all right. So if I click on one of those it kind of scrolls, it's a little weird here.

A

So just trust me on this one: we're going to take a look at a page and see how we can use that. So if we head back here, we're going to create a page, go new! I'm going to go to page now, I'm just going to do a blank page here and we're going to just make this simpler. All right, we'll call this uh some tools, it's a great name and we're gonna just remove this guy. We don't need that. Okay! So now, let's add our list to the page, so we're gonna use the list.

A

Web part add the list we're going to scroll down here to find our tools list and then here we're going to edit this. So we see this and we're going to pick our view that we just made, which is content and we're going to turn off the command bar all right and we're going to turn off the see all button and then we're actually going to set that size to small and that's where that 240 pixels of height comes in right.

A

So now, if we publish this page and we ignore all our first time- publish fun stuff there all right- we get this little miniature a little miniature navigation right here on the page right. So now we're seeing now technically you can scroll through all these. But we've got this kind of nice setup here and we can go a little further with that right.

A

So if we go back to our tools list- which we'll just do that here, up top we'll just click that in a new window so go back to our tools list, we're going to add another view all right. So here we go we're going to go, create new view and this time we're just going to call this uh links right. Now.

A

We're going to call this a gallery view and we're going to create that, and it's going to look very exciting with the kind of default uh established links and we're going to edit that so we're going to format the current view and we've got a card designer which is great to start with we're going to hit edit card and all we're going to do. Is we're going to take out that content and we're going to stop showing the column name.

A

So we just have the title sitting there in our little little rectangles, all right, we're going to save and then we're going to hit advanced mode because by editing it and then going to advanced mode. We got microsoft to do the hard part of generating most of this for us right and then we can just edit it so by default. When you do that, one of the things it does is it adds kind of a floating button above the whole thing, so that anytime, you click it. It's just going to open the list. Item.

A

That's what's happening here with this default click. We don't want that behavior. So instead we're going to say get out of here. Guy, that's doing that.

A

Okay, we're gonna make this a link right, so we're gonna make an anchor, and in this case we're gonna make the href right. Let's put that in the attributes, we're gonna make this guy href and we're going to make this also very similar to what we saw before so we're going to make the expression that equals equals, I'm going to say, tool underscore and we're going to say the exact same thing as before at row index right, because we know the sort is the same as these.

A

So now, we've got this we'll put our column up here, preview that and just to uh make ourselves feel a little better. We're going to come all the way down to this, the paragraph that has the title in it and we're just going to add a quick stop.

A

I'll put a text line and we're going to put center, so it looks just a little better right there. We go that's very exciting. So now we just have this beautiful thing here. It doesn't really do anything. No, I forgot one other part, which would be that I want to hide that selection. I don't want that happening. No. Thank you. Let me move that extra selection stuff. So there's not true on that, and let's save that so now we get rid of that now.

A

What the heck are we going to do with these right, so we go back to our awesome tools, we're going to edit this page again and now we're going to edit the section. So we can add a column over here we'll make this a uh one-third left and we'll just drag this guy put them over the big side and, let's add our list again in this case, we're going to pick tools once more and then we're going to say our view.

A

We want to use the links view we just created and we're also going to hide the command bar and hide the c all because you know we don't need that apply, and then you know we'll make this. uh You know tools that sounds good. We'll call this one. Instead of tools, we'll call this uh details and let's republish that and let's take a look. What did we just do all right so now, we've got this beautiful page where we can actually have some navigation.

A

Well, I don't know what I oh. I broke, the I forgot the hashtag so one moment. So, let's go back in here when we built this link here notice. I forgot to put the pound sign right, so now we put that in front. That's what makes it an anchor link all right. Otherwise it's trying to go to a page is what we saw.

A

So, let's save that and let's go back here and uh let's go back because that page doesn't exist all right and refresh here, just to make sure we've got everything and let's take a look so now we can go cloaking, stable and oh boat hammer and so on right, so pretty cool you'll notice. We didn't, I mean we wrote code, but technically we didn't write niko, we didn't deploy anything.

A

We did all of this in the browser using the out of the box uh formatting uh to start with right and then we kind of just customized as we needed. You can go a lot a lot crazy with this right. So the idea is, you can start to build an application with this or a nice little display piece right.

A

If you wanted to add some things here with the cover cards or you know additional details over here, you could even add an additional view with a list of like categories that filters both of these and again you're, not really doing anything outside of creating those nice ids that link everything together with anchors. So there are a couple of gotchas with this.

A

Let's take a look at the powerpoint to review and take a look at those gouches there we go so when you're using that id attribute there will be times it gets flagged because it's not necessarily part of the schema. Just yet don't worry about it. It does work as we saw, but it adds an id to an element which can be used for a lot of different things in this case we're using it for anchor links, but note because it happens client-side.

A

So when you format your list, whether it's in the web part or on the page, all that format is applied. Client-Side linking outside of the page directly to these items does not currently work, but you can use that for those kind of internal links. So, if you've got a long list- and you want to hop between list items, you can certainly do that right instead of the row index, you could use the title the list item you can use the list item id whatever you want there.

A

You can build those dynamically uh to create these kind of really cool interactive pieces. um You could use that with some of the other dynamic web parts that exist, whether that's your custom ones or using things like the embed or the list properties to show some additional details and then navigate using these ids can create a pretty cool application altogether without having to deploy any kind of spf x or anything else, all right so uh check that out.

A

uh This sample is called the content browser and will be available, hopefully, by the end of this call all right and that's what I got for you thanks.

A

Thank you chris, like always great demo. Thank you. So much.