Microsoft 365 Community SharePoint, 7 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Available open-source list formatting samples from updated list formatting sample portal

Description

In this 15-minute developer-focused demo, Chris Kent shares many exciting updates regarding the List Formatting Repo that address sample inconsistencies, currency and discovery. All samples and documentation have been updated. The Repo has been reorganized including new groupings by Operator, Placeholder Token, Action, Category, Feature, Author, and by Class. Instruction for submissions created. Go behind scenes to learn about the Farrier tool and automations now used to keep the repo up-to-date. Accessing what you need from 250 samples is dramatically easier now. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on July 7, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo - Community-tooling | https://github.com/pnp/Community-Tooling
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Documentation – Use column formatting to customize SharePoint | aka.ms/spdev-column-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/m365/community

A

All right, that's uh that's me, I'm chris and uh I'm still an mvp wow all right. Let's go back and uh take a look at a few things. Shall we so today what we're gonna talk about? Is the list formatting repo itself today? So if you're not familiar, we've got a beautiful list, formatted repo and the repo here we've had for. I guess it's been three or four years at this point. It's extremely popular used all the time. One of the issues we've had, though, is inconsistency across samples.

A

So you know we've got a ton of samples got about 250. I think at this point um across column view and uh form uh samples right and if you come here, you know we've got this this way we can come in here. You click on column, samples, right. These are organized by the column type and then some more details on them, and this is an okay way to go right. You can click on. You know say this one by andre, and this is cool right.

A

It's got a readme, you can see your data's got your requirements on how to set it all up and it's more details along with all the files here and that's one way to do it right, but you go back. You know wait which one was I on and so on. So it can be difficult to kind of browse this list and we're aware of that. But it's also, you know one of the best ways to kind of maintain samples and go forward here.

A

So one of the things we've done is we've updated the documentation all over the place, uh and we have this idea of a documentation site which is you know linked here from the front right. This pnp github, dot, io, slash list formatting and again, I'm sure david will paste that link in there and in the past, we've set that up. We've had some interesting listings right, so we had this idea of grouping those columns by various things like column, type or operator, um and all that's very helpful.

A

You know we put that up here and if you haven't had a chance to look at this, you know feel free. It's great, but we had a lot of issues over the past. I don't know year at least where a few things have disappeared right. Here's all of our column, samples, you can tell that's a problem right, we'd probably want a few listed there, and then we had some of our documentation uh just said coming soon, so I've gone through and done a pretty massive update to these things.

A

But if we go to the site now, we should see that we have our column samples list here right. So all of those are updated and those are accurate. So it has every sample that's available, along with form samples and our groupings have changed a little bit all right. So we still have you know the same groupings we had before, but now they are in collapsible sections.

A

So if you're looking to say, do a column, format and you're like yeah, I've got this uh image column right. Is there any, for you know samples for that. uh You click on that and you say oh yeah, we have one sample right, it's the image light box, and then you can click on that and it'll. Take you directly to that sample.

A

So that's one way to do that, but you can also hover over to get uh some more details and so on, but we have some additional uh groupings here, which I think will be very helpful for you. So we have the column type, which is very helpful for column formatting. uh We also have by operator so, if you're looking to see how a specific operator works right, maybe it's a brand new one like say uh you know the get user image right.

A

So you click on that and you can see you know how do I use this thing? Well, there's 14 samples that use get user image all right, so you can go to any of these and you can find all the samples that use these operators so any of the operators. Besides the basic ones, like you know, basic math and comparison because most samples use those are listed here so a great way to learn and see specific examples of how those are done.

A

We also have the placeholder tokens, so these are the kind of the magic strings here that are used right. So you want to see where we're using some of the new localization we've got the one sample right now, uh but we've got a bunch of samples for say, row index and so on. So you can check all of those out and of course we keep going here. We've got action.

A

um You can see, we actually don't have a sample that shows this action just yet, uh which means that this, when you see this little icon, that is a clue that may be contributing is something you want to do right. So we could use a sample on open context menu.

A

So you can see that so this is a great way to find out like hey, you know: where are there not enough samples or where are there? No samples in these? So that's a great way to kind of find that so, if you're looking to contribute, uh this is also helpful for you.

A

