Microsoft 365 Community Column and view formatting tips, 4 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using column and view formatting for lists and libraries in Microsoft Teams

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on January 23, 2020.

In this 11-minute video, Chris Kent, Microsoft MVP and Office 365 Practice Lead at DMI, previews how a SharePoint list in a Microsoft Teams tab can be formatted in SharePoint from within the Teams tab. Note: This new formatting capability presently available only in the Teams Targeted Release, looks quite promising for SR. Formatting in SharePoint is fully supported in Teams with few exceptions. In the PnP list formatting repo on GitHub, there are 70 list column and view formatting code samples that one can simply copy and paste into the list’s column settings. Also shown in this demo was the addition of deep links - into chat, into tabs, into scheduling dialog, etc., in a list column.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Docs: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links#deep-linking-to-a-chat
• Sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/multi-person-teams-chat-link
• Sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/multi-person-facepile

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

All right, everybody, hello, I'm, Chris, Kent, there's almost stuff and let's get going all right. We've got with list formatting, surprise all right. Let's do again there we go, so we got a classic warrior horses side. Of course, as you guys may or may not know, horses, especially warrior horses are highly collaborative right, so they have things like Microsoft teams where they can collaborate in now in the past, I hated it because they love list formatting, so very much, but now there's some new, exciting things, at least in targeted release.

A

So if we go over to our warrior horses team site who's gonna, do it on the web here so I don't mess up my presentation and we come in here and we take a look at the stable right go to general tab. We come over to our files tab here we can start to see. There's a slightly new view here and you know: you've got the new view if you're, open and SharePoint is not teal just as an FYI. So, for instance, my standard release, templates they've got the teal and the formatting doesn't work there.

A

But here we've got it in my targeted released in it, so you can see I've added a nice column here called point horses. These are the people responsible for these documents. All right, so that's helpful, be able to add additional columns and do some cool stuff. So let's add some formatting in here to make this even more valuable. Okay. The first thing you'll notice is we're gonna column settings I, don't have any option to format this column here within teams.

A

So that's where I got to use that open and SharePoint button, so I click that and we go to the lovely team side. Similar list now I have noticed a couple of weirdness. In the past few days, we've had several issues submitted on it. There are some strange behavior of some of those formatting we're not really experiencing. Most of those here are my targeted release tenant, but I am seeing some strangeness like you can see right here. It's jammed all these all these names together without any formatting applied or as generally it looks like this.

A

So there's a couple of strange things happening right now. Shouldn't affect the demo here, but if you're running into something, let me know open an issue: I don't work for Microsoft I can't do much, but I will feel sad with you how's that okay, so we're over here and now. The first thing we're to do is just kind of show basic formatting. So if we format the current view, we're just gonna take the the one that kind of defaults, the desk for us, often dials, which adds that every other row is gray.

A

And how do you go away? We'll save that and now, if we save that- and we come back over here- we'll switch over to a post tab, we'll come back to our files. Tab you'll, see that is reflected here right. So our view formatting is fully supported, that's nice! So what about called formatting? So I've got this. You know multi-person I've filled here so I'm going to go over here to our SP dev list, formatting repo. So this is over and github again.

A

We've got nearly 70 samples in here of how to do different column, samples and view samples, and it's a great starting off point when I highly suggest you go over here and all you got to do to navigate is go down here to column samples and then I'm gonna, look for the field. Type of got multi-person face pile now. This is one we've shown off before, but I like it, because it it's going to show a couple things. A couple: differences in teams so right here in github, I'm, just gonna grab all of that right.

A

Click, I'm, going to copy that and I'm gonna go back and I'm gonna go here to my column, column, settings format, this column and in this nice window here it's gonna paste what I got from github and I'm gonna hit save on that alright. So let's get rid of that. So you see now we got a nice format. It really shows off for multi people fields or you can hover over and see their names right.

A

You can see the additional people that got some kind set up, looks really nice and if come over here and again, we'll come back to the tab we can see now our column format is showing up, which is great, I also noticed. The strange thing is that the sort is always applied here, even though it's not a part of the view, weird strange but fun. Oh wait now a couple of things to note with this.

A

So if we take a look here, so we see that showing up at teams which is awesome here on the web. It also show up in the main client no problem, but if we take a look at something like the mobile maybe later alright, so we take a look at our our mobile devices. Here we go over to general and we switch over to our files.

A

Tab you'll see that we don't get that same kind of experience, so just be aware that the list format and the view formatting is currently at least I haven't heard otherwise, but currently is not supported in the team's mobile app I'm, showing the iOS. But the Android is the same.

A

Another thing to note is that if we add a new tab right where you know you wouldn't do this particular scenario, but it's got a document library all right, we're gonna choose the stable, we're just gonna grab that same under the files, tab all right, we're gonna go here! That's fine!

