Dynamic Component パネルを開く

この ダイナミックコンポーネントパネルを開く このインタラクションでは、起動して表示することができます 別の Avonni ダイナミックコンポーネントを サイドパネル または指定された領域 に沿って 現在のコンテンツと並列に、元のダイナミックコンポーネント内のインタラクションからトリガーして表示します。これは、モーダルダイアログのようにメインインターフェースを完全に覆うことなく、マスターディテールビューの作成、コンテキスト情報の提供、または編集機能の提供に最適です。

概要

このインタラクションはモジュール性と再利用性を促進します。特定のタスク（例：詳細の表示、関連レコードの編集）に集中したダイナミックコンポーネントを構築し、必要に応じてボタンのクリックや行の選択などでパネル内に表示するためにこのインタラクションを使用します。

主な利点

• コンテキスト表示： メインコンテンツの横に関連情報やアクションを表示します。

• モジュール性： オンデマンドで表示できる、小さく集中したコンポーネントを構築します。

• 再利用性： 同じ「パネル」コンポーネントを複数のコンテキストで使用します。

• 効率化されたインタラクション： 画面遷移や全面オーバーレイのモーダルを使用せずに、詳細ビューや編集機能を提供します。

設定

「ダイナミックコンポーネントパネルを開く」インタラクションを設定するには：

1. トリガーとなるコンポーネントを選択： パネルを開くコンポーネント（例：ボタン、データテーブルの行アクション）を選択します。

2. インタラクションにアクセス： プロパティパネルで、 Interactions セクションに移動します。

3. イベントを選択： パネルをトリガーするイベントを選択します（例： On Click).

4. アクションを追加： 「アクションを追加」をクリックします。

5. アクションタイプを設定： 選択： ダイナミックコンポーネントパネルを開く リストから選択します。

6. パネルのプロパティを構成：

   6.1 ダイナミックコンポーネントの起動

   • ダイナミックコンポーネントの API 名： パネル内に読み込む特定のダイナミックコンポーネントを選択します の パネル。

   6.2 起動されるコンポーネントへのデータ渡し（入力プロパティ）

   • 入力プロパティ / 名前： 起動されるパネルコンポーネント内のプロパティの API 名（具体的には Variable リソース） に対して 値を設定または渡したいもの。

     ❗ 重要な前提条件： ここで名前を選択できるようにするには、 まず 次の手順を、 パネルで起動する予定のダイナミックコンポーネント内で実行する必要があります:

     1. 新しい Variable リソース 受け取りたい各データ項目について（例：レコードIDを受け取るテキスト変数）を作成します。

     2. 「 各 Variable リソースについては、 「入力用に利用可能」 チェックボックスが オンになっていることを確認してください その構成で。ターゲットパネルコンポーネント内で「入力用に利用可能」とマークされた変数のみが、ここでの「入力プロパティ / 名前」ドロップダウンリストに表示されます。

   • 入力プロパティ / 値： パネルコンポーネントの選択された入力プロパティに渡したい値。 へ これは静的、動的（例： @MyDataTable.firstSelectedRow.Id）、または 現在の コンポーネントのリソースからの値にすることができます。

   • 入力プロパティ / 型： 渡すデータ型を選択します（Text、Number、Boolean、Date、Date/Time、Custom など）。

   • 複数値（コレクション）を許可： 値のリストを渡す場合は有効にします。

   6.3 パネルの外観の設定

   • パネルヘッダー： （テキスト）起動されたコンポーネントを表示するパネルのタイトルを入力します。タイトルは静的または動的にできます。

   • パネルサイズ： （選択）パネルの希望する幅またはサイズを選択します（例：Small、Medium、Large—具体的なオプションは異なる場合があります）。

   6.4 パネルの結果処理

   • 閉じたとき： （インタラクション）ユーザーがパネルを閉じたときに発生するインタラクション（例：トースト表示、データソースの更新）を定義します。

   便利なヒント：閉じたときに元のコンポーネントを更新する を有効にします 閉じたときにすべてのクエリを更新する オプション（または類似の設定）を、 元の ダイナミックコンポーネント（このパネルを起動したコンポーネント）内のデータソースが自動的に更新されるようにしたい場合は有効にします このパネルが閉じられた直後に 。

   • 目的： パネル内で行われたまたは開始されたデータ変更（例：レコードの作成や更新）が、元のコンポーネントの表示に即座に反映されることを保証します。 パネル内で （例：レコードの作成や更新）が、元のコンポーネントの表示に即座に反映されることを保証します。

   • 例： パネルが元のコンポーネントのリストに表示されている詳細を編集するために使われる場合、これを有効にするとパネルを閉じたときにリストが自動的に更新されます。

手順ガイド（概念）

1

「パネル」コンポーネントを作成

パネルに表示したいダイナミックコンポーネントを作成します の 必要に応じて、「入力用に利用可能」とマークされた変数を持たせ、有効化します。

2

インタラクションを構成

元のダイナミックコンポーネントのトリガー要素（例：ボタン）を選択します。目的のイベント（例：「クリック時」）に対して「ダイナミックコンポーネントパネルを開く」インタラクションを追加します。

3

パネルコンポーネントを選択

ステップ1で作成したコンポーネントの API 名を選択します

4

入力プロパティを構成

元のコンポーネントからパネルコンポーネントの「入力用に利用可能」変数へ値をマップします。

5

パネル設定を構成

パネルヘッダーとサイズを設定します

6

結果のインタラクションを定義

必要に応じて、特に更新オプションについて「閉じたとき」の動作を構成します。

例のシナリオ：製品詳細の表示

データテーブルに製品の一覧が表示されているとします。ユーザーが製品行の「詳細表示」アクションをクリックしたとき、一覧ビューを離れずにサイドパネルで詳細情報を表示したい場合。

1. 作成 ProductDetailPanel コンポーネント： ターゲットオブジェクトが Product2のダイナミックコンポーネントを作成します。テキストコンポーネント、画像コンポーネントなどをフィールドにバインドして追加します。 $Component.record このコンポーネントに inputProductId 変数（Text、入力用に利用可能）を必ず追加し、「読み込み時」→「レコード取得」アクションを使用して Product を取得し、表示コンポーネントがバインドするレコード変数に格納するようにします。 inputProductId そして表示コンポーネントがそれにバインドされるようにします。

2. メインコンポーネント（製品一覧のデータテーブルを含む）では：

   • 「詳細表示」とラベル付けした行アクション（例：ボタンアイコン）を追加します。

   • この行アクションの「クリック時」インタラクションを構成します。

   • アクションタイプ： ダイナミックコンポーネントパネルを開く.

   • ダイナミックコンポーネントの API 名： 選択： ProductDetailPanel.

   • 入力プロパティ：

     • 名前： inputProductId

     • 値： @YourProductTable.firstSelectedRow.Id （クリックされた製品の ID を渡します）。

   • パネルヘッダー： 次のような式を使用できます： "Details: " & @YourProductTable.firstSelectedRow.Name.

   • パネルサイズ： 中（Medium）.

   • 閉じたとき： パネル内で詳細を編集できる場合は、メインの製品テーブルを対象とした「データソースを更新」アクションを追加することも検討してください。

これで、「詳細表示」アクションをクリックすると、選択された製品の詳細がメインの製品一覧の横にスライドして表示されます。