You know we could expand or collapse all of those as well wow, wow, wow, and then we've got categories. These are uh pseudo made up. It's just another way to kind of look at these. All of these can be edited I'll. Show you how you can submit suggestions and changes to these as well, I'm going to skip the class for now. We also have feature so this is a new one, so this just calls out very specific kind of feature types.

A

So, if you're looking to see who has you know creative samples for each of these, you can see those as well and then, of course, our authors here are all here. So if you'd like to see you know, maybe you liked andre's uh some of his recent demos right. So you want to see all the samples that andre's put together right. You can see all those or you know you want to come down here. You really like tetsuya's style, all right, so tessy does a lot of beautiful samples. He's got 50 of samples.

A

You know they're, all beautiful. You can check them all out here across view and column formatting. You can see this says column or view here. You find out the details on those and then, of course, we have a few there's, not a ton, uh but the work in sherpa 2019, we've called those out specifically and how to use those and then. Finally, this is a big area for us is by class.

A

So what I've gone through and done is I've taken every possible class that is available to you to use inside list formatting and I've called those out, so we can go to say the msbg color classes. You've got a few details on them, they're all listed here, including the ones that are not used in samples. So this is a great way to see what classes are even available to you right.

A

So, if you're just looking for a class, you know you may be looking for a specific sample to see how that's going we're not listing out everything the sample. Does we do give a few hints right. You can see the color over here, for instance, on these bg colors is the accurate color, uh but we're not showing you a lot of the details right which for most of these, these are fine right. It's just the background: color there's not a whole lot to it, but you can see there's a lot of classes.

A

You may not even been aware of right that uh that may help you as well right. So you've got a lot of these sp row or sp card classes that are a little more generic. They also have several animation style classes that can be used.

A

In fact, there are a few samples that use them right, um so you can see how those happen um and so check all that out again a great way to get that class listing, which I found has been very very hard to find uh without just inspecting the page, which is a mess all on its own, so check these out. That's a great way to do that also updated the contribution docs right.

A

So in the past we had uh no information at all, so luis went through and she added a lot of really great information in here and I've gone through and just kind of updated that as well to give more details about how we do our issues and things with this particular repo. So, if you're looking to contribute, this is the place to start all right. So all that now I mentioned the idea that you would be able to specify you know this stuff um and talk about.

A

Where does all this information come from right and is this information in the new sample browser? Yes, it is so if you wanted to use the new sample browser from microsoft, right kind of the all-inclusive samples, um all of our samples have been updated, um several were kind of missing from there.

A

All of those have been cleaned and added, and those should all be ready to go as long as these sample browsers working correctly right so again, lots of different ways to find these samples uh we're trying to make it as easy as possible to find exactly what you need, because a lot of these samples you can just take and go right. You don't need to even tweak anything. They just work. You've got a column type. uh You've got something you're specifically looking for.

A

You just grab the sample copy, it paste it in you're good to go or you want to tweak it, but that's one use case. The other case is these people they're trying to learn right, we're trying to contribute back and that's where these groupings really really come in handy, oh and one last thing dark mode, oh yeah, for no reason at all all right. So let's take a look at what you know. How does this work all right? So, behind the scenes in every sample, there is a sample.json file and in this sample.json file.

A

This is what describes everything that we use to sort everything out, but it's also what's used by that sample browser. So when you submit a sample, if you don't include a sample of json, we will add one for you, so every sample has one of these, and if you see one of these, that's why they're in this assets folder, because it's also json- and that can be a little confusing. You don't need these at all, for you know doing the uh the actual sample.

A

The only thing you need is the format itself right, that's it, but to describe this and everything else, it all goes in the sample.json, and here you can see we have this idea of our categories. Our tokens and so on and how you set all this up is there is a tool that I've written called carrier.

A

It is available to you, in fact, when you pull up that, where the heck I have way too many windows there, you go so over in our community, tooling, repo, so pnp community tool. This may not be a repo you're very familiar with, because there's really just a couple of tools in there, but you can see we have this github batch issue updater, but we also have, as of 35 minutes ago, the farrier tool. Now there's not really documentation in here. Yet uh that is coming, but you can check this out.

A

You can run this um as needed and see how that works and what it does is. It goes through and validates your samples right. So it has a few different things, so we can validate samples. Now it uses configuration files to validate those samples. In this case I've set it up for list formatting, but this can be set up, for um it doesn't have to be in github right.

A

