第5章:タブとダイナミックブロック

皆さん、こんにちは!第5章へようこそ!この章では、タスク管理ページの機能を拡張し、さまざまな表示オプションを導入するために、エキサイティングなコンテンツが詰まっています。楽しみにしているでしょう?心配しないでください、ステップバイステップでガイドしますし、いつものように、一緒に簡単に進めていきましょう!

5.1 ブロックを整理するためのタブコンテナ

既にタスク管理ページを設定しましたが、システムをさらに直感的にするために、タスクをテーブルカンバンカレンダー、さらにはガントチャートなど、さまざまなモードで表示可能にしたいと思っています。NocoBaseのタブ機能を使用すると、同じページでこれらの異なるブロックレイアウトを切り替えることができます。手順を一緒に見ていきましょう。

  • タブを作成する まず、タブを設定しましょう。
  1. サブタブの追加

    • 既存のタスク管理ページを開き、ページ内にサブタブを作成します。最初のタブは**「テーブルビュー」**と名付け、以前設定したタスクリストブロックを表示します。
  2. 新しいタブをさらに追加

    • 次に、2つ目のタブを追加し、**「カンバンビュー」**と名付けます。ここでタスクを管理するカンバンブロックを作成します。

    タブを作成する

準備はできましたか?それでは、各ブロックタイプの作成に入ります!

ブロックの紹介: ブロックはデータとコンテンツの運び手であり、ウェブサイト上で情報を最も適切な形式で表示します。ブロックはページ、モーダル、またはドロワーに追加でき、複数のブロックを自由にドラッグアンドドロップで配置できます。NocoBaseでブロックを使用することで、ページや機能の構築が迅速かつ柔軟になり、テンプレートを使用すると簡単に複製や参照が可能になり、セットアップ時間が大幅に短縮されます。

5.2 カンバンブロック:タスクの状況を一目で把握

カンバンはタスク管理システムの必須機能で、ドラッグアンドドロップで直感的にタスクを管理できます。たとえば、タスクを状況ごとにグループ化して、各タスクの現在のステージを瞬時に把握できます。

5.2.1 カンバンブロックの作成

  1. カンバンブロックの構築を開始する

    • カンバンビュータブ内で「ブロックを作成」をクリックし、タスクコレクションを選択します。その後、タスクをグループ化するフィールドはどれを使用したいか、というオプションが表示されます。
  2. グループ化フィールドの選択

    • タスクの状態でグループ化するために、状態フィールドを選択します。(グループ化フィールドは「ドロップダウン(単一選択)」または「ラジオグループ」のタイプである必要があります。)
  3. ソートフィールドの追加

    • カンバンビュー内では、カードをソートフィールドで整理できます。これを設定するには、**状態ソート(status_sort)**という新しいソートフィールドを作成します。
    • このフィールドは、各状態グループ内でカードを縦に配置することを可能にします。後でカードをドラッグアンドドロップすると、ソート値が自動的に更新され、フォームで確認できるようになります。

    カンバンブロックの作成

5.2.2 フィールドの選択と操作の設定

  • 最後に、カンバンブロックでタスク名やタスクの状態などのフィールドを選択し、各カードが完全かつ関連情報を含むようにしてください。

カンバンフィールドの表示

5.3 テンプレートの利用:コピーと参照

カンバンブロックを作成した後、追加フォームを設定する必要があります。ここで、NocoBaseは非常に便利な機能を提供します——以前に作成したフォームテンプレートをコピーまたは参照することができ、毎回新しいものを再構成する手間を省けます。

5.3.1 フォームをテンプレートとして保存

  • 既存の追加フォームでフォーム設定にカーソルを合わせ、「テンプレートとして保存」を選択します。このテンプレートには「タスクフォーム_追加」という名前を付けることができます。

フォームをテンプレートとして保存

5.3.2 テンプレートをコピーまたは参照する

カンバンビューでフォームを作成する際、2つのオプション「テンプレートをコピー」と「テンプレートを参照」が表示されます。さて、違いは何でしょうか?

  • テンプレートをコピー:これはフォームの複製を作成し、元のフォームに影響を与えずに独立して変更できます。
  • テンプレートを参照:これは元のフォームを「借用」するもので、変更を加えるとすべての他のフォームに反映されます。

テンプレートをコピーおよび参照


5.4 カレンダーブロック:明確なタスクスケジュール

次に、タスクのスケジュールを整理するためのカレンダーブロックを作成します。

5.4.1 カレンダー表示の作成

5.4.1.1 日付フィールドの追加

カレンダー表示を使用するには、タスクコレクションに開始日終了日フィールドが必要です:

  • 開始日(start_date):タスクの開始日を示します。
  • 終了日(end_date):タスクの終了日を示します。

日付フィールドを追加

5.4.2 カレンダーブロックの作成

カレンダー表示でカレンダーブロックを作成し、タスクコレクションを選択して、開始日終了日フィールドを使用して設定します。この構成により、カレンダー上でタスクがスパンとして表示され、明確にタスクのタイムラインが視覚化されます。

カレンダー表示を構築

5.4.3 カレンダーインタラクションを探る

カレンダー内では、タスクを簡単にドラッグし、クリックしてタスク詳細を編集し、必要に応じてテンプレートのコピーや参照を忘れずに行うことができます。

カレンダー操作

5.5 ガントブロック:タスク管理の究極のツール

最後に探るブロックはガントブロックで、プロジェクト管理に広く使用されるツールです。

5.5.1 「ガントビュー」タブの作成

5.5.2 「完了割合」フィールドの追加

ガントチャートでタスクの進捗を効果的に表示するために、**完了割合(complete_percent)**という新しいフィールドを追加する必要があります。このフィールドはタスクの進捗を記録しますが、初期値は0%です。

完了割合フィールドを追加

5.5.3 ガントブロックを作成する

ガントビューでガントブロックを作成し、タスクコレクションを選択して、開始日、終了日、および完了割合フィールドを設定します。

ガントビューを構築

5.5.4 ガントのドラッグ機能を活用

ガントビューでは、タスクの進捗とタイムラインをドラッグすることで調整でき、開始日、終了日、および完了割合フィールドが自動的に更新されます。

ガントドラッグ

まとめ

素晴らしい!これでNocoBaseにおけるさまざまなブロックを使用してタスクデータを表示する方法を学びました。これにはカンバンブロックカレンダーブロック、およびガントブロックが含まれます。これらのブロックはタスク管理をより直感的にするだけでなく、柔軟性を大いに提供します。

しかし、これはまだ始まりに過ぎません!異なる役割を持つメンバーがいるチームを想像してみてください——どのようにして各メンバーがシームレスに協力し、データセキュリティを維持しながら、自分に関連するコンテンツのみを見たり編集したりできるようにするのでしょうか?

準備はできましたか?次の章へ進みましょう:第6章:ユーザーと権限

探求し続け、創造力を解き放ちましょう!問題に遭遇した場合は、NocoBase公式ドキュメントを参照するか、NocoBaseコミュニティに参加して議論してください。

× 画像を拡大表示