Microsoft 365 Community SharePoint, 25 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Randomization with List Formatting

Description

In this 13-minute developer-focused demo, Chris Kent renders a randomly generated stack of informational cards with the last card in the reshuffled list showing up at the top of the stack. Whenever one visits the page hosting this list view - a “randomly shown fact card” will render. Randomization is based on the calculation of time in milliseconds - Number(@now) function. The resulting value is used to select an image. A This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 25, 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 samples (random-item) | https://github.com/pnp/List-Formatting/tree/master/view-samples

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

I'm chris, let's get started all right, so we head over to our classic warrior horses site, which is over here, okay and we're on our classic warrior rehearsal site. Now, a lot of the warrior horses are american-based, of course, so a lot of them are celebrated thanksgiving.

A

uh You know, because I mean the pool blood of enemies is like so much cranberry sauce and you know the tears of the fallen. They flow like gravy on the mashed potatoes of their victory, and uh you know like, like most americans, this is the one day a year that americans can overeat, and so the horses are largely indulging in that. But for now we're going to take a look um at a quick format.

A

They've got this nice little uh secret passwords list up here, and so what we're going to want to do is uh head over there and uh wait a second. What is this? What is this? Turkey.

A

Some kind of uh takeover of the horse's site, so uh maybe we'll uh skip uh the format of the passwords and you know maybe storing passwords in a uh a sharepoint list, maybe isn't our best plan anyway. So, let's head on over to our gobble site and let's just refresh that get of all that uh threatening stuff.

A

Now we have been to the uh the turkey site a couple years ago on thanksgiving uh and when we were there right, we we saw the uh the turkeys, helped us I'll, build this lovely video viewer using only this formatting right and it was wonderful. We can hear 10 hours of turkey gobble any time we want and so on, and that's really cool well turns out. The turkeys have just handed me a script and uh they want me to demo some other things here.

A

So they have this nice list called facts right, so in it they have placed a series of turkey facts. These facts come directly. If you, google, turkeys in bing, these are the facts. So very exciting did I just say: google and bing, I sure, did thanksgiving all right, but let's take a look at something we could do with this. I mean this is lovely, but they want to make this a little more interactive right. uh So the first thing we'll do: let's take a look at some of the a new thing to do.

A

We'll just call this uh whatever, because we're not really going to use this too much whatever. Whatever there we go, we're going to save that and the holidays. We just want to call. We can format just so we can see uh things as they go zoom that slightly there we go and let's go to advanced mode. So we can write our json directly. Let's make that a little bigger and now all we're going to do is we're going to make sure we have uh our code over the other screen.

A

So I don't mess up here, all right, we're going to say old type, right, we're going to say it's a div and uh we're gonna wish that didn't happen as well, and then we're gonna, try and format that again, I've had some uh weird things with my keyboard. I don't think I was having this on these format things in uh this little monaco editor. So we'll just forget that for now I hope no, we will not all right. Let me try one thing here. Let me just turn this on.

A

I normally turn that off for the demo, but let's turn it on for now. Just so we can see if we can actually write our formats all right, even with that not on let's see if we get film type div all right, I'm not sure what uh what difference that just made, but we'll figure it out a little bit here, but the idea is if we wanted text right, so we just want to display something we're gonna put.

A

You know turkeys right and the idea here is: if we do, that, we have this lovely text in every line here: we've written turkeys inside a dip so we're generating the html div and we're putting the text inside of turkeys. That's very exciting. Well, let's see if we can try something else now.

A

Some of you may have seen this lovely guy before so at now is the time at rinder in the local time zone of the user, so eastern time zone here in the united states for me- and you can see that's pretty cool and they're all the same, pretty much because they're all rendered about the same time in terms of seconds.

A

But what we may not realize is that if we wrap this in a number like this- and let's make sure we put it equal since we're now doing an expression and preview that what we're actually seeing there is the number of milliseconds since 1970 or something along those lines right now. What is interesting is that, although things render very very fast you can see, there is actually a render time difference between rows right.

A

So, even though this is running very quickly because that's milliseconds that changes well, that opens up some very interesting possibilities for us all right. So how can we use this? Well glad you asked right. So one of the things we could do is uh we could use this so first, first off, let's make this a little bigger. So let's see that so, let's have style and let's add that let's go just font size, I'm just going to make this way bigger. uh We'll say I don't know 44 pixels! That sounds very exciting.

A

Oh it's huge! Now you can see a little bit, but the idea here is if we say that right- and we could say uh modular right by two, so modular is just going to tell us. What's the remainder after we divide this by two. In this case, we're going to say it's either zero or one right, because those are really only two options. So if we preview that we can see, we get zero and one, but if we save so we can keep rendering it you'll notice.

A

We essentially have a random value right between zero and one. Now that's cool right, so how can we use that so the traditional kind of randomized uh way to write this is you would if you wanted to do like a range right so say we wanted to do uh between.

A

You know, let's see, 0 and or 5 and 10 right. So we want to put our min and we would add that and then we would say instead of mod modular by 10 sorry, I've got someone knocking on the door here, I'm trying to do my children, uh so instead we would modular that by our maximum value, plus one minus our min value. Now that is pseudo. That doesn't actually do anything. So in this case we're just going to replace this.

A

So if we wanted to value between 5 and 10 right, we'd, say 5 here and we put 10 here and now we should have any values between 5 and 10. all right. There we go beautiful. So that's a cool way to do that. So now we've got this idea of random stuff right. So how can we use that in formatting as an if any practical use? Well, yes, ish how's that sound. So one of the things we can do is we can wrap this up.