So this is just validating things within the file system, so you can see here for sample validation, the idea of tokens um and so on has all been written here, but you can see where we're suggesting categories. This is the analyze function. Let's, let's collapse that down, but you have this idea of validating the sample right and we we make sure all files exist. Everything is named correctly.

A

uh You know all the contents inside the readme exist and everything is there. So there are forget how many 500, plus rules that were running against every sample in this repo, and you could create all of your own rules for whatever files you have um and the way this works is say. I've got. I have a sample. I've already set it up to look at one um in the debug string right.

A

It's going to look at that comment, count sample uh which has already been cleaned, so it comes out clean here, but if we were to go in there to our repo all right so we're in our comment count and let's say we go to the readme, and maybe I fat finger the view requirements section right or something like that, and I just save that and if I run this again, we'll see that it should catch that for us and flag it and say yeah.

A

You need a view requirement section right and it's going to do that for almost everything in these samples. So it should the whole goal here is not to scare you we're going to run this behind the scenes. If you want to run this, you certainly can, and it will help you identify things. If you don't we'll, run it and help clean your sample as well. So this is more just an fyi for you, so lots of fun, uh but that would fix that. It'll also suggest things for us right.

A

So if we were to, let's fix that and let's go into our json- let's add another class say we we updated this later and we say plus ms bg color theme primary sure right. Was that a thing right, so we added another class on here. We were to run that again.

A

We will also see downloaded fix the view requirements section. It will make suggestions for us in terms of what needs to go in our sample.json right. So it's saying hey. This class is being used, but we didn't find it in sample json. Please add it and that's going to be important because the next part of this is it will round up, there's actually a roundup function that will round up all of those json files and map those to a csv file. So you can do that as well.

A

So this is the idea if you've got a series of json files and you want to map those to a csv, you can using an xml file that defines those rules in this case. You know I've just got um path. Queries here- and you know some functionality here- that's required, but all of that pulls us into a giant csv file for our samples.

A

You can see an example of that here. So everything about our samples is here and then the other part of farrier is it will generate files so using a csv file. This generates all of those files, so you can see, we've got this idea of templates and so on so say the column, samples right we've got the text here, but then we loop through that csv file and we output the sample item, which is up here in a template again, I'm not trying to teach you how to use barrier.

A

The idea here is these tooling are available to you. The samples the documentation will be updated on that, but all of that is to clean the samples repo and to get everything kind of good to go right. So all samples have gone through this process. Now I've cleaned every single one and every single one of them should be then represented on our site. So this shouldn't be a problem, so that is not the right window.

A

Do I have one there? It is all right, so if we go back to uh this guy right so if you're in here- and you think you know what this this column sample doesn't like, it needs a better category or it's missing something you can edit that sample.json directly and submit that as a pr. You could submit that as an issue and just flag that, as saying hey, I think this should be in this category and we'll update it. But the idea here is in the past.

A

We tried these listings, but nothing was automated, so it became very, very difficult as this as this repository has exploded, to keep up with those listings, but because those listings are very, very important. uh Everything is automated now and that automation is made available to you. Should you want it all right? So I know I'm right up time. So, let's just show you this final thing. So a couple links for you so make sure you check out the the new changes the sample repo.

A

I think they'll be very helpful to you and, if you're interested in that community tooling, it's just called farrier and there's a bunch of details in there, including all of those xml definition. Files are included in that repo. So you can see exactly how we're doing that um and there's I forget, there's something like 24 different functions, there's kind of a miniature language in there. So if you need to do some, you know transformation or manipulation in there. You can do all that as well.

A

Okay, so check it out. I will try and get that documentation updated uh eventually on how to use that. uh In the meantime, if you're looking to use that on say- maybe your own repository or maybe even your own solution right, so I I actually use uh farrier in flanking dot io to generate those files. So that is the flaw. The icons are not pulled from a database or anything like that. They are actually static code files, but are being generated from a csv file using farrier.

A

So farrier doesn't just do markdown files that we've got here. It can do any kind of file type, so I've got those generating typescript files, for instance, uh office csv file. So these can be very, very helpful for you, uh just ping me if you've got any questions about that until we get that documentation updated. But that's uh that's it sorry for the uh the overall lack of horses, but maybe david plays that sound effect again.

B

Well excellent. Thank you. Chris you've been one very busy. Little bronco see what I did there excellent stuff, really really cool.