Microsoft 365 Community SharePoint, 31 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List formatting magic – Taking advantage of new multi-lingual capabilities in list formatting

Description

In this 11-minute developer-focused demo, Chris Kent shows viewers how to jazz up percentage amounts in a column using a number level bar and then adds a column with localizable textual interpretation of the percentages. Text is localized using the @lcid token (magic). Localizing text in a list side-steps complicated page translations and ensures users in various regions can use your formats without issue. Observe simplicity of copying JSON from sample into the column’s Advance mode formatting box. Scenario draws from 3 samples. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on May 12, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Sample - Number Level Bar | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-level-bar
• Sample – Number Localization | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-localization
• Sample – Person Localization | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-localization
• Samples - List Formatting Samples | aka.ms/list-formatting

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

All right, I'm chris, all right. Let's talk about some more list, formatting all right, so we head on over to our warrior horses site uh and the warrior horses. You know they're always looking uh to expand their their enterprises. You know internationally and in order to do that, they have a series of leads or enemies they're evaluating to uh to potentially pick up to see if they can target them.

A

So they've got a list here uh called their leads list uh where they've got a series of enemies, they're kind of working through and tracking some information about them, including their threat level right. uh You know the primary weapon and kind of their status here now we want to look at a couple of columns here and we'll see how they can work together.

A

To you know, add some nice visualizations to this, but also to show how we can provide some localization. So in order to do that, the first thing I want to do is this threat level is pretty boring right, it's just a percentage column. Why don't? We apply a format to that, so I'm going to head over here to our formatting repo and I'm going to go into column samples and because this is the number column I'm going to go down to where it says number first right.

A

So that's generally how these work go down to number and I'm going to go to number level bar and I'm just going to click on the json. For that and there is a copy button right here. I just copy that, and I come back here and I go to my threat level, column, settings format.

A

This column go down to advanced mode, so I can just paste the json here copy everything and paste over it, and when I preview that now I get this lovely thing right so now I've got kind of a numbered level bar here. uh The nice thing about this. Let's save that so before I forget is that it is interactive right. So I can click this and it will update uh you know the things by about 25 um at a time.

A

So now we've got a nice threat level and that's cool, but we also want to do something with this threat level right. So it's great we've got uh one suggested threat here for uh poor, martha washington right. But what about the rest of these guys? You know we could provide a threat, but what, if we want to provide one when one is not provided right based on the threat level? Well, good news! That's exactly what we're going to do! I'm going to column settings we're going to format this column.

A

This is also a sample, but because I'm we're going to build a little bit together, I'm not going to copy it off the site and I'm just going to paste it here and we'll take a look at what it's actually doing. Let's scroll, that over a little, let's make this a little bigger as well. There we go, let's preview it, and so what this is doing is enough. They'd ignore that I grabbed the wrong one.

A

Let's grab this one, which is very very similar, but and it look exactly the same except the differences, it's only english. So here's what's happening there. So the very first thing we do is we check to see: hey is the current field filled out and if it is just use that right so we're going to continue to use the suggestion that they have manually input, otherwise we're going to do it based on the third level. Now this is super fun to read and it's about to get more fun. But the idea here is right.

A

It's just nested, if statements so we're saying if the threat level is greater than or equal to, one, which is a hundred percent in percentage fields or percentage fields, are zero to one all right then we're just going to put e shall be trampled. We see that right up here and so on right. So then we just keep going so that our else condition is a secondary. If so, this is kind of how we're doing it's almost like a switch statement, but uh with more characters, so even more fun right.

A

So we go all the way down and then we've got a default value here, which is zero. You know anything lower than 25 you're gonna have a great day. So that's cool all right now. What if I were to come in here and I'm coming in from germany right? Well, these threats? Don't do me a lot of good, because maybe I don't speak english right.

A

I want to know what ye shall be trampled in german is so one of the things we could do is let's check out there's a value here to determine what language we currently are.

A

So when it comes to localization, you don't apply a format per language, those you know like page translations, you would provide a translated page and it actually exists as a separate page. It's all tied together and that's great with formats it's not near as clean.

A

In fact, it's a little dirty we're going to take a look at that, but we finally have an option here, but the difference is you will do it all inside a single format rather than having a format per language which, as you might guess, when you've got anything of mild complexity uh gets real fun. So what we're going to do is first we're going to see we have a new magic string called at lcid.

A

So that's the language code id all right and we're just in this case we're just going to add it. So we can see what it looks like we're. Just adding it right before our message right so preview that we can see ah so english united states is 1033 right. So 1033 is that language code and that's cool, and if we save that, so we can continue to see that if we head over to our site settings, I'm gonna go to our regional settings and we're just gonna switch it to uh german.

