Microsoft 365 Community SharePoint, 10 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Preview on list formatting demo site template

Description

In this 10-minute developer-focused demo, Chris Kent shows an alternative to going to GitHub to pull samples. The Community team is experimenting with an additional layout option – List Formatting Sample Showcase - pages that display fully functional samples Power Users can manipulate, drill in to view/customize data, and get additional details in GitHub - from within a browser! You may even adopt this formatting in your own tenant. Available soon. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on June 10, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• GitHub - SharePoint List Formatting Samples | https://pnp.github.io/List-Formatting

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, I'm chris, so you may be familiar with the list: formatting samples, repo, it's very popular repository pnp offers right. We've got 100, plus odd samples uh you can head on over here to github and you can browse directly here right. We show the new sample browser and the list formatting samples are going to be added to that very shortly.

A

uh We also have this kind of site here with some different ways to look at things and some tips on how to get going and all that's great and absolutely should use those resources, but sometimes what you'd like right, instead of just coming in here and you click on a view sample- and you know you go to bulletin board format and you see screenshots and that's cool and then there's instructions on how to create this in your own environment right.

A

Here's, the view, requirements, everything here and that's cool and that works really well and for the bulk of our samples. That is absolutely the way to go something new put together here and like to get some feedback and see how we like this is the idea of a kind of a showcase site, and so this is a communication site.

A

That's got several samples kind of all, grouped together this case we're looking at several the chart, samples and this can be applied to your own tenant, using pmp, remote provisioning with pnp powershell, there's some instructions and a template for you. Those templates include files includes all the list items and all the formats, so you can just kind of spin up a site, apply that format, and then you can start playing around with these formats. So I want to take a look at this site. I want to take a look at some of our amazing samples.

A

We've got awesome contributors all over the world. um Doing some really amazing things. You're. Giving a chance to look at these uh charting is something that comes up a lot now in you know, sharepoint online you've got the ability to you know, there's a chart web part right. You can do other things where you embed some.

A

You know variety of things, there's a lot of ways to solve the charting problem, but sometimes you want to do a chart directly inside your list or using just your list, data right and that's where formatting can really come in handy. So we'll start with a couple column samples here, so a real easy one here is saying: look at the generic timeline, and so this is coming from our friend tessia uh kawahara on japan, a recent mvp, a huge contributor on this formatting samples, repo- and this is a fairly simplistic form.

A

We've got some other very interesting timeline type formats and the idea here with this format. Again, this is just a web web page right. We've got links to the samples here um anything you want to find out about the author over here right. If we want to just open that over on github, we can go and see it there and do the readme and everything else we need for looking for extra details, but here we can actually play with it right, because this is actually on our site. It's a timeline.

A

We can see that it's got a nice hover card and if we wanted to change that data, for instance, we could go directly to that list and then we could come in here and we could actually change things around right. So in this case the timeline works by if there is something in the column right just anything at all, it's going to then put a dot and then you're gonna put that information here.

A

That's not always super obvious from the screenshot and everything else, and so this allows you to really try that out. So this is an awesome timeline. It just creates a nice little to line with dots right down uh your row. You can have multiple of those here very, very simple, to apply just cut and paste now if we head back here, let's take a look at another one, uh so a number gauge. So this comes up a lot by default.

A

You could do like a data bar and let's zoom in a little bit here uh right, but an actual gauge. That shows like a percentage field, which is what we have here um is available to you as well all right. So you can see this progress here, there's two different versions of it: there's one where red's on the left and green's on the right and one: that's the exact opposite. Where green's on the left and reds on the right- and you can apply this very easily to you know a number column.

A

uh You can also do this with, like the data bars, there's a couple of visualizations, but this is a really nice one really simple to get you going on that. Let's take a look over here so then we've got this brand new one, also from tetsuyang right. So this is a inline gantt chart which is really really cool, so this is designed to be viewed a year at a time right. So it'll just take some dates here from inside your view and apply a really nice visualization here.

A

So you can imagine using this in line just trying to get an idea of what a project's going on or any number of ways, and you could certainly expand this. uh You know to be a little larger. For instance, this one actually works exactly that way right. So, as your column width grows, your so does your gantt chart so very.

B

Very cool sample.

A

