MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

【SPFx】GitHubのサンプル「Kanban Board Webpart」を試してみる

f:id:tecchan365:20190803172104p:plain
GitHub上に公開されているSharePoint Frameworkを試してみようと思います。
今回は、SharePoint のタスクリストをカスタマイズして表示するWebパーツの「Kanban Board Webpart」を試します。

事前準備

以下の記事を参考に、開発環境を調整ください。

mynote365.hatenadiary.com

ソースコード

Kanban Board Webpart のソースコードはこちらです。

github.com

クローン or ダウンロード

ソースコードをクローン、もしくはダウンロードします。

f:id:tecchan365:20190803170327p:plain

フォルダーを開く

Visual Studio Code を開き、クローン(ダウンロード)したフォルダーの中から「react-kanban-board」を開きます。

f:id:tecchan365:20190803170632p:plain

npmをローカルインストール

Visual Studio Codeのメニューから [ターミナル] > [新しいターミナル] の順にクリックします。
f:id:tecchan365:20190803170819p:plain

以下のコマンドを実行し、カレントフォルダにnpmをローカルインストールします。

npm install 

f:id:tecchan365:20190803171008p:plain

npm のローカルインストールが完了すると、「node_modules」のフォルダーが出来上がります。

f:id:tecchan365:20190803171245p:plain

Webパーツをプレビューする

gulpコマンドを実行し、Webパーツをプレビューします。
Webパーツのプレビュー方法は、以下を参照ください。

mynote365.hatenadiary.com

Kanban Board Webpartのプロパティ値

Kanban Board Webpart のプロパティ値は、「Link Title」のみです。
ドロップダウンをクリックすると、SharePointのタスクリストの一覧が表示されます。
表示させたいタスクリストを選択します。
f:id:tecchan365:20190803171939p:plain

タスクリストを選択すると、状況別のタスクアイテムの一覧が表示されます。
f:id:tecchan365:20190803172226p:plain

Kanban Board Webpartの動作

タスクアイテムをドラッグアンドドロップすると、状況を変更したり、順番を並び替えたりできます。
簡単でいいですね! f:id:tecchan365:20190803172957g:plain

[・・・] をクリックすると、タスクアイテムの詳細が表示されます。

f:id:tecchan365:20190803173336p:plain

また、状況の追加・状況の名称変更は、タスクリストの列「タスクの状態」の選択肢を編集すると反映されました。

f:id:tecchan365:20190803173813p:plain

以上、Kanban Board Webpartを試してみるでした。

テナントにKanban Board Webpartを展開したい場合は、下記を参照ください。

mynote365.hatenadiary.com