A

For now I will go german from germany hit okay hit, okay again, because apparently I didn't hit okay properly. Give that a second and now I have found the save we'll close this refresh that sometimes it takes a few different refresh to see the language code show up. But let's try it again. Oh, if we have a little toast awesome there, it is 10 31. So now we can see the german is 1031, whereas english was 1033.

A

now, knowing that we could do something with that. So let's take a look at what we might do with that. So if we come in here and we're going to format this column again and now we're going to actually edit this slightly, so the main thing is we need to say: you know ye shall be trampled. We want that in german, when it's german right, so we're going to add another.

A

If statement right here, I'm going to say if at lcid equals equals or was it 10 31 right, then we want to do whatever german is and then we'll say. Otherwise, you know english is our default. So now we have a filled in what the german is, but this is kind of the idea here, and so we could take this exact piece here and we could copy that and we could paste it for each one of these and so on.

A

Right, we'll just do the e shall be trampled for now, uh so we don't have to watch us translate all of them. Now, if you head on over to bing and you search for google, translate well, you get the bing translators, that's helpful, so we're going to type that we're going to get the german equivalent or you know if you actually speak german, it's whatever this uh exciting version of that is, uh and we're going to paste that in here and we're going to say e chevy trumpet is here ready, german.

A

There we go all right, so there we go and if we preview that now we see in german, we get the german translation rather than the english, the other ones. We haven't put that on there. So they're still coming back with the only option we've given them, which is pretty awesome right. So if we go a little further with that and I'm just going to copy it, so I've gone ahead and translated each of these.

A

So we don't have to watch me paste all of that, we'll preview that and now we've got german for all, except for the one that we provided since we're providing just the direct value they typed. But you can start to see. This is a little intense right.

A

Not only am I doing if statements for the threat level now I've got if statements inside the results for the individual language code, but wait there's more how exciting. So now, if we come back and go to our site settings and what, if uh you know, we we just pick instead of german from germany, we pick german from austria right, you know and uh we'll hit okay. Here we go for that postback, so I'll hit. Okay, give that a second and now, let's refresh that and we should see it'll take a minute.

A

How are we going to save our? uh No, we didn't because, let's go back here and add it, we need to format this column. When I pasted that I took out our lcid. So let's put that back in so at id plus golden bling, boop boop. There we go now we have that back in. So we can see what the lcid value is. You can see it's still coming back, it's 1031 german, so it's refresh and see.

A

If we get german for austria there, it is german from austria is 3079 and you'll notice that it is all english. So here comes the next fun part right. So the fun part here is that uh each one of those in this list has a different language code and because we don't have a locale where we might be able to split it and say, like you know, enus or you know, d e, slash d e uh for german germany, that kind of stuff, and then we could just look at the first part.

A

We have to account for all of these different codes right in germany alone, as whatever how many of these are five, so it gets a little nuts. It gets a little ugly, but again considering a couple weeks ago. We had absolutely nothing we could do. This is certainly better than nothing, but I'm certainly hoping for some improvements in this area, but in order to handle something like that, we would have to say, or with our two pipes at lcid equals equals right. What was it uh right?

A

30 79 right so then we'd say 30 79 then do the german right and there it is right and then you might you know you might have a different translation to specific targets. Austria, all right, austrian, german versus german, german, and so in that case this would be great for you, but for everyone else that just wants generic german targeted for all different uh regions. Where german is spoken, uh this is going to get a little crazy. So that's how you kind of do that. So that's our localization!

A

Now, let's wrap it up here and take a look at what we can find out more about that. So, let's jump over to our slots again, all right! So again, one format per column if it's column, format or per view. If it's a view format, um the last one is done inside the format. That's an important distinction because it kind of works differently than the rest of things in sharepoint, which in some ways means it works like the rest of it.

A

Because inconsistency is the main consistency there you go and then of course the other thing to note is when you're looking up these a lot of times, you'll find the hex value for the lcid, because lcid is generally considered to be a hex value, but in this case it is the decimal value of the hex value. So if you find one of those hex lists just get out your calculator and switch it to scientific and then the last thing is again that thing we pointed out there about all the different regions.

A

You'll have to account for all right. Last thing here is here's some samples. So these samples, the number level bar number localization and there's also a personal look person. Localization- will show you how to do localization with person. Fields are all available as part of that sample repo, and that's it. That's it for me,.

B

All right: well, the horses uh have spoken. Thank you, chris uh excellent job, very, very cool. How we can do that.