# AX - カンバン ## 概要 **AX - Kanban** は、Experience Site ページ上で Salesforce レコードをドラッグ可能なカードとして表示し、ワークフロー列に整理する Experience Cloud コンポーネントです。 サポートケースのステータス、プロジェクトのフェーズ、承認ステージなど、ポータルユーザーがワークフローを可視化・管理できるようにするために使用します。ユーザーはカードを列間でドラッグしてレコード値を更新でき、カードに表示するフィールドや列を定義するピックリスト値はあなたが制御できます。すべてをコードなしで Experience Builder で設定できます。 ケースの進捗を表示するカスタマーサポートポータル、取引ステージを管理するパートナーポータル、プロジェクト共同作業スペースなど、ポータルユーザーが視覚的なワークフロー管理を必要とするあらゆる場面に最適です。
*** ## はじめに この簡単なチュートリアルで Kanban コンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed flowId="SKeLCf1CoTnJZHTYhLOF" url="" %} *** ## Salesforce データに接続する Avonni Kanban コンポーネントの設定におけるこの重要な手順では、Kanban ボードと Salesforce 環境内の関連データとの接続を確立します。
仕組みは次のとおりです: * **オブジェクトの選択:** Kanban ボードに表示したいデータを含む、特定の Salesforce オブジェクト（例: アカウント、商談、カスタムオブジェクトなど）を選択することから始めます。 * **オプションの絞り込み:** 選択したオブジェクトのデータの一部のみを表示したい場合は、絞り込み機能を使って条件を設定します。たとえば、「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 カード内の特定のリンクをクリックしたときに何が起こるかを定義します。 * **一般的な用途:** レコード詳細ページへの移動、外部 Web サイトの開閉、Salesforce Flow の起動など。 ### **クリック時** * ユーザーが Kanban カードのどこかをクリックしたときに発生するアクションを決定します。 * **一般的な用途:** カードを展開して詳細を表示する、モーダルウィンドウを開く、プロセスを開始するなど。
操作タイプ説明
トーストを表示画面上に簡単なポップアップ通知を表示し、マップマーカーをクリックした後に素早いフィードバックや情報を提供します。
移動ユーザーをサイト内の別ページまたは URL にリダイレクトし、クリックした場所に関するより詳細な情報へ案内します。
アラートモーダルを開くアラートメッセージ付きのモーダルウィンドウを開き、選択した場所に関する重要な情報や警告を表示します。
確認を開く確認ダイアログ बॉックスを起動し、イベント参加など追加のユーザー確認が必要な操作に使用します。
Flow ダイアログを開くSalesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローやプロセスを開始します。
*** ## スタイルと外観 ### **サイズ** * **幅:** Kanban ボード全体の横幅を制御します。 * **高さ:** Kanban ボード全体の縦の高さを制御します。 * **オーバーフロー:** コンテンツがボードの寸法を超えた場合の扱いを指定します（「visible」「hidden」「scroll」などのオプションがあります）。 ### **ボーダー** * **サイズ:** Kanban ボード全体を囲むボーダーの太さです。 * **スタイル:** ボーダーの外観（例: solid、dashed）です。 * **色:** ボーダーの色です。 * **半径:** ボードの角の丸み具合です。 ### **ヘッダー** * **背景色:** Kanban のヘッダーセクションの背景色を設定します。 * **パディング（上、下、左）:** ヘッダー内の内部余白を制御します。 * **下マージン:** ヘッダーとその下の列との間にスペースを作ります。 ### **ヘッダーボーダー** * **ボーダーの色、サイズ、スタイル、半径:** ヘッダー内のボーダーの外観をカスタマイズします（視覚的に区切るために使われる可能性があります）。 * **下ボーダー（結合されているか）:** これらの属性は、下ボーダーが列ヘッダーと視覚的に一体化するかどうかを制御している可能性があります。 ### **ヘッダーのタイトル/キャプション** * **色、フォントサイズ、フォントウェイト、フォントスタイル:** ヘッダーのタイトルおよびキャプションテキストの外観を制御します。 ### **ヘッダーアバター** * **背景色/前景色:** アバター要素の色を設定します。 * **前景色ユーティリティ:** 事前定義された色のユーティリティクラスを使用できるようにするものと思われます。 * **ボーダー半径:** アバター要素の角の丸みを制御します。 ### **列ヘッダー** * **パスの背景色:** 列の進捗パスが表示される背景領域の色です。 * **要約テキスト/フォント属性:** 列ヘッダー内の要約テキストの外観を制御します。 ### **列のサイズ設定** * **最小/最大幅:** 列に許可される最小幅と最大幅を設定し、リサイズの挙動に影響します。 ### **カード** * **背景色:** 通常、ホバー、フォーカス時の色です。 * **ボーダー色:** 通常時とフォーカス時の色です。 * **タイトル/説明/情報テキストとフォント属性:** カード内のさまざまなテキスト要素の外観を制御します。 * **行数制限:** タイトルや説明の表示行数を制限し、オーバーフローを防ぎます。 ### **重要な注意事項** * **特異性:** 正確なスタイル属性は、Avonni の実装により多少異なる場合があります。 * **視覚的階層:** これらの属性を戦略的に使用して、明確な視覚的階層を作り、ユーザーの視線を誘導します *** ## ユースケースの例 ### 例1: パートナー商談 Kanban {% @arcade/embed flowId="JQJEWO5OUQQf4fSb0GfD" url="" %} 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="ax-tabu" %} [ax-tabu](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-tabu) {% endcontent-ref %} ### 例2: ケースステータス Kanban {% @arcade/embed flowId="XXPy9vrTjP5P3hbCqwTg" url="" %} サポートポータル内に専用の 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 %}