> 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 で設定できます。 ケースの進捗を表示するカスタマーサポートポータル、取引段階を管理するパートナーポータル、プロジェクトのコラボレーションスペースなど、ポータルユーザーが視覚的なワークフロー管理を必要とするあらゆる場面に最適です。
*** ## はじめに この簡単なチュートリアルで Kanban コンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} *** ## Salesforce データに接続 Avonni Kanban コンポーネントを設定するこの重要な手順では、Kanban ボードと Salesforce 環境内の関連データとの接続を確立します。
仕組みは次のとおりです: * **オブジェクトの選択:** Kanban ボードに表示するデータが含まれている特定の Salesforce オブジェクト（例: Accounts、Opportunities、カスタムオブジェクトなど）を選択することから始めます。 * **任意のフィルタリング:** 選択したオブジェクトからデータの一部だけを表示したい場合は、フィルタリング機能を使って特定の条件を設定します。たとえば、「Open」の Opportunity のみを表示したり、特定の地域内の Account のみを表示したりできます。 * **グループ化（任意）:** データをグループ化して、Kanban ボードを効果的に整理します。たとえば、Opportunity を「Stage」でグループ化すると、「Prospecting」「Negotiation」などの列を作成できます。 * **並べ替え:** 「Order By」項目と昇順または降順を選択して、Kanban カードの表示順を決定します。 * **追加フィールド:** 表示や操作に直接使わない項目を Kanban に含める必要がある場合は、「追加フィールド」セクションに追加します。これは特に、Kanban の検索バーで検索対象にしたい項目に有効です。 ### **重要なポイント** * 適切なデータソースを選ぶことで、Kanban にユーザーにとって最も関連性の高い情報を表示できます。 * フィルタリングとグループ化によってボードが整理され、特定の作業項目をより簡単に視覚化・管理できます。 *** ## データマッピングの設定 「データマッピング」セクションでは、Salesforce データと Kanban ボードの視覚要素を正確に関連付けます。これが重要な理由は次のとおりです: * **正確な表示:** データマッピングによって、Salesforce の項目から取得した情報が Kanban カードやボードの列内に正しく表示されます。たとえば、Salesforce の「Opportunity Name」項目を各 Kanban カードのタイトルにマッピングできます。 * **機能:** マッピングは、ユーザーが Kanban ボードとどのように操作するかも制御します。たとえば、「Status」項目を Kanban の列にマッピングすると、ユーザーはカードをドラッグ＆ドロップして、ボード内で直接ステータスを更新できます。 ### **仕組み** 1. **Salesforce の項目を選択** 設定済みのデータソースから。 2. **Kanban 属性にマッピング** カードタイトル、説明、列名など。 3. **この手順を繰り返します** Kanban ボードに含めたい必須項目すべてについて *** ## アイテムのアクションとインタラクション このセクションでは、ユーザーが Kanban カードとどのように操作するかをカスタマイズでき、ボードをより動的で応答性の高いものにします。 ### **リンク先** * ユーザーが Kanban カード内の特定のリンクをクリックしたときに何が起こるかを定義します。 * **よく使う用途:** レコード詳細ページへの移動、外部 Web サイトの開放、または Salesforce Flow の起動。 ### **クリック時** * ユーザーが Kanban カードの任意の場所をクリックしたときに発生するアクションを決定します。 * **よく使う用途:** カードを展開して詳細を表示する、モーダルウィンドウを開く、またはプロセスを開始する。
インタラクションの種類説明
トーストを表示画面上に短いポップアップ通知を表示し、地図マーカーをクリックした後にすばやいフィードバックや情報を提供します。
移動ユーザーをサイト内の別ページまたは URL にリダイレクトし、クリックした場所に関するより詳細な情報へ誘導します。
アラートモーダルを開くアラートメッセージを含むモーダルウィンドウを開き、選択した場所に関する重要な情報や警告を表示します。
確認を開く確認ダイアログボックスを起動し、イベント参加のように追加のユーザー確認が必要な操作に使用します。
フロー ダイアログを開くSalesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローやプロセスを開始します。
*** ## スタイルの外観 ### **サイズ** * **幅：** Kanban ボード全体の横幅を制御します。 * **高さ：** Kanban ボード全体の縦幅を制御します。 * **オーバーフロー：** 内容がボードの寸法を超えた場合の処理方法を決定します（オプションには 'visible'、'hidden'、'scroll' などがあります）。 ### **枠線** * **サイズ：** Kanban ボード全体を囲む境界線の太さ。 * **スタイル:** 境界線の外観（例: solid、dashed）。 * **色：** 境界線の色。 * **半径：** ボードの角の丸み。 ### **ヘッダー** * **背景色：** Kanban のヘッダーセクションの背景色を設定します。 * **パディング（上、下、左）:** ヘッダー内の内側の余白を制御します。 * **下マージン:** ヘッダーと下の列の間にスペースを作成します。 ### **ヘッダーの境界線** * **境界線の色、サイズ、スタイル、角丸:** ヘッダー内の境界線の外観をカスタマイズします（視覚的に区切るための可能性があります）。 * **下枠線（結合済み）:** これらの属性は、下枠線が列ヘッダーと視覚的に統合されるかどうかを制御している可能性があります。 ### **ヘッダーのタイトル/キャプション** * **色、フォントサイズ、フォントの太さ、フォントスタイル:** ヘッダーのタイトルやキャプションテキストの外観を制御します。 ### **ヘッダーのアバター** * **背景色/前景色:** アバター要素の色を設定します。 * **前景色ユーティリティ:** 事前定義された色ユーティリティクラスを使用できる可能性があります。 * **境界線の半径:** アバター要素の角の丸みを制御します。 ### **列ヘッダー** * **パスの背景色:** 列の進捗パスが表示される背景領域の色。 * **要約テキスト/フォント属性:** 列ヘッダー内の要約テキストの外観を制御します。 ### **列サイズ** * **最小/最大幅:** 列に許可される最小幅と最大幅を設定し、リサイズ時の挙動に影響します。 ### **カード** * **背景色:** 通常、ホバー、フォーカス時の色。 * **境界線の色:** 通常時とフォーカス時の色。 * **タイトル/説明/情報テキストとフォント属性:** カード内のさまざまなテキスト要素の外観を制御します。 * **行数制限:** タイトル/説明で表示する行数を制限し、はみ出しを防ぎます。 ### **重要な注意事項** * **詳細度:** 正確なスタイル属性は、Avonni の実装により多少異なる場合があります。 * **視覚的な階層:** これらの属性を戦略的に使用して、明確な視覚的階層を作り、ユーザーの視線を誘導します *** ## ユースケース例 ### 例 1: パートナー案件 Kanban {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Experience Cloud ポータル内で、パートナーに販売パイプラインの明確でインタラクティブなビューを提供します。ドラッグ＆ドロップの Kanban ボードにより、パートナー ユーザーはポータルを離れることなく、案件を視覚化し、管理し、次の段階へ進めることができます。 *** #### **達成できること** * **パートナーの可視性向上:** ステージ別に整理された案件パイプラインを、リアルタイムで視覚的に把握できるようにします * **直感的なパイプライン管理:** ドラッグ＆ドロップ機能を有効にし、パートナーが案件のステージを簡単に更新できるようにします * **ひと目でわかる案件インサイト:** 各カードにアカウント名、取引金額、完了日などの主要な詳細を直接表示します *** #### **設定方法** {% stepper %} {% step %} #### **Kanban コンポーネントを追加** * AX Kanban コンポーネントを Experience Cloud Builder のキャンバスにドラッグします {% endstep %} {% step %} #### **データソースを設定** * オブジェクト API 名を次に設定: `Opportunity` {% endstep %} {% step %} #### **データマッピングを設定** * キー項目を次に設定: `Id` * グループ項目名を次に設定: `StageName` * レコードタイプを次に設定: `Master` * 集計項目名を次に設定: `Amount` {% endstep %} {% step %} #### **カードをカスタマイズ** * タイトルを次に設定: `名前` * 説明を次に設定: `Account.Name` * 開始日を次に設定: `CreatedDate` * 期限日を次に設定: `CloseDate` * 追加 `Amount` 表示フィールドとして {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * ヘッダータイトルを次に設定: `Opportunity Kanban` * ヘッダーアイコンを次に設定: `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 %} #### **データソースを設定** * オブジェクト API 名を次に設定: `Case` {% endstep %} {% step %} #### **データマッピングを設定** * キー項目を次に設定: `Id` * グループ項目名を次に設定: `Status` {% endstep %} {% step %} #### **カードをカスタマイズ** * タイトルを次に設定: `番号` * 説明を次に設定: `Contact.Name` * 開始日を次に設定: `CreatedDate` {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * バリアントを次に設定: `Path` * ヘッダータイトルを次に設定: `Cases Kanban` * ヘッダーアイコンを次に設定: `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.