Microsoft 365 Community SharePoint, 7 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List formatting rendering image and details for location and weather

Description

In this 13-minute developer/citizen developer-focused demo, Chris Kent – starts out creating a list then adds and formats a location column. Adds locations with link to a map and then adds multiple sub properties (street, state, country) under the Location’s name. Add a weather column and formatting to display an image and details for weather. When list items are updated, then weather entries will be updated. Implement this today – get the address and weather samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 16, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Sample - Display Location Address Details | https://github.com/pnp/List-Formatting/tree/master/column-samples/location-address
• Sample - Display Location Weather Details | https://github.com/pnp/List-Formatting/tree/master/column-samples/location-weather

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-video

A

So, let's, uh let's do it, I'm chris and uh we're gonna talk about some list format and exciting stuff, so of course we're gonna head over to our warrior horses site now on this site. You know this is where we track all sorts of things for the horses for their battles and their wars and all sorts of lovely things and one of the things they track, of course is their top secret facilities and, where better, to store your top secret facilities than in a sharepoint list. That's open to uh the whole organization, perfect!

A

So we're going to create a new list, we're going to create a blank list, we're going to call it our top secret facilities, sounds good, we'll create that and then we're going to rename that, because we just put no spaces, so it didn't have in the url but we'll rename it here put some spaces there and we'll save boom.

A

I'm not sure! That's where it's, but in boom sounds good all right now. What we're going to look at today is the location uh type column right. So we add a location for our facility and in this case we're just going to call it location because we're feeling super creative right and we're going to save that and, of course, let's populate a few of these, so we've got some data to work with.

A

uh Let's, of course, we need our bronco wigs, incorporated or or rated that sounds great and that's going to be located in the sun sphere here in knoxville all right and I'm going to save that, and then, let's add another one here just so, we've got a few more the horse milk station. That sounds good. I'm gonna go with uh yogurt mountain perfect, I'm gonna, save that and uh let's add another one here: we'll have the explodey laser r d facility and of course, that's going to be at uh laser spine institute in florida.

A

As we all know, and of course, let's add one more here and that's their uh mess hall where all the horses need to get their oats and such or apples. That sounds good like an apple barn uh and winery. Yes, where the apples and wine flow like water all right. Let's save this so now, we've got this lovely thing here, let's zoom slightly, and what can we do with this right? So we added the location.

A

uh We've got this thing here. We've got a nice hover. Car that'll tell us details got a map, it's very cool right, but what if we want to do some formatting on it or what? If we want to take a look at it in different ways? Well, one of the options we noticed when we were in column settings and we were editing that we had these additional kind of projected fields here.

A

So if I wanted to just put those out say in separate columns, I could save that and look at that so now it takes out the details of each of those locations. Kind of spreads them out here, that's cool, but what if I want to do some with formatting and I want to keep it kind of similar- I want to keep it in one single column.

A

So, let's get rid of those extra columns for now and let's take a look, what we can do now, there's a few different formats that apply here and we're going to look at how you look at the individual properties of that location field and how you can use those in formatting.

A

So if we go to format this column and we're going to go a little bigger, so we can see it we'll leave the schema as is, and we're just going to add things like you know, elm type of div, all right, we're going to say in this case we're going to put some children in there just so we can work with it. Well interesting. I haven't seen that that's new, that was nice of them to kind of start me off here. We're just gonna.

A

Have this as a link and we're gonna say our text content, so we're actually gonna get some stuff here, in this case we're gonna say at current field, which will be our location, but we need to get to some sub properties. So, in this case, we want to say the display name, that's going to be what we're seeing here this like the sunsphere, the yogurt mountain and then, of course, we want to put some attributes in here.

A

Let's go with attributes, so we can add our link, for instance,.

A

All right- and I'm just going to copy these, so we can see them here, so I've got like an href and a target and a title and I'll go through what they are and show you how we're accessing these properties.

A

So in this case, all we're doing here is we've got we're: building the url to bing maps and, in this case we're gonna access. The current field coordinates dot latitude now these are case sensitive, so keep that in mind and then coordinates longitude right, we're just going to build this url. This is just a url and then we're going to put that coordinates in the uh the tooltip.

A

So, let's preview that now we've got this lovely link and when we hover over it, we can see our coordinates and if we click on it, we're going to open a new tab. We're gonna go into bing maps to wherever I remember which one clipped on was all right. So that's cool. So now we can start to work with coordinates.

A

So we saw that and we can go a little further right. So we can come over here and, uh let's just add a quick thing here, where I'm gonna add a s.

A

Let's add another child and we're gonna, add another elm type of we'll say div again, because that's my favorite, okay and we'll say our text content in this case we're going to see some of the other things we could do right. So we could do at current field and we could say things like address. We could say street, so address dot street. We preview that we start to see that shows up uh now if we change this slightly.

A

So if we come up here and we put a thing, we're going to fix that style issue we're having there and we're going to solve it just with the simplest way possible and that's with a display of block that should fix that. First, let's see that yeah beautiful okay.

A

So the idea is, we have street, but we could also do things like city, let's preview, that or we could even do state with the idea that we've got several properties again case sensitive state and, of course there is, you would think, maybe country, but it's not it's country or region, all right, we're going to preview that and boom there. It is now I'm going to go ahead and copy paste. The whole thing this is a sample that is available to you.

A

