> 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 - Kanban ## 概要 **AX - Kanban** Experience Sites ページ上で、Salesforce レコードをワークフロー列に整理されたドラッグ可能なカードとして表示する Experience Cloud コンポーネントです。 サポートケースのステータス、プロジェクトのフェーズ、承認段階などのワークフローをポータルユーザーが視覚的に把握・管理できるようにするために使用します。ユーザーはカードを列間でドラッグしてレコード値を更新でき、どのフィールドをカードに表示するか、どのピックリスト値を列として定義するかはあなたが制御します。すべてをコードなしで Experience Builder で設定できます。 ケースの進捗を表示するカスタマーサポートポータル、案件段階を管理するパートナーポータル、プロジェクト共同作業スペース、またはポータルユーザーが視覚的なワークフロー管理を必要とするあらゆる場所に最適です。
{% hint style="info" %} **実際のプロジェクトで見る** [一覧ボード](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/listings-board)：段階別の一覧ボード。エージェントごとに 1 つのスイムレーン、列ごとの合計。 {% endhint %} ## はじめに この簡単なチュートリアルを使って 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 ボード全体の周囲のボーダーの太さ。 * **スタイル：** ボーダーの見た目（例：solid、dashed）。 * **色：** ボーダーの色。 * **角丸：** ボードの角の丸みの程度。 {% 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 を `Name` * 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 を `Case` {% endstep %} {% step %} #### **データマッピングを設定** * Key Field を `Id` * Group Field Name を `Status` {% endstep %} {% step %} #### **カードをカスタマイズ** * Title を `Number` * 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.