カンバン

データに接続する

Kanban ボードが意味のある表示を行うには、どこからデータを取得するかを知る必要があります。Avonni は、さまざまなデータソースにボードを接続するための柔軟なオプションを提供します：

データをカンバンにマッピングする

Avonni Kanban コンポーネントをデータソース（例：Avonni Query データソース）に接続したら、次に行う必要があるのは マッピングする データのフィールドを Kanban ボードのさまざまな視覚要素にマップします。これによりコンポーネントは 何の データを表示するかを どこに 表示するかを指示します。

カンバン列のグルーピング

この グループフィールド名 プロパティは 最も重要な マッピング設定です。これは、どのデータソースのフィールドが 列 を作成するために使用されるかを決定します。

• 仕組み： Kanban コンポーネントは、グループ用に選択したフィールド内のすべての一意の値を参照します。 グループフィールド名. 各一意の値は ボード上の別々の列になります。

• 例（タスクのステータス）： タスクをその 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 （例：「未開始」「進行中」「完了」）ごとにグループ化する Kanban ボードを作成するには：

  1. データソースが次を取得することを確認します： タスク レコードと次のフィールドを含んでいること。 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 フィールド。

  2. キャンバス上で Kanban コンポーネントを選択します。

  3. プロパティパネルで、次を見つけます： グループフィールド名 プロパティに貼り付けます。

  4. リソースセレクタをクリックし、次からフィールドを選択します： 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 データソースのフィールド。

列内のサブグルーピング

各 Kanban 列内に（一般に「スイムレーン」と呼ばれる）第2レベルの整理を追加するには、次を使用します： サブグループフィールド名 プロパティに貼り付けます。

たとえば、まずタスクを 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 でグループ化し、その後で 優先度でグループ化する場合、次のように設定します：

• グループフィールド名 を 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。.

• サブグループフィールド名 を 優先度.

これにより、ステータス別の列が作成され、それぞれが横方向の優先度セクションでさらに分割されます。

列データの集計

主要な値の概要を素早く提供するために、各 Kanban 列の上部に 合計 を表示できます。この機能は、特定の数値、通貨、またはパーセントフィールドの合計を、その列内のすべてのカードについて自動的に計算して表示します。

設定手順：

1. グルーピングが設定されていることを確認： 主要な グループフィールド名 が設定されていることを確認します（例：商談の場合は StageName（商談フェーズ） ）。

2. 集計プロパティを見つける： コンポーネントのプロパティで、次を探します： 集計フィールド名 の設定。

3. 合計するフィールドを選択： ドロップダウンリストから、各列で合計したい 数値、通貨、またはパーセント フィールドを選択します。これら特定のデータ型のフィールドのみが選択可能です。

例：ステージごとの商談金額の合計

Kanban ボードが商談をその StageName（商談フェーズ）でグループ化して表示しているとします。各ステージの潜在的な収益合計を見たい場合。

• 操作： プロパティの 集計フィールド名 において、次のフィールドを選択します： Amount （これは通貨フィールドです）。

• 結果： 各 StageName 列のヘッダー（例：「交渉／レビュー」）は、今や自動的に の合計を表示します。 Amount フィールドの すべての商談カードに対して。これにより、各ステージでのパイプライン価値の即時の概要が得られます。

カードの内容の設定

このセクションは、Kanban ボード内の各カードに どの情報が表示されるかを制御します。 Kanban ボード内の各カードに表示される情報。

• カバー画像（オプション）： データソースに画像 URL を含むフィールドがある場合、そのフィールドを カバー画像 プロパティにマッピングして、各カードに画像を表示できます。

• タイトル： カードごとに表示するデータソースのフィールドを、カードの タイトル として選択します。タスクの例では、これをおそらく 件名 フィールド。

にマッピングするでしょう。

1. タスク Kanban のカード内容を設定するには： Kanban コンポーネントを選択：

2. キャンバス上で Kanban コンポーネントをクリックします。 「カード属性」セクションを見つける：

3. プロパティパネルでカード属性を設定するセクションを探します（「Card Attributes」「Item Display」などと表示されている場合があります）。

   • タイトルをマップする： タイトル プロパティに貼り付けます。

   • 位置情報を含む 件名 データソースのフィールド。

タイトル横のリソースセレクタをクリックします：