A

You'll notice that when we add that we get that kind of class experiences what I mean by the open and share point steel, we don't get any of those pieces there. This is kind of a specialized team for you all right. So when you come in here, we don't even see our additional column. Just hope that we aware of there are still some limitations here, but it is coming soon and we don't want that junk. So come back here to our files, tab couple of things to note, so we've got the the format it's working.

A

It's great I've chosen this format, though, specifically because it demonstrates a couple of differences between Microsoft teams of you and with your modern ListView and just come in just be aware of in your format. So if we format this- and here again we're gonna ignore some of the. So if we come down here, I've added this vertical line baseline to the image. Now, if I delete that here and we save that you'll notice, it changes 0 things here in just a moment: did you save them?

A

It's very complex format, apparently that a second here well, while that's doing that what's gonna happen, is you'll notice that nothing happens here, but in teams you'll notice a slight shift because of how that's working that's going on. Oh man, let's just go ahead and try and refresh that, while that's saving, maybe it's saved we'll see if we got it applied, so we said yeah. We can already see the difference here. You'll notice, the rounding is different, so there's some definite CSS kind of defaults, they're different in this case.

A

The image element type, has a vertical line set to middle in teams by default, whereas in SharePoint Online it appears to be set to baseline. So again, not something you general worry about, but the idea here is test your formats in both if you tend to apply them in both the other one here would be the app current. So that's something we've used before where we're pulling these images right.

A

So here you can see we're pulling them from the layouts user photo and if we were to create that you know the current web we'll put the absolute web URL on there. But if we took that away all right, we just had to do a relative link. All right, we'll save that here. You know it works just fine in SharePoint, because it's just gonna grab that first part of our sites and everything's good. But again, if we come back here and we refresh our files tab now, we are sad very, very sad.

A

So just keep that in mind as you're working the teams to make sure you're doing things like absolute links with the current web and then just testing things to see that there are some very, very minor CSS differences. There's also varying levels of support for the UI fabric themes here. So for our theme covers and other stuff, you'll you'll tend to see those show up as purple rather than your theme colors, and it's kind of ignoring some of that all right. So that's cool, that's great for math show, but let's do something.

A

A little more team specific here, so I've got another sample here we go back run to the hello, our face pile, give a multi-person team's chat link, so we're gonna grab this format. Let's take a look at what it does. Oh it's actually a fairly simple format: let's copy it apply it and we can take a look at what it does paste that sucker save that. So what it's really doing is we take a look? It's just a link and it's got a icon here. Alright and then it's got text says ask a question.

A

The key here is in the href for the link right. So it's building this deep link into teams chat by combining our fields here. So it's joining all the current field, email and building that in and then it's also bringing the topic name. Is the file leaf ref. So that's the name of the file and then it's automatic side of the message. So what does that really look like right?

A

So if we take a look, if we click on say dance, our coloring book, then click that we're gonna stay just join on the web, again close our other one just for fun, so that second, what we did was we automatically started a chat right with the four people. We said we're responsible for that particular document. We gave the title of the challenge three more people up here, so dinosaur coloring book. We have a starter message of nay all right. So that's pretty awesome.

A

So the idea that you can deep link in the chat and integrate that directly with your list is really really powerful. Now, there's a bunch of other stuff, you can do there. So this is people. You can do a chat that you can deeply two tabs. Even your custom tabs. You can deep linking scheduled and dialogue and so on. So it's quite a bit. You can do there and it's very, very cool one caution with that. Is that the deep linking when you're already inside teams right?

A

So if I go over to file it's slightly strange, because teams expects the deplane to come to JavaScript, and so, if you really wants that truly integrated experience, where it's not going to ask you to do this, you'll need to use something like a field customizer, but that's probably the overkill. This is pretty easy to go or and create those chats. Okay, all right, so awesome stuff. Again, that's a sample! It's already available to check it out. Quick recap!

A

So: file, tab, sports, the formatting document, library, tab, doesn't mobile sad for now, but really take advantage of those deep links and really apply those format. So you can bring that same awesome things you've been doing direct in your files, tab.

A

You know adding a list tab to teams and then providing those formats is a great way to make a very simple application right there and you're kind of your main pane of glass that people are using all day long I'm, it's a great way to really simplify things and emphasize what they should be doing right there. So 419 saves the day again so check it out. Here you go check out the full documentation.

A

All this documentation applies to teams as well as the modern ListView, and then you can see the two samples there and if you want to read more about teams deep links that leak is there as well. Alright, that's all I got thanks. Everybody, excellent excellent! Thank you Chris or some of us. Some awesome.