Kanban Board

Summary

This solution contains an SPFx web part that shows a kanban board using Office UI Fabric components (Office UI Fabric). The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.

Used SharePoint Framework Version

Applies to

Prerequisites

This web part reads the information from a Tasks list and uses the following OOB columns

Task Name
Assigned To
% Complete
Description
Priority
Task Status

The Task list can be chosen using the web part properties (BaseTemplate 171 or 107)

Solution

Solution	Author(s)
react-kanban-board	Ram
react-kanban-board	Daniel Westerdale (Westerdale Solutions Ltd., @westerdaled)
react-kanban-board	Peter Paul Kirschner (@petkir_at)

Version history

Version	Date	Comments
1.0.0.0	July 17, 2019	Initial release
1.0.1.0	April 21, 2020	Added support for Teams hosts
2.0.0.0	July 10, 2020	jqwidgets replaced with a custom Kanban Board based on Office UI Component and IE11 Support

Usage

PNP Placeholder control if not Configured
PNP WebpartTitle control (toggle Show/Hide in property pane)
PNP OrderPropertyPane control (change position of buckets)
PNP ListSelectionPropertyPane control (including filtering on BaseTemplateId)
Usage of BucketEdit in Pane (Use a component in property pane (custom field))
Office UI Fabric
PNP JS DataConnection to SharePoint

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
in the command line run:
- npm install
- gulp serve

Features

This sample highlights the following concepts

Binding SharePoint list data to a custom Kanban-Control
Updating SharePoint List Items based on events from the custom Kanban-Control

When a task is moved to different columns in the Kanban Board, the status of the respective SharePoint list item is updated using PnP JS

3.4 KiB Raw Blame History