データソースにこれらのフィールドが含まれ、Kanban コンポーネントがそれらをサポートしている場合は、説明や期日など、他のカード要素用の追加マッピングを行うこともできます。

Kanban ボードのフィルタ設定

フィルタリングにより、Kanban ボードに表示されるカードを絞り込み、特定のタスクやカテゴリに集中しやすくなります。Avonni Kanban コンポーネントでフィルタを設定するには 2 段階のプロセスがあります：まず、どのフィールドをフィルタとして使用できるかを有効にし、次にフィルタコントロールをユーザーにどのように表示するかを決定します。

ステップ 1：フィルタ対象フィールドを有効にする

1. タスク Kanban のカード内容を設定するには： ユーザーがフィルタに使用できるデータソースのフィールドをまず指定する必要があります。

2. キャンバス上の Kanban コンポーネントをクリックします。 データマッピングセクションに移動：

3. フィルタ属性を見つけます。 優先度, このフィールドをクリックして、ユーザーにフィルタさせたいすべてのフィールドを選択します。例：担当者 または.

期限日

このステップで選択したフィールドのみがエンドユーザーのフィルタメニューに表示されます。

ステップ 2：フィルタ表示オプションを設定する 一つ以上のフィールドをフィルタ可能にしたら、フィルタコントロールをユーザーにどのように表示するかを調整できます。これらの設定は Kanban コンポーネントのプロパティパネルの主要な フィルタ

セクションにあります。

フィルタをポップオーバーで表示する

• デフォルトでは、有効化されたフィルタは Kanban 列の上の行に表示されることがあります。フィルタが複数あると貴重な画面スペースを占有する可能性があります。よりクリーンでコンパクトなインターフェースを作るために、それらを単一のボタンに統合できます。 設定： （ブール - チェックボックス）

• 仕組み： ポップオーバーとして表示

このオプションを有効にすると、個々のフィルタ行を単一のフィルタボタンに置き換えます。ユーザーがこのボタンをクリックすると、ポップアップウィンドウ（ポップオーバー）が表示され、利用可能なすべてのフィルタコントロールが含まれます。

ピックリストフィルタの選択肢を合理化する

• デフォルトでは、有効化されたフィルタは Kanban 列の上の行に表示されることがあります。フィルタが複数あると貴重な画面スペースを占有する可能性があります。よりクリーンでコンパクトなインターフェースを作るために、それらを単一のボタンに統合できます。 フィルタをピックリストで行う際に、結果が得られない選択肢を非表示にしてより賢明で使いやすい体験を提供できます。 （ブール - チェックボックス）

• 仕組み： 空のピックリスト値を隠す

これを有効にすると、ピックリストフィールドに基づくフィルタは、現在 Kanban ボードに読み込まれているレコードに存在しない選択肢を自動的に隠します。これにより、ユーザーが空の列しか表示しないフィルタ値を選ぶのを防ぎます。

これらの設定を組み合わせることで、ユーザーが Kanban ボード上で必要な情報を迅速に見つけられる、堅牢で影響力のあるカスタマイズされたフィルタ体験を作成できます。

アクションとインタラクションを追加する Kanban ボードを単なる視覚表示から機能的で対話可能なツールに変えるには、次を設定できます： および Interactionsアクション

。アクションは（ボタンなどの）クリック可能な要素で、インタラクションはユーザーが操作したとき（ボタンをクリックしたりカードをドラッグしたりしたとき）に何が起こるかを定義します。 Interactions これらは Kanban コンポーネントのプロパティの

セクションで設定できます。

カードレベルのアクション

仕組み：

1. これにより、ボード上の各カードに特定のアクションボタンやオプションメニューを追加できます。 カードアクションを定義する： まず、Kanban プロパティの カード属性 ラベル セクションでアクション項目を追加します。各項目について、 Name（名前） を指定します（例： （例：「詳細を表示」「編集」）と一意の, view_detailsedit_record

2. のような識別子を定義します）。これらは各カードにボタンまたはメニューとして表示されます。 インタラクションを設定する： Interactions 次に、Kanban コンポーネントを選択して セクションに移動します。次に、 アイテムアクションクリック時 Name（名前） イベントにロジックを追加します。ここで、どのアクションがクリックされたかを判定する条件を設定し、適切な応答（例えば、 レコードページへ移動する、または 編集画面を起動するために フローダイアログを開く ）をトリガーします。

