Microsoft 365 Community Column and view formatting tips, 16 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Lists custom formatting - Hover cards

Description

This 6-minute site collection admin focused demo delivered by Niket Jain, Microsoft SharePoint Program Manager focused on list capabilities, shows new functions that allow admins to define custom call outs (cards) for column and view formatting that can be commissioned on user defined actions like click or hover. Alternatively, when there is a default hover card, users can now have a profile card or file hover card on formatters that in effect overwrites the default hover experience. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 16, 2020.

Presenter: Niket Jain (Microsoft) | @niketjain2002

Supporting materials:
• Default hover cards - column samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/default-hover-cards
• Custom hover cards- column samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards
• Default hover cards - view samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/default-hover-cards
• Custom hover cards - view samples | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-hover-cards
• Default card on hover via column formatting | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#default-cards-on-hover-via-formatting

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/m365pnp

A

Good morning, everyone, my name, is Nikki and I'm, a program manager with Microsoft and I work on SharePoint list. Today, I will be taking your 15 minutes and quickly talk about custom cards and default cover cards on lists. This is driven by four matters and what I'll be talking today would be one on custom cards, so custom cards is basically applicator could be applied both on column and view formatting. But it's it's basically custom layer to define custom call-outs and can be commissioned on basis of two kinds of actions.

A

The user-defined actions, which is click or hover I'll, be I'll, be showing a demo of it quickly, but just to name it. The function name is custom card probs. There are certain sub properties which are mandatory. The start, one which you see where there are they're mandated to be defined and there's certain ones which are optional so just to talk about the sub properties open on event, as in do you want a custom, call out to be open on an event which is, let's say, a click or a hover?

A

There's a directional end over there, which is let's say top center, both bottom center left center or right center is become label the beak, if in case you want to be over there on the custom column and some format, a definition of course that what kind of a you want to showed other custom card. Let me just quickly jump to one of the demos, so there's a list in front of me, which has certain title: columns, product ID, product price and all what I will try to do.

A

What there is this vital column with the name of microsoft, hololens right on, however, I get to see a tooltip which exactly shows the title content. Let me put on the formatter window whether this is also new template. I'll leave it for now right now, so I'll go to the Advanced Mode over here. Let me switch back to my a visual studio code, and here I've got some some sample jason in front of me.

A

What I'm doing over here is I'm, saying I've defined some style and I'm, saying that on text contain like that current field, I'm defined that whatever I apply on the current field, which is title column in this case, then I define the property which is custom card props in that I define four things open an event. I say on hover whenever I hover on title cell I should see something directional hentai defined as right-center become label and I put formatter operation, which is exactly the styling and from where should it draw the value?

A

So here I'm, drawing the value from product price product price is a column name if you notice it's right over here, the second column. So let me do this. Let me just quickly copy and click on preview. I, don't see any change right now, but once I start hovering over here you notice there is a 3500 which I can see which is corresponding pod product price for the title column. That's what I start to get to see if I expand the same concept, I'm just showing you one example.

A

Over there, one one column I can as well do it over there on column, let's say status column, for this is a beautifully made custom card which exactly is drawing certain dates, which is pack shipped in transit from three columns which are packed date, column, shipped date, column and in transit date, column I have some other experiences also, which is let's say on hover. I, can do some image hover icons or on click. I can define certain cards, so yeah I think this is the demo that I have for custom cards right now.

A

This thing can also be applied to your view. Formatting I am talking from column formatting, but the same functionality is also available for you. Formatting I'll go to the next one, which is default. Our cut so default about cards is a functionality not for matters have existed, I, think for more than any man and a half two years, I think and what happens right now. The default Microsoft hover experiences, which is exactly your file, our and profile, have a pods. They get overwritten in case you apply a formatter now.

A

What we are saying is in width formatter. You can get to see all both these hover experiences back to normal, so just for the for the sake I'm saying the function name is default. Have a field and I'll quickly show you what do I mean by this? Let me go to the list now. Let me show it to you on document, so undock in a doclet I get a modified column which is basically a people column.

A

The default behavior right now is I hover on Megan, Bowen and I see a profile card on top of it. But now let me go to.

A

Mark this column and let's say I, apply a certain quick formatting.

A

Which is nothing I'm just using the profile picture to enlarge it a little so I applied some formatting on it now what's happening right now is if I hover on here, the formatter has overwritten the default. Our behavior I can't see Megan wrongs, profile card and I. Think we've been getting these requests for very long we're in for mydas override the default experience.

A

Now let me go and do it with the new function that I'm talking, which is my default, our field, it's just a simple function where you just need to define on which column this is the mother screen, column name, it's basically the actual column name behind the screen which defines modified by column.

A

So let me just quickly copy and preview. This now nothing change over here, but what I got after this is I'm getting the profile card back. This is the same functionality. This is again it's available over there in your tiles, I mean to say your view for my tests as well, and as well as your fine cuts. That's what I had guys. Thank you. There's.

B

A lot of feedback people really love this excellent, brilliant by the way, a very nice plus one on the chat window so really great to see this stuff moving and also, we can probably say in this wood without actually it disclose anything extra. We are embedding quite a lot of improving the lists in the future more and more and more so. This is an area where we are constantly introducing capabilities, so you can see similar kind of things in the future as well.