> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-kanban.md). # AX - カンバン ## 概要 **AX - カンバン** は、Experience Sites ページ上で Salesforce レコードをワークフロー列に整理されたドラッグ可能なカードとして表示する Experience Cloud コンポーネントです。 サポートケースのステータス、プロジェクトのフェーズ、承認段階などのワークフローを、ポータルユーザーが視覚的に把握し管理できるようにするために使用します。ユーザーはカードを列間でドラッグしてレコード値を更新できます。一方で、カードに表示するフィールドや、列を定義する選択リスト値を制御できます。すべての設定はコードなしで Experience Builder から行えます。 ケースの進捗を表示するカスタマーサポートポータル、取引段階を管理するパートナーポータル、プロジェクト共同作業スペースなど、ポータルユーザーに視覚的なワークフロー管理が必要なあらゆる場面に最適です。
## はじめに このシンプルなチュートリアルで Kanban コンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} ## 設定 ### データソース Avonni Kanban コンポーネントを設定するこの重要なステップでは、Kanban ボードと Salesforce 環境内の関連データとの接続を確立します。
仕組みは次のとおりです: * **オブジェクト選択:** まず、Kanban ボードに表示したいデータを含む特定の Salesforce オブジェクト（例: Accounts、Opportunities、カスタムオブジェクトなど）を選択します。 * **任意のフィルタリング:** 選択したオブジェクトから一部のデータだけを表示したい場合は、フィルタ機能を使って特定の条件を設定します。たとえば、「Open」の商談だけや、特定の地域にある取引先だけを表示するように絞り込めます。 * **グループ化（任意）:** データをグループ化して、Kanban ボードを効果的に整理します。たとえば、商談を「Stage」でグループ化すると、「Prospecting」「Negotiation」などの列を作成できます。 * **並べ替え:** 「Order By」フィールドと方向（昇順または降順）を選択して、Kanban カードの表示順を決定します。 * **追加フィールド:** 表示や操作に直接使われないフィールドを Kanban に含める必要がある場合は、「Additional Fields」セクションに追加します。これは特に、Kanban の検索バーで検索可能にしたいフィールドに便利です。 #### **重要なポイント** * 適切なデータソースを選ぶことで、Kanban にユーザーにとって最も関連性の高い情報を表示できます。 * フィルタリングとグループ化によりボードが整理され、特定の作業項目をより簡単に視覚化・管理できます。 ### データマッピング 「Data Mappings」セクションでは、Salesforce のデータと Kanban ボードの視覚要素との正確な接続を確立します。これが重要な理由は次のとおりです: * **正確な表示:** データマッピングにより、Salesforce フィールドから取得した情報が Kanban カード上やボードの列内に正しく表示されます。たとえば、Salesforce の「Opportunity Name」フィールドを各 Kanban カードのタイトルに割り当てられます。 * **機能:** マッピングは、ユーザーが Kanban ボードとどのように操作するかも制御します。たとえば、「Status」フィールドを Kanban の列に割り当てると、ユーザーはカードをドラッグ＆ドロップして、ボード上で直接ステータスを更新できます。 #### **仕組み** 1. **Salesforce フィールドを選択し** 設定したデータソースから取得します。 2. **Kanban 属性にマッピングします** たとえばカードのタイトル、説明、列名などです。 3. **この手順を繰り返します** Kanban ボードに含めたいすべての重要なフィールドについて ### ボードとカードの設定 **列ヘッダーを非表示** は列ヘッダーを非表示にし、 **クリック時にハイライト** はクリックされたカードを強調表示し、 **読み取り専用** はドラッグ＆ドロップとインライン編集を無効にします。ヘッダーは **ヘッダーアイコン名** と **アイコンサイズ**、キャプション、 **ヘッダーを連結** して、下のボードとぴったり揃うようにします。 **属性によるグループ化** レコードを列にグループ化する方法を制御します。折りたたみ状態、未定義グループの非表示、空のサブグループの表示、未定義グループのラベルなどです。 **列の並び順方向** は列の順序を設定します（`デフォルト`, `昇順`, `降順`、または `カスタム`）、また **集計属性** 列ごとの集計（たとえばフィールドの合計）を設定します。 **アバター属性**, **画像属性**、および **フィールドレイアウト属性** 各カードのアバター、画像、フィールドのレイアウトをスタイル設定します。 ## インタラクション このセクションでは、ユーザーが Kanban カードをどのように操作するかをカスタマイズし、ボードをより動的で応答性の高いものにできます。 ### **へのリンク** * ユーザーが Kanban カード内の特定のリンクをクリックしたときに何が起こるかを定義します。 * **一般的な用途:** レコード詳細ページへ移動する、外部サイトを開く、Salesforce Flow を起動する。 ### **クリック時** * ユーザーが Kanban カードの任意の場所をクリックしたときに実行されるアクションを決定します。 * **一般的な用途:** カードを展開して詳細を表示する、モーダルウィンドウを開く、またはプロセスを開始する。
インタラクションタイプ説明
トーストを表示地図マーカーをクリックした後、画面に簡単なポップアップ通知を表示し、すばやいフィードバックや情報を提供します。
移動ユーザーをサイト内の別ページまたは URL にリダイレクトし、クリックした場所に関するより詳細な情報へ誘導します。
アラートモーダルを開く選択した場所に関する重要な情報や警告を表示するアラートメッセージ付きのモーダルウィンドウを開きます。
確認を開く追加のユーザー確認が必要なアクション（イベント参加など）で使用される確認ダイアログを起動します。
Flow ダイアログを開くSalesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローやプロセスを開始します。
## スタイリング {% tabs %} {% tab title="サイズ" %} * **幅：** Kanban ボード全体の横幅を制御します。 * **高さ：** Kanban ボード全体の高さを制御します。 * **オーバーフロー：** ボードの寸法を超えた場合にコンテンツをどう扱うかを決定します（オプションには 'visible'、'hidden'、'scroll' などがあります）。 {% endtab %} {% tab title="枠線" %} * **太さ：** Kanban ボード全体の周囲の境界線の太さ。 * **スタイル：** 境界線の外観（例: 実線、破線）。 * **色：** 境界線の色。 * **角丸：** ボードの角の丸み。 {% endtab %} {% tab title="ヘッダー" %} * **背景色：** Kanban のヘッダー部分の背景色を設定します。 * **パディング（上、下、左）:** ヘッダー内の内部余白を制御します。 * **下マージン:** ヘッダーと下の列の間にスペースを作ります。 {% endtab %} {% tab title="ヘッダーの境界線" %} * **境界線の色、サイズ、スタイル、半径:** ヘッダー内の境界線の見た目をカスタマイズします（視覚的に区切るためのものと思われます）。 * **下罫線（連結）:** これらの属性は、下罫線が列ヘッダーと視覚的に一体化するかどうかを制御している可能性があります。 {% endtab %} {% tab title="ヘッダータイトル/キャプション" %} * **色、フォントサイズ、フォントウェイト、フォントスタイル:** ヘッダーのタイトルとキャプションテキストの見た目を制御します。 {% endtab %} {% tab title="ヘッダーアバター" %} * **背景色/前景色:** アバター要素の色を設定します。 * **前景色ユーティリティ:** 事前定義された色のユーティリティクラスを使用できるようにするものと思われます。 * **境界半径:** アバター要素の角の丸みを制御します。 {% endtab %} {% tab title="列ヘッダー" %} * **パスの背景色:** 列の進捗パスが表示される背景領域の色。 * **要約テキスト/フォント属性:** 列ヘッダー内の要約テキストの見た目を制御します。 {% endtab %} {% tab title="列サイズ" %} * **最小/最大幅:** 列に許可する最小幅と最大幅を設定し、リサイズのされ方に影響します。 {% endtab %} {% tab title="カード" %} * **背景色:** 通常時、ホバー時、フォーカス時の色。 * **境界線の色:** 通常時とフォーカス時の色。 * **タイトル/説明/情報テキストとフォント属性:** カード内のさまざまなテキスト要素の見た目を制御します。 * **行数制限:** タイトル/説明がはみ出さないように、表示する行数を制限します。 {% endtab %} {% endtabs %} ### **重要な注意点** * **詳細度:** 正確なスタイル属性は、Avonni の実装によって若干異なる場合があります。 * **視覚的な階層:** これらの属性を戦略的に使って、明確な視覚的階層を作り、ユーザーの視線を誘導します ## ユースケース ### 例 1: パートナー商談 Kanban {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Experience Cloud ポータル内で、パートナーに自社の販売パイプラインをわかりやすく対話的に表示しましょう。ドラッグ＆ドロップ可能な Kanban ボードにより、パートナーのユーザーはポータルを離れることなく、商談を可視化・管理・前進させることができます。 *** #### **達成できること** * **パートナーの可視性向上:** ステージごとに整理された商談パイプラインを、リアルタイムで視覚的にパートナーに表示します * **直感的なパイプライン管理:** ドラッグ＆ドロップ機能を有効にして、パートナーが商談ステージを簡単に更新できるようにします * **ひと目でわかる取引の洞察:** 取引先名、契約金額、成約予定日などの主要情報を各カードに直接表示します *** #### **設定方法** {% stepper %} {% step %} #### **Kanban コンポーネントを追加** * AX Kanban コンポーネントを Experience Cloud Builder のキャンバスにドラッグします {% endstep %} {% step %} #### **データソースを設定** * Object API Name を `Opportunity` {% endstep %} {% step %} #### **データマッピングを設定** * Key Field を `Id` * Group Field Name を `StageName` * Record Type を `Master` * Summarize Field Name を `Amount` {% endstep %} {% step %} #### **カードをカスタマイズ** * Title を `名称` * Description を `Account.Name` * Start Date を `CreatedDate` * Due Date を `CloseDate` * 追加 `Amount` を表示フィールドとして {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * Header Title を `Opportunity Kanban` * Header Icon を `standard:opportunity` {% endstep %} {% step %} #### **ボードをプレビュー** * Experience Cloud Builder でレイアウトを確認し、設定が期待どおりに見え、動作することを確かめます {% endstep %} {% endstepper %} *** #### **リンク** {% content-ref url="/pages/d76f74e7ad099f1e52fb9329c7973b422b4551b5" %} [AX - タブ](/experience-cloud/experience-cloud-ja/experience-components/ax-tabs.md) {% endcontent-ref %} ### 例 2: ケースステータス Kanban {% @arcade/embed url="" flowId="XXPy9vrTjP5P3hbCqwTg" %} サポートポータル内に専用の Kanban ボードを設置して、お客様がサポート対応の進捗を把握できるようにしましょう。ステータスごとに整理されたケースを表示することで、お客様は進捗をひと目で追跡でき、状況確認の連絡を減らし、よりスムーズで透明性の高いサポート体験を提供できます。 *** #### **達成できること** * **顧客向けの透明性:** 送信済みのすべてのケースのステータスを、見やすく整理されたボードビューでお客様が監視できるようにします * **ステータス問い合わせの削減:** 進捗を先回りして表示し、お客様が更新を追いかける時間を減らします * **サポート満足度の向上:** サポートチームへの信頼と安心感を高める、洗練された直感的な体験を提供します *** #### **設定方法** {% stepper %} {% step %} #### **Kanban コンポーネントを追加** * AX Kanban コンポーネントを Experience Cloud Builder のキャンバスにドラッグします {% endstep %} {% step %} #### **データソースを設定** * Object API Name を `ケース` {% endstep %} {% step %} #### **データマッピングを設定** * Key Field を `Id` * Group Field Name を `ステータス` {% endstep %} {% step %} #### **カードをカスタマイズ** * Title を `番号` * Description を `Contact.Name` * Start Date を `CreatedDate` {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * Variant を `Path` * Header Title を `Cases Kanban` * Header Icon を `standard:case` {% endstep %} {% step %} #### **ボードをプレビュー** * Experience Cloud Builder でレイアウトを確認し、設定が期待どおりに見え、動作することを確かめます {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-kanban.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.