A

So let's get rid of text and so, instead of text, let's actually make this um an icon all right. So let's do attributes and we're going to say icon name and we're just going to put the same kind of formula here, but in this case we're going to say equals if and we're going to say that same thing number at now, and we don't really care about the range this time so we're just going to say between five different things and we're saying when that equals zero.

A

Why don't we do an icon of a flower that sounds nice right and then otherwise? Why don't?

A

We do an icon of balloons there we go we'll close that up, and so we can see that now we're largely going to get uh balloons right because we've only given one case where we want to do flower now, if we expand that out a little further, we can just kind of keep cutting and paste, and so, if we grab this, if and we grab all the way up to there- we copy that we're just going to paste that in again- and let's make sure we add our closing item here and so instead of flower now, let's type, uh let's type a guitar that sounds exciting all right, so we've got a guitar and now, if we preview- let's change this to a one.

A

So the idea is now we've got hey. We've got a guitar, that's showing up in the mix, sometimes right with our flower and our balloons, and we can keep going out a little further, I'm just going to cut and paste for time uh the rest of this exciting formula. So you can see it's just extended out now we have this idea of you can be a flower, a guitar shirt or even an xbox controller or in the case where it's a four which you're not seeing here. That's the else, it's balloons.

A

So if we save that, hey that's pretty cool and we can even go a little further right, so we can add a class right. So if we want to set some colors here, I'm just going to take the exact type of thing here and I'm going to place it up above it all right.

A

Let's put it right here, let's put class and let's preview that ah now we've got this idea of colors to kind of get applied now, you'll notice, it's it's not common, but it's not exact right, because this isn't a true uh variable right, we're not storing this and then evaluating each time, it's being evaluated each time, and so it is possible. Although it's pretty unlikely for my testing, um that the milliseconds will change in between these, it still creates it pretty random.

A

But if you're trying to coordinate randoms like colors with icons, that's going to get pretty difficult, okay, and in that case, what you would want to do is randomize some of the display and some of the other items with these as a whole. Okay, so that's cool neat right. So what else can we do right? So we can do this. We can show random things. We can kind of make our formats a little more dynamic when they get refreshed on the page. That's pretty neat! So let's just save that.

A

But what about uh we want to use this a little further right, so the turkeys have gone through they already recognized. uh This was pretty ugly right. They want to make sure they really emphasize things like their distinctive fleshy, waddle and so to do that. We're going to switch over to this fact list where they've applied a format already now. This is a view format and all it's doing is showing everything kind of like a card view right so and there's a reason we didn't use the gather review.

A

Let's come back to that in a minute, but if we format that- uh and let's make this a little bigger, so we can see right all this is is it's just got a big box with some rounding and then it's got. You know a box for the image and a box for the title and a box for the details. So there's not a lot going on here.

A

What we're going to do is we're going to take advantage of the fact that we've hidden the selection, that's going to be really key for this, and taking advantage of the fact that this is something we can't do in the gallery review because they are wrapped in a wrapper around them. But here we're not, and that's all we got to do. Is we add this right here? We're going to say position is absolute, all right, we'll do that repeat they all get stacked up on top of each other.

A

So now we've got essentially one card display and it's always the last item in the list, because all the other ones have been rendered underneath it they're all drawn in the exact same spot, and you know that's an interesting idea, but why don't we say you know a little something else here which would be our z index, so z index controls the layering, so the stacking of items in html right?

A

What goes on top of each other, and in this case, um if we wanted to kind of randomize this right, so we just want to do our z index and we're going to say equals in order to do our number and say that at now again in this case, we're just going to module by 7. Since that's the total number of items we have in the list, and let's save that and look at that- we now have a randomly picked one uh showing up. So how does that help us right?

A

Well, it appears to be uh largely the last one there.

A

So, let's save that it's saved if we go over to our our main page here, the turkeys that is not the main page, let's go back to our main turkey page there we go gobble page, the turkey's prepared, a lovely article and it's fine right. It's got, you know it's got charts, it's got quotes, it's got bullet points. I mean everything you'd want in an article except what it doesn't have is beautiful turkey facts.

A

So if we edit this page- and we come here- we're going to add a section and which kind of nice vertical section over there on the right and we're going to add ourselves the list and we're going to grab that facts list, and here we're going to edit that so we can, let's get rid of the command bar. Let's go to the ceo.

A

Let's go to that medium. That sounds good and our view is going to be that fact all right. If we apply, we get our fax here and let's republish, let's see there, you go now whenever we visit this article, in addition to all our wonderful gobbledy, goodness right, we have this idea of a randomly generated fact showing up. It's not really generated randomly showing fact right. So now we can see all sorts of really cool things here. So the turkeys love it. You can love it too.

A

There's all sorts of different ways to use this, and let's just quickly review.

A

All right so just keep in mind. This is the formula, so this is really all you need to get that kind of random seed value and then to use it. You can use this modular to kind of customize what that range is going to be. So this is the formula if you're trying to use kind of a custom range, you can leave it like this 10 plus 5 minus you know 10, plus one minus five or you can just do the math and leave it as six. I find it's easier to leave it this way.

A

It doesn't really add any overhead if you're trying to set that range up all right, but that's what we can do since we don't have a randomized function and uh this sample is available as the random item sample under view samples uh so check it out. That's all. I got happy thanksgiving, awesome, very, very cool chris always entertaining thank you for all of the amazing list. Formatting.