honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-kanban-board
History
Hugo Bernier 86013372c0 Added all 1.12.1 and 1.13 containers 2022-02-14 02:52:18 -05:00
..
.devcontainer Added devcontainers for 1.13 solutions 2022-01-31 00:10:13 -05:00
.vscode update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00
assets Removing unnecessary office product from the sample metadata 2021-12-10 19:55:32 +02:00
config pnpjs update, solution version 2021-10-29 08:59:24 -07:00
src pnpjs update, solution version 2021-10-29 08:59:24 -07:00
teams React kanban (#918) 2019-07-28 13:25:41 +03:00
.gitignore Added devcontainers for 1.13 solutions 2022-01-31 00:10:13 -05:00
.npmignore update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00
.yo-rc.json update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00
README.md Added all 1.12.1 and 1.13 containers 2022-02-14 02:52:18 -05:00
gulpfile.js update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00
package-lock.json npm version 2021-10-29 08:59:42 -07:00
package.json npm version 2021-10-29 08:59:42 -07:00
tsconfig.json update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00
tslint.json update to SPFx 1.13 - wip 2021-10-27 14:00:41 -07:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
React
7/17/2019 12:00:00 AM

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.

picture of the web part in action

Compatibility

SPFx 1.13.0 Node.js v14 | v12 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Unsupported Hosted Workbench Compatible Compatible with Remote Containers

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 Prasad Meenavalli (@ram_meenavalli)
react-kanban-board Daniel Westerdale (Westerdale Solutions Ltd., @westerdaled)
react-kanban-board Peter Paul Kirschner (@petkir_at)
react-kanban-board Alex Terentiev (@alexaterentiev)

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
3.0.0.0 October 29, 2021 SPFx 1.13, PnPJS v2, PnP Controls v3

Read More about the implementation of this Board

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

Minimal Path to Awesome

  • in the command line run:
    • npm install
    • gulp serve

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

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

Help

We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

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.