Data LWC コンテナ

Data LWC コンテナ このコンポーネントは強力な橋渡しの役割を果たします。Avonni の使いやすいデータ処理機能（クエリ、フィルタリング、検索、ページネーションなど）を、開発者が構築したカスタム Lightning Web Component（LWC）の独自の視覚表示機能と組み合わせます。

概要

Data LWC コンテナをカスタムの絵のための「スマートフレーム」と考えてください。Avonni は革新的なフレームを提供します：

• 馴染みのある Query または Variable データソースを使用して Salesforce のデータを取得します。

• そのデータに対して組み込みのフィルタリング、検索、およびページネーションのコントロールを提供します。

カスタム LWC（開発者が構築）はフレームの中の「絵」の役割を果たします：

• Avonni コンテナによって管理されるデータを受け取ります。

• 標準の Avonni コンポーネントでは実現できないかもしれないカスタムな視覚フォーマットでデータを表示します。

なぜ使うのか？（利点）

• カスタム UI を活用: 開発者によって構築されたユニークで高度に専門化された UI コンポーネントを利用できます。開発者が複雑なデータ取得、フィルタリング、検索、ページネーションのロジックまで構築する必要はありません。Avonni がデータに関する重い処理を担当します。

• 両方の利点を享受: Avonni のノーコードのデータ設定と使いやすさを、カスタム LWC の無限の視覚的可能性と組み合わせます。

• 一貫したデータ機能: このコンテナで動作するように設計された任意のカスタム LWC に対して、標準の Avonni フィルタ、検索、ページネーションのコントロールを適用できます。

• 柔軟性: 全体の構造やデータ管理には Avonni ビルダーを使用しつつ、ニッチな UI 要件にはカスタム LWC ソリューションを組み込めます。

Data LWC コンテナの追加方法

ドラッグ＆ドロップ：コンポーネントライブラリから「Data LWC Container」コンポーネントを見つけ、キャンバスにドラッグします。

Data LWC コンテナの設定

キャンバス上の Data LWC コンテナコンポーネントを選択して、プロパティパネルでそのプロパティにアクセスします。

データソース

これはコンテナにどのデータを取得・管理するかを伝えます。

• データソース: データの提供方法を選択してください：

  • クエリ: Avonni の Query データソースを使用して Salesforce から直接レコードを取得します。これが最も一般的なオプションです。

  • Variable: 既に表示したいレコードのリストを含んでいる変数リソース（通常はコレクション変数）を使用します。

LWC 接続

これはコンテナに表示に使用するカスタム LWC とデータの送信方法を伝えます。

• LWC 名: （テキスト）データを表示するカスタム Lightning Web Component（開発者が構築）の正確な API 名（例： c/myCustomCardList, namespace/specialDisplay）。この名前は LWC 開発者から取得します。

• レコード ID 属性: （テキスト）Avonni が Salesforce のレコード ID のリストを送信すべきカスタム LWC 内の特定の変数名。正確な属性名は LWC 開発者が提供します。

• レコード属性: （テキスト）Avonni が実際のレコードデータ（取得したレコードのリスト）を送信すべきカスタム LWC 内の特定の変数名。正確な属性名は LWC 開発者が提供します。

• エラー属性: （テキスト）クエリが失敗した場合に Avonni がエラー情報を送信すべきカスタム LWC 内の特定の変数名。正確な属性名は LWC 開発者が提供します。

（これらの属性設定は荷物の宛名のように考えてください — 正しい名前が LWC 開発者から提供されている必要があり、Avonni がカスタムコンポーネント内のどこにデータを届けるかを認識します。）

標準機能

コンテナはこれらの馴染みのある Avonni 機能を提供し、カスタム LWC に送信される前にデータで動作します。標準の Avonni データテーブルと同様に有効化および設定できます：

• Header: タイトル、キャプション、アイコン、ヘッダーアクションボタンでコンテナのヘッダーをカスタマイズします。

• ページネーション: 大規模データセットを扱うためにページネーションを有効にし、ページあたりの項目数やナビゲーションコントロールを制御します。

• 一つ以上のフィールドをフィルタ可能にしたら、フィルタコントロールをユーザーにどのように表示するかを調整できます。これらの設定は Kanban コンポーネントのプロパティパネルの主要な: データソース内のフィールドに基づいた組み込みのフィルタリングオプション（横並び、ポップオーバー、サイドパネル）を設定します。

• 検索: コンテナが管理するデータをユーザーが検索できるように検索バーを有効にします。

• サイドパネル: サイドパネルを設定します。

スタイリング

これらの設定はコンテナ自体の表示を制御し、内部のカスタム LWC の見た目は開発者が担当します。

• マージン：コンテナの外側の余白。

• パディング：コンテナ内、LWC が配置される周囲の内側の余白。

• ボーダー：コンテナの境界線のスタイル。

• サイズ：コンテナの寸法を制御します。

• ヘッダースタイル：コンテナのヘッダー要素（タイトル、キャプション、アイコン）の表示をカスタマイズします。

• ページネーションボタン：ページネーションボタンをカスタマイズします。

表示設定

• 表示： （ブール）Data LWC コンテナ全体の表示・非表示を制御します。

使用例

例えば、貴社がプロジェクトタスクを標準のテーブルやリストではなく、特定の進捗指標を備えたカスタムのインタラクティブカードとして可視化したい場合を想像してください。

1. 開発者が LWC を作成: 開発者が c__projectTaskCardDisplay というカスタム LWC を構築します。この LWC はタスクレコードのリストを受け取り、それらを特別なカードとして表示するよう設計されています。開発者は LWC が taskData という属性にレコードを、taskIds という属性にレコード ID を期待していると教えてくれます。

2. 管理者が Data LWC コンテナを設定:

• 動的コンポーネントに Data LWC コンテナを追加します。

• データソースを Project_Task__c レコードを取得するクエリに設定します。

• LWC 名を設定します c/projectTaskCardDisplay.

• レコード属性を taskData に設定します。

• レコード ID 属性を taskIds に設定します。

• Data LWC コンテナ内でフィルター機能を有効化および設定し、ユーザーがステータスでタスクをフィルタできるようにします。

• ページネーションを有効化および設定します。

結果: ユーザーは開発者が作成したカスタムタスクカードを見ることができますが、カード内に表示されるデータはコンテナが提供する馴染みのある Avonni のフィルタとページネーションコントロールで管理できます。

重要な考慮事項

重要な注意点

• カスタム LWC が必要: このコンポーネントは別途開発者によって構築されたカスタム Lightning Web Component を必要とします。開発者は、設定する属性名を介してデータ（特に records と recordIds のリスト）を受け取るように LWC を設計する必要があります。

• スクロール: コンテナ内に配置する LWC の内部でカスタムスクロール処理を実装しないでください。Data LWC コンテナは内部で無限スクロール／読み込みを管理します。LWC 内のカスタムスクロールはこれと干渉します。

• isBuilder と isPreview 属性: Avonni が自動的に LWC に渡すこれらの属性は、コンポーネントビルダーやプレビュー モード内で表示される際にプレースホルダーを表示したりデータの読み込みを抑制したりして、デザイン時のパフォーマンスを最適化するために LWC 開発者が使用できます。

まとめ

Data LWC コンテナは、Avonni のノーコードによるデータクエリ、フィルタ、検索、ページネーション機能を、開発者が構築したカスタム Lightning Web Component の独自の視覚表現機能と組み合わせるブリッジコンポーネントです。