ドラッグ＆ドロップの自動化

これは Kanban ボードの最も強力で時間節約になる機能の一つです。デフォルトでは、ユーザーがカードを新しい列にドラッグすると、Kanban コンポーネントは 自動的にレコードのグルーピングフィールドを更新しようとします （例：新しい列の値に合わせて 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 または StageName（商談フェーズ） を変更する）。

この アイテムドロップ時 のインタラクションでは、定義できます： 追加の自動化アクション がトリガーされるべきかを、 「Create from Record Variable」アクションの このドラッグ＆ドロップ更新が正常に完了した際に行われます。

• 発生タイミング： ユーザーがカードを新しい列に正常にドロップし、基になるレコード更新が処理された瞬間にトリガーされます。

• 一般的な使用例（何に使うか）：

  • ユーザーフィードバックの提供： を使用して、変更を即座に確認させます（例：「商談ステージが '交渉' に更新されました。」）。 トーストを表示 他コンポーネントの更新：

  • クエリをすべて更新 既存のレコードデータを取得するには、 を使って、同じページ上の他のコンポーネント（チャートやデータテーブルなど）を更新し、Kanban に表示されているデータを要約させます。 アクティビティの記録：

  • フローをトリガーして、親レコード上に完了済みのアクティビティレコードを作成し、Kanban ボード経由でステータスが変更されたことを記録します。 レコード更新に関するプロのヒント

これらは特定のカードではなく、ボード全体に適用されるアクション用です。

まず Kanban の

• 仕組み： セクションにボタンを追加します（例：「新しいタスク」「更新」）。次に、 Header ヘッダーアクションクリック時 のインタラクションを使って、それらのボタンが何をするかを定義します。例：新しいレコードを作成するフローを起動する、またはボード全体のデータソースを更新する、など。 これらの異なる種類のインタラクションを組み合わせることで、ユーザーが作業を可視化するだけでなく、直接操作して行動できる非常に効率的で動的なツールを作成できます。

バリデーションルールのサポート

Avonni Kanban コンポーネントは

Salesforce の既存のバリデーションルールを尊重することを知っておくことが重要です。 ユーザーがカードを新しい列にドラッグしたとき、コンポーネントは対応するレコードの更新を試みます。もしこの更新が.

• 仕組み： Salesforce Setup で構成した バリデーションルール に違反する場合（例：特定のフィールドが特定のステージに移動する前に入力されている必要があるというルール）、その移動は 阻止されます。.

• ユーザーフィードバック： ユーザーにはエラーメッセージが表示されます。通常は Salesforce のバリデーションルール自体で定義したメッセージが表示され、なぜ移動が許可されないのかが説明されます。これにより、無効な状態変更が行われず、データの一貫性が保たれます。すべて Kanban インターフェースから直接行われます。

カンバンボードのカスタマイズ

データソースを接続し、列グルーピングを定義したら、Kanban ボードのレイアウト、外観、機能をカスタマイズできます。すべての設定は Kanban コンポーネントが選択されているときの プロパティパネル にあります。

全体のレイアウトとバリアント

このセクションは Kanban ボードの基本的な表示スタイルを制御します。

• バリアント： ボードの主要なレイアウトを選択してください：

  • ベース （デフォルト） 従来のカンバンレイアウトは、異なるステージやカテゴリ（例：「To Do」「進行中」「完了」）を表す縦列が特徴です。

  • パス: ステージを横方向のシェブロンスタイルのパスとして表示します。これは項目が定義されたプロセスを線形に進む様子を視覚化するのに優れています。

• 列ヘッダーを非表示： （ブール）よりミニマルな外観にするため、各列の上部にあるヘッダーを非表示にするオプションを有効にします。

ヘッダー設定

ヘッダーは Kanban ボードの上部に位置し、タイトルやボードレベルのアクションのスペースを提供します。

• タイトル、キャプション、アイコン： Kanban ボードに明確な タイトル （例：「プロジェクトタスク」）を付け、必要に応じて追加の文脈を与えるための任意の キャプション を設定し、ボードの目的を視覚的に表すための アイコン名 アイコンを設定します。

• ヘッダーアクション： ヘッダーにカスタムボタンを追加して、ボード全体に関連するアクション（例：フローを起動して新しいアイテムを作成する「新しいタスク」ボタン、データの更新、情報のエクスポートなど）をトリガーできます。 ボード全体に関連するアクション。