It's called the location address in our formatting gallery, but the idea is here: I can take all those values and I can decide how I want to do them. If I want to put some icons, I want to put some you know styling on this. Whatever I want to do here, maybe that is not. I want to link to bing maps, but maybe I want to link to an office location right if I'm showing up various office locations, all sorts of cool things- I can do with this all right.

A

So, let's save that we'll keep that going. But what if we wanted to do something else now there are a number of samples related to maps using like bing maps or google maps. um They've got very static maps apis and we've got samples and at the end here I'll show you some links uh to those samples. So you can check those out and we've shown some of those before a lot of times the requirement api key. So for this demo I thought I'd show a little bit something a little bit different.

A

So, let's add a single line of text just for simplicity, I'm going to call this weather weather and we're just going to create that and now we're going to apply a format inside weather here, and so, if we go to column settings, we're going to format this column and we're going to go to advanced mode. So we get our nice json editing screen here and again, let's start with the div, alright, so elm type of div there we go and of course we want some style type stuff. But let's, let's come back.

A

I'm just going to grab so the idea is: I've picked a weather uh image. Widget um again, I picked the one that I picked because it specifically doesn't require an api and it's totally free, but one of the complications it has is that it's united states only. So this is more of an example of what you could do, maybe not the absolute best thing you could do.

A

Generally. You do something better with a with an api key either something you're paying for or you've got a free. You know somebody calls that kind of thing, but in this case we're going to do that and all we're doing here is we're saying if they have a location and that location is u.s, then we're going to split it. Otherwise you know skip it. That's all this is and then some beautiful height and width stuff, but let's actually get to the real thing here, which is our children.

A

We're going to put a child element here and this element type is going to be an image all right and the only thing we really need on an image is our source attribute. So we do attributes and we go down here. We go like this and we delete that extra squiggly and we say src for source and in this case we want to build a url. So the place we're pulling this from is called it's a site.

A

That's super old, uh it's weatherforyou.net and so we're just going to build a url to this one say equals and then we're just going to do string building. So everything needs to go in these single quotes and we're kind of going to build a string here and by string I just mean text. So it's going to be a link, so let's grab the first part of this is all very straightforward because it's cut and paste and I'm just going to paste a link here. You can see it's this wonderful thing.

A

It's going to give a png, it's an hourly, but now we want to put our place in, and so in this case now we're going to keep building all right, so I'm going to put plus and what do we want to build here. So in this case we want to put we're going to reference.

A

The other column, which is called location, so we reference it like that and I'm going to say, address dot city just like we did before, but we're doing it all inside those square brackets to get the sub properties of the column over to the left there, since we're in the weather column, we're looking for the location column, we're going to do the city and then we're going to plus we're going to ampersand, we're going to say, state equals all right and then we're going to plus a little more we're going to say, dot, location, dot, address, dot, state and then we're going to say and country.

A

Even though it's only us equals uh us and we'll be sure, I've got all that over there, okay and then we're going to add just a little more, and that would be we want to add some colors and displays right. So, in this case, they've got this idea of where you can add a background. Color text display all that kind of stuff. So for that, we're just going to paste that in so we've got these backgrounds transparent, we're going to say the text is black and then we're going to add a display value.

A

So if we, if we were to just render this right now, as is we'll see beautiful, not sure, what's going on with the bronco wigs incorporated, oh because it's coming back to the united states, that's interesting! So we can. We can check that here we can say it or all right.

A

A little parentheses, so you can see, we've got the ands and we've got a parenthesis and we'll say an or oh I'm having a good time all right and we'll say that we'll put equals united states we'll try that there we go so now. We've covered that condition as well, how fun all right so now we'll come down here and what we can do is now it's showing tampa floor, we're just showing kind of the city where it's located by default with this api.

A

But it does provide one other property, and that's this, let's say ampersand, because we're just building query strings here. Ampersand hwb display right and then we're going to say, equals and once again we're going to say a plus.

A

Nope not inside there there we go outside the quotes plus and we're going to say, location, dot, display, name again, all caps on the uh this kind of camel or whatever it's called there. Okay, let's preview that there we go beautiful right, so we can see it's a little bigger than our column. We'll drag that over. But the idea here is: we can use all sorts of different properties of this location. If we want to generate this as a link, you know directly to likeweather.com or something else we get that.

A

But the idea is this: will update whenever your list item refreshes or your list of self refreshes, so something updates here. It's going to go and call this again and go get the new image, get the new weather and so on. So that's pretty cool. That's one way to do this, so there's a lot of different uh what we call kind of static image apis you can use again. We've got like the static maps from google maps and bing as well. You can build, but there's various other ones.

A

There we've got lots of samples of this and they all kind of do the same thing, you're going to build a source for the image and then you're just going to take various properties. In this case, we've got a lot of rich properties. We can pull so that's really cool all right and finally, let's wrap it up here and just take a look just to review.

A

These are all the different properties and I've got this as a current field, if you're applying it to the location field itself, but if not just swap out this part with that, the name of your the internal name of your column and get all these things. The location uri is a bing maps entity and does require kind of an api connection.

A

So generally, this isn't going to be super helpful, but it's there so take a look at it all right, so resources for you check out the full documentation which has all the things I just showed you, but these are the two samples that really use the location column and give you an idea of how you could use those very sub properties. So the address and weather samples, but then these are some that also show mapping throughout there and that's all I got awesome thanks chris very cool stuff.

A