Dynamic Component パネルを開く
概要
「動的コンポーネントパネルを開く「」の操作により、画面の端からスライドして表示される別のAvonni動的コンポーネントをサイドパネルに表示できます。画面全体を覆うモーダルとは異なり、パネルは既存のコンテンツに並んで表示されるため、表示中のコンテキストを失うことなく詳細、フォーム、追加情報を見せるのに最適です。
重要な概念
設定に入る前に、パネル操作のアーキテクチャと関係するコンポーネント間の関係を理解しておくことが重要です。
2つのコンポーネント
この操作を使用する場合、あなたは 2つの別々の動的コンポーネントを扱っています:
メインコンポーネント（発信コンポーネント）：
ユーザーが開始する場所です
トリガー（ボタン、テーブル行アクションなど）を含みます
パネルが開いているときもバックグラウンドで表示されたままです
パネルコンポーネント（起動コンポーネント）：
パネル内に表示されるものです
この目的のために特に作成する完全に別個の動的コンポーネントです
入力変数を通じて主要コンポーネントからデータを受け取ります
この操作を設定する前に、両方のコンポーネントを作成する必要があります。
設定
動的コンポーネント名
パネルに表示する動的コンポーネントを選択します。利用可能な動的コンポーネントのドロップダウンから、事前に作成して有効化したパネルコンポーネントを選んでください。
入力変数（パネルへのデータ渡し）
ここでメインコンポーネントのデータをパネルコンポーネントの入力変数に接続します。渡したいデータごとに「項目を追加」をクリックして新しいマッピングを作成します。
名前フィールド
ドロップダウンにはパネルコンポーネントで「入力可能にすることで、」とマークされた全ての変数が表示されます。inputAccountIdのように、値を設定したい変数を選択してください。
重要
変数が「入力可能にすることで、」とマークされていることを確認してください。パネルとして開きたいコンポーネントでドロップダウンに変数が表示されない場合は、パネルコンポーネントに戻り、その変数の「入力可能にすることで、」チェックボックスがオンになっていることを確認してください。
値フィールド
コンポーネントへの入力変数として渡したいレコードフィールドの値を入力します。
例（説明用）
レコード：名前- アカウント名フィールドを渡すレコード：メール- 取引先担当者のメールフィールドを渡すレコード：金額- 商談の金額フィールドを渡すレコード：ステータス- ケースのステータスフィールドを渡す
注意： 利用可能なフィールド値は、メインコンポーネントの設定方法とアクセスできるレコードデータに依存します。
ヘッダー
パネル上部に表示されるタイトルです。次の2つの方法で設定できます：
フィールド名セレクタをクリックしてコンポーネントから動的値を選択する
カスタム値を使って静的テキストを直接入力する
位置
パネルがスライドして入ってくる画面の側を選択します。左側から表示するにはLeftを、右側（最も一般的）から表示するにはRightを選択します。ほとんどのアプリケーションでは、詳細パネルやサイドナビゲーションの標準UI慣例に従い「Right」を使用します。
重ね合わせ（Superposed）
パネルがメインコンポーネントの上に重ねて表示されるかどうかを制御します。チェックすると、パネルはメインコンポーネントの上に表示され、背景を暗くしたり覆ったりします。チェックを外すと、オーバーレイなしでメインコンポーネントの横にパネルが表示されます。
重ね合わせを使用する場合：
ユーザーの注意を完全にパネルに向けたいとき
パネル形式のままモーダルに近い動作をさせたいとき
パネルが開いている間にメインコンテンツが不要なとき
外側（Outer）
パネルがコンポーネントの境界内に表示されるか外側に表示されるかを制御します。チェックすると、パネルはコンポーネントのコンテナの外側に表示され、より多くの画面スペースを使用する可能性があります。チェックを外すと、コンポーネントに割り当てられたスペース内にパネルが表示されます。
Outerを使用する場合：
コンポーネントの幅が限られており、より広いパネルスペースが必要なとき
パネルが画面端まで広がるフルページのコンポーネントレイアウトの場合
パネルをコンポーネントコンテナから分離して感じさせたいとき
サイズ
パネルの幅を選択してください：
小：狭いパネル。簡単なフォームや短い情報に適しています
中：バランスの取れた幅で、ほとんどのユースケースに適します
大：詳細ビューや複雑なフォームに適した広いパネル
特大： 非常に広いパネル。広範なコンテンツやデータテーブル向け
全幅：パネルが利用可能な全幅を占有します
ヒント：まずは中（Medium）から始めて調整してください 。Outerが有効な場合、より大きなパネルがより適しています
パディング
パネルのコンテンツ周りの内部スペースを制御します。Smallは最小限のパディングでコンテンツがパネル端に近くなりコンパクトな見た目になります。Mediumは快適な間隔のバランスが取れたパディングで、ほとんどの場合に推奨されます。Largeは十分な余白を持たせてコンテンツの周りにゆとりを与えます。
閉じるアイコンを非表示
パネルヘッダーに標準の閉じる（X）ボタンを表示するかどうかを制御します。チェックすると閉じるアイコンが非表示になり、ユーザーは他の方法でパネルを閉じる必要があります。チェックを外すと閉じるアイコンが表示されます（標準動作）。
閉じるアイコンを隠すとき：
ユーザーを特定のフローやプロセスに強制したいとき
パネル内のカスタムの閉じる／キャンセルボタンを提供しているとき
ユーザーにすべてのステップを完了させるようにするウィザード形式の体験の場合
警告：閉じるアイコンを非表示にする場合、ユーザーが別の分かりやすい方法（パネルコンポーネント内のキャンセルや閉じるボタンなど）でパネルを閉じられるようにしてください。そうしないとユーザーは閉じられなくて困る可能性があります。
閉じたときの動作
パネルが閉じられたとき（閉じるアイコン、カスタムボタン、その他の手段による）に何が起こるかを定義します。いくつかの種類のアクションを設定できます：
トースト通知を表示
パネルが閉じられたときに「変更が正常に保存されました」や「パネルが閉じられました」などのメッセージを表示します。タスクの完了を確認するのに便利です。
すべてのクエリを更新
メインコンポーネント内のすべてのデータソースを自動的に更新します。パネルでユーザーがデータを変更できる場合に、メインコンポーネントが最新情報を表示するようにこれを使用します。たとえば、ユーザーがパネルでアカウントを編集した場合、パネルが閉じるとアカウントテーブルが自動的に更新されます。
レコード取得（Get Records）
パネルが閉じられたときに特定のレコードを取得します。これは「すべてのクエリを更新」よりもターゲットを絞った動作で、更新すべきデータが正確に分かっている場合に有用です。
手順付きの例
アカウント詳細パネル
テーブル上のアカウントをクリックして、その完全な詳細をサイドパネルで表示する完全な例を作ってみましょう。
シナリオの概要
メインコンポーネント：データテーブルでアカウントの一覧を表示します
パネルコンポーネント：詳細なアカウント情報を表示します
インタラクション：任意の行の「表示詳細」ボタンをクリックして、そのアカウントのパネルを開きます
パネルコンポーネントを作成する
新しい動的コンポーネントを作成
名前：「アカウント詳細パネル」
説明：「詳細なアカウント情報を表示します」
入力変数を作成する
新しいリソースを作成し、次に変数を選択します
API名：inputAccountId
Data Type：テキスト
入力可能にすることで、：チェック済み（これを忘れないで！）
>> この変数はメインコンポーネントからアカウントIDを受け取ります
レコード変数を作成する
別の新しいリソースを作成し、次に変数を選択します
API名：accountRecord
データタイプ：レコード
オブジェクトタイプ：Account
>> この変数は取得したアカウントレコードを格納します
読み込み時のOn Loadインタラクションを追加してアカウントを取得する
次を追加します： 「On Load」インタラクション をパネルコンポーネントに追加します
アクション：レコード取得（Get Records）
レコード変数：先ほど作成したaccountRecordを選択
レコードID：inputAccountId（入力変数）にマッピング
>> これにより、パネル読み込み時にメインコンポーネントから渡されたIDを使ってアカウントレコードが取得されます
パネルのレイアウトを設計する
アカウントフィールド用に表示テキストコンポーネントを追加します：
アカウント名：accountRecord.Name
業種：accountRecord.Industry
年間収益：accountRecord.AnnualRevenue
電話：accountRecord.Phone
その他必要なコンポーネント（画像、関連リストなど）を追加します
保存して有効化
パネルコンポーネントを保存してください
有効化をクリック
メインコンポーネントを設定する
データテーブルを追加する
メインコンポーネントにAvonniデータテーブルを追加します
クエリデータソースを使ってアカウントレコードを表示するように設定します
行アクションを追加する
データテーブルの列設定で新しい列を追加します
列のタイプを次のいずれかに設定します：
アクション
ボタン
アイコンボタン
これにより各行にクリック可能な要素が作成され、ユーザーがそれをクリックしてパネルを開けるようになります
ラベル：「表示詳細」
適切なアイコンを選択します（任意、目のアイコンや情報アイコンなど）
インタラクションを設定する
「表示詳細」行アクションを選択します
タイプ：動的コンポーネントパネルを開く（Open Dynamic Component Panel）
パネル設定を構成 動的コンポーネントAPI名
選択：Account_Details_Panel
入力プロパティ：
「項目を追加」をクリック
名前：inputAccountId（ドロップダウンから）
値：レコード：Id
閉じたとき：
空のままにする（閲覧のみで編集しないため更新は不要）
メインコンポーネントを保存してください
トラブルシューティング
パネルは開くがデータが表示されない
入力変数がパネルコンポーネントで「入力可能にすることで、」とマークされていることを確認してください。
正しい値を渡しているか確認してください（デバッグのためにブラウザコンソールを使用）
パネルコンポーネントの「On Load」アクションが入力変数を使って正しくデータを取得していることを確認してください
入力変数がドロップダウンに表示されない
パネルコンポーネントに移動します
変数を見つけます
「入力に利用可能（Available for Input）」チェックボックスがオンになっていることを確認します
パネルコンポーネントを保存して再度有効化します
メインコンポーネントの設定ページをリフレッシュします
パネルに誤ったデータが表示される
入力プロパティの値を確認してください—正しいフィールド／変数を渡していますか？
データテーブルでは .firstSelectedRow を使用しているか確認してください
デバッグモードを使用して実際にどの値が渡されているかを検査してください
パネルが全く開かない
パネルコンポーネントが有効化されていることを確認します
ブラウザのコンソールでエラーがないか確認します
パネルコンポーネントのAPI名が正しいことを確認します
トリガーコンポーネントのインタラクションが正しく設定されていることを確認します
次のステップ
パネルのインタラクションを理解した今、次を検討してください：
共通タスクのために再利用可能なパネルコンポーネントを作成する
異なるオブジェクト用の詳細／編集パネルのライブラリを作成する
複雑なワークフローのために他のインタラクションとパネルを組み合わせる
階層ナビゲーションのためにパネル内にさらにパネルを使用する（高度）
さらにヘルプが必要ですか？
パネルのインタラクションの実装、入力変数の構成、またはパネルの動作のトラブルシューティングに関する質問がある場合、 遠慮なくお問い合わせください。私たちはAvonni動的コンポーネントを使った直感的なマルチコンポーネント体験の作成をサポートします。
最終更新
役に立ちましたか？