From tetsuya, and then we come back here and we've got like a column chart also from tessia. I said big contributor, but the idea here is it's just taking numbers, and this is an example. You probably want to customize this, for whatever your columns are, but the idea of displaying these on an inline chart is really really powerful.

A

Again gives you that nice inline visualization uh without having to affect the entire view, so you can use that inside grouping or whatever else you need, because it is a column format all right. So we've got a few more column formats. We're going to add here that are related to charting uh we'll get that added here before we hit the publish button, but there's also a bunch of view samples. So if you wanted to do more than just the inline, you want to take the entire view, and you want to format that into a chart.

A

There's a number of options for you. So we'll take a look at the chronological format, and this is from bronc I'll just say, and this is a really neat one. So the idea is here. It provides uh this detail here and it's just a strict visualization of no interactivity.

A

You can see it's very, very clean and if you click over here, you can actually see the list item data behind it. All of these have an all items view, so you can see the actual data behind it. What goes into that format and you can switch it over to the chart, view and see it in action and then, of course, if you wanted to just jump right into it, you can not edit current view.

A

You can format the current view, let's just close, that guy and always format the current view and see it in action and change whatever you need to here right. So if we didn't like uh neutral coordinator right there, we could say you know neutral primary, which I don't think is going to look dramatically different there you, but the idea is here: you can quickly customize this. Try it out right here in the browser without having to understand uh all of the ins and outs of moving things around github.

A

All right. Let's see a couple more minutes, I'm going to just highlight a couple more of these. Then I just closed my site. uh Where's my uh there. We go all right so now we can take a look at like so we've got a nice project gantt chart. We looked at a gantt chart that was in line. uh We've got this one uh and I'm gonna just call you gdk max, because that's what I refer to you as from given maybe guarantee- I don't want to say it properly.

A

So awesome contributor done all sorts of cool stuff but check this out. So you can take this list and make an actual inline gantt chart. uh These are individual list items and kind of lays them all out based on a project timeline very powerful and then, of course, we have this column graph format from our friend anub, uh who has put together a full on bar chart here or column chart right. So you can see it. It's got interactivity, it's marking the top ones right, it's very, very cool, it's drawing it in line right.

A

There he's got another one very similar. So if you wanted to go for the bar graph format right so again, if you want to just go sideways on that very very cool, with some extra image functionality added in here and then of course another one from tesla again is a butterfly chart. So the idea here is you've got two different numbers.

A

You know with text here now he's showing some really cool things and that if you change the display name of this column, for instance, it's going to show up here just like that. So if we go here and we see all we're going to go to our all items just so we can see those. So if we change this cost right here, column settings and we're just going to edit that so we can rename it we're going to call it cost with an exclamation point, because that's a great name all right.

A

So we do that and we look back at our chart. You can see that we hover over this. It's already taking advantage of that so again really cool chart, but it's also showing how to take advantage of some advanced functionality, such as pulling in column metadata all right- and I think we're just about done here. One more is our timeline format. So again, we've seen a few of these again from tessia.

A

This one has two different options: it's got a vertical timeline and it has a horizontal timeline, and this timeline has a click to see all the things that have happened uh at those times and very, very cool. To give you the different options on seeing how those hover cards are integrated and you control the entire view and how you can see that in a web part all right.

A

So in summary, here, uh we've got a lot coming here uh with all these samples we're going to try and make this a little easier to digest and use, which is a great way to set this up as kind of a series of learning portals, if you're trying to encourage your power users how to learn, formatting and take advantage of some of these samples, rather than send them out to github, which you certainly can you can help them start here directly with data they can manipulate and adjust, and uh that's about it for me.

B

Excellent, thank you chris and also fixing our scheduling uh so because I took too long time on the intro, but really awesome, stuff, absolutely brilliant stuff and helps on driving driving the the understanding how this can be built and we'll certainly work on getting the template out and and more easily available at maybe in a loop book and then outside of lookbook and all of the videos how to get installed. That and all that so really really cool stuff. Thank you, chris from dan and the only to only just the feedback on the demo.

B

We didn't have any horses on this one. um That's true, and I still laugh for the fact that every single time we reference anything on horses, because because we saw quite a few of them in a chat think about those people who never actually seen your present, and they have no idea what that reference is all about.