カード表示（フィールド属性）

各 Kanban カードに表示される情報を制御します。

• フィールドの追加： コンポーネントのプロパティで、カードに表示するデータソースのフィールドを選択できます。これにより、タイトルだけでなく、所有者、期日、優先度などの詳細を表示できます。

• フィールドラベルの表示（バリアント): 追加フィールドのラベルをカード上でどのように表示するかを制御します（例： スタンダード ラベルを値の上に表示する、または ラベルを非表示にする よりコンパクトな表示のため）。

列の順序

デフォルトでは、列は通常アルファベット順またはピックリストフィールドで定義された順序で表示されます。これを上書きするには、 列の順序 プロパティに貼り付けます。

• オプション：

  • 昇順 / 降順: 列をアルファベット順（A-Z または Z-A）に並べ替えます。

  • カスタム: この強力なオプションを使用すると、列の特定の非アルファベット順の順序を定義できます（例：「バックログ」「進行中」「レビュー」「完了」）。カスタムを選択すると、列の値を希望の順序にドラッグしたり、表示したくない列を非表示にしたりできるインターフェースが表示されます。

ボードの機能性

これらの設定は Kanban ボードの主要なインタラクティブ機能を制御します。

• 検索を有効にする： （ブール）Kanban ボードに検索ボックスを追加し、ユーザーが検索語に基づいてカードをフィルタリングして特定のカードを素早く見つけられるようにします。

• 読み取り専用： （ブール）有効にすると、ボードがロックされ、ユーザーがカードをドラッグ＆ドロップしてステータスや位置を変更することができなくなります。閲覧専用の表示を作成する際に便利です。

これらのカスタマイズオプションを使用することで、Avonni Kanban コンポーネントを特定のプロセスやユーザーのニーズに完全に適合する、視覚的で機能的かつユーザーフレンドリーなツールに仕立てることができます。

スタイル

Avonni Kanban ボードのほぼすべての視覚的側面をブランドに合わせて微調整し、データの可読性を向上させることができます。ほとんどのスタイリングオプションは スタイルパネル またはコンポーネントの内部で設定され、コンポーネントのさまざまな部分に再利用可能なスタイルを作成して適用できます。 プロパティパネルまたはコンポーネントの

全体のレイアウトと間隔

これらの設定は Kanban コンポーネント全体のコンテナに影響し、その位置と一般的な間隔を制御します。

• マージン： 外側のスペースを調整して、 Kanban ボードの境界の外側のスペースを調整し、ページ上の他のコンポーネントと分離します。 を分離し、ページ上の他のコンポーネントから区切ります。

• パディング： メインの境界内のスペースを制御します： の Kanban ボードの主要な境界、エッジとその内容（ヘッダーや列など）の間のスペースを制御します。

• サイズ： 全体の 幅 および 高さ を定義して、ページレイアウトに合わせます。

ヘッダースタイリング

列の上にあるメインヘッダー領域をカスタマイズして際立たせます。

• 背景と境界： ヘッダーセクションの背景色を変更したり、境界線を調整したりします。

• タイトルとキャプションのスタイリング： タイトルとキャプションの フォントサイズ, フォントの太さ （太字）および 文字色 を制御して視覚的な階層を作ります。

• アイコンのスタイリング： ヘッダーアイコンのサイズと色をカスタマイズします。

列のスタイリング

個々の列（例：「To Do」「進行中」「完了」）の外観を制御します。

• 列ヘッダー： それぞれの列ヘッダーのフォント、色、背景をカスタマイズして区別します。

• 列本体： カードが配置される領域の 背景色 を設定します。

• 境界線： 列を区切る境界線のスタイルと色を調整します。

• 幅： 一度に表示される列数を管理するために列の幅を定義します。

カードのスタイリング

Salesforce レコードを表す個々のカードの外観をカスタマイズします。

• 背景と境界： を変更します： 背景色, 境界色, 境界スタイル、および 角の半径 （角丸）を各カードに対して設定します。

• テキスト： カードに表示されるさまざまなフィールドのフォントスタイルを調整して、重要な情報を強調します。

これらのスタイリングオプションを組み合わせることで、標準的な Kanban ボードを視覚的に魅力的で、機能的かつアプリケーションのデザインに完全に一致するツールへと変換できます。