react-listview-context-ecb

Summary

This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.

In action this looks like:

Choose a contextual action:

See the result:

For further details see the author's blog post

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Solution

Solution	Author(s)
react-listview-context-ecb	Markus Moeller (@moeller2_0)

Version history

Version	Date	Comments
1.0	December 26, 2022	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line run:
  • npm install
  • gulp serve
• With Mockup data you are good to go
• Now you can start to adjust to your own custom list data
  • Uncomment the several blocks inside EmployeeListView.tsx

Features

Description of the extension that expands upon high-level summary above.

This extension illustrates the following concepts:

• PnP React SPFx control ListView
  • Add contextual menu
• FluentUI Contextual Menu

References

• Getting started with SharePoint Framework
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development