Microsoft 365 Community Community Demos, 10 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend the PnP React SPFx ListView control with a contextual menu

Description

In this 7-minute developer-focused demo, Markus Möller’s solution enables users to perform actions on selected list items. Add a context menu to the list item like it’s available in the default modern experience of lists and like the “edit control block” in the classic experience. Does not physically insert a column inside the SharePoint list view. Uses the ECB (Edit Control Block) control custom render option. Review core code and solution alternatives.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 26, 2023.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - Extend PnP SharePoint Framework React ListView Control with a context menu | https://mmsharepoint.wordpress.com/2018/03/11/extend-pnp-sharepoint-framework-react-listview-control-with-a-context-menu/
• Sample - Employee ListView Contextual Menu | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-listview-context-ecb
• Documentation - ListView: Add a contextual menu | https://pnp.github.io/sp-dev-fx-controls-react/controls/ListView.ContextualMenu/

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

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

A

Quickly, to show you how to extend the known PNP react list view control, so that was a great blog post out this week by visa on this project. Really quick introduction about me.

A

My name is Marcus Miller for those who don't know me: I'm a Microsoft 365, developer expert I work for Evernote in Germany I'm, a Microsoft MVP for M365 development since 2021, and you can reach out to me on Twitter or comment on my blog posts- that's directly jump into my demo, but most of you hopefully already know the standard list view control which is available in the PMP spfx controls.

A

um We see this Library here. How does this look like in a really simple implementation? It would maybe look like this yeah and the good thing is compared to a SharePoint list. The standard view is, of course you can render anything here. It can be SharePoint data.

A

Can we search results can be database data whatever, but you can render it in a SharePoint like design, but what we miss here, for instance, when we compare this to a SharePoint standard list, maybe a controller, that's another control or a so-called edit control block or contextual menu, and this is what I, customly implemented and intended to place here in the third column. I can click simply click that I have three actions here: I can click one and then I have my contacts.

A

I know: okay, I'm in the row of hands and the action one was clicked so really simple implementation here. I can do this the same way with an action, 2 and I know this is actually two and and now the row is clicked and I can even do this with insert action, and here now I'm using another, uh and here I'm using last name as a reference, and that's all so really quick, a simple demo easy to implement.

A

But how to do this?

A

Let me show you in short illustration, the first thing or what we need for this control to run is we need to define the view fields and, as you can see here, uh not in the in the Border but outside the Border. We simply have our data arrows here, like first name last name or Street below, but in between.

A

We want to insert something yeah, and this is uh that we have a custom render option here, and this render option can simply split the data and render in between the columns and the control that I'm rendering here called ECP is nothing else. Then this three dot more vertical icon.

A

Now this is an icon button, which only shows an icon, because I can name more vertical. These are three dots yeah in a vertical way and additionally below we already can imagine that we have some actions here. Behind yeah um I only show uh the first action here, so action one and the first divider the others go quite the same way as you can imagine that nothing else, but I was inserting you and when we click that I made, it really really easy. I was using the code a lot yeah.

A

You should do that in production environments, of course, yeah it's got really annoying, but uh for demonstrating parameters always works good and the easiest way to uh achieve some results. Nothing else here and that's it. How you can simply extend this control.

B

Else, you might think.

A

What you can also use, of course, is uh the spfx way of standard list extensions we have the list command, which is, can either uh hijack or be included in the existing edit control block of a list view, or you can locate a totally different in the command Boxster list yeah. Then it's totally different, it's not on the source, but you can also, of course, then act on uh multiple rows which you selected before that's different yeah.

A

You can also maybe misuse an existing column with the field customizer and not only render maybe the text field, but also additionally render uh this control button. I was showing, or you can totally erase a column and say: hey I do not render anything, but my edit control dock there, but maybe that's not the best idea, but you cannot, like you have seen in my code. You cannot insert an additional column inside a existing SharePoint list, View, which only renders something for list.

A

Formatting I don't see a chance here, because you need JavaScript to render an EXT an additional UI stuff here, like a type, a control block or what else, um but or when you open a dialog, for instance, also yeah. This is what I don't see available.

A

That's not least some resources, I have a blog post and, as you can see from the date there, the blog post is really really old. Yeah, but I never shared the sample. I for clearly forgot to share the sample.

A

um So I catched up on this over the Christmas time and published this as a PNP sample now and with the latest uh SharePoint framework version as well and last, not least, there's also an existing documentation inside the PNP report. Yeah I can maybe quickly switch back to that to close my demo. This is what I also wrote years ago and I think it was a bit refactored.

A

So when we scroll down here come on yeah, we have also a small documentation about this, but if you are not sure about that and I heard some criticism on my blog post recently, this was also a motivation to do it a bit better. um This is why I created the whole sample for your reference.

A

That's it from my side! Thank you.

B

Thank you, Marcus uh really useful demo again, and it is really nice to see how we can extend the PMP react control how we can easily do that. So.