代入アクションを使って返信パネルを切り替える方法

概要

動的な作成方法を学ぶ 返信コンテナーの表示/非表示 を使用して 代入（Assignment）インタラクション Avonni Dynamic Components アプリで。この例では、コンポーネントの状態を宣言的に管理する方法を示します。

目的

次のような UI を構築します:

• をクリックすると 返信 ボタンで入力フィールド付きのパネルを表示します。

• をクリックすると 閉じる パネル内のアイコンで、再び非表示にします。

• パネルの表示/非表示は次を使って管理します: ブール変数 および 2 つの 代入（Assignment）インタラクション.

手順

1. 状態管理用のブール変数を作成

計算された数式 リソースパネル:

• 変数タイプ: Boolean

• 実際の: isReplying

• 初期値: false

この変数は返信パネルを表示するかどうかを制御します。

2. 返信コンテナーを追加

• をドラッグし、 コンテナーコンポーネント をキャンバス上に配置します。

• コンテナー内に、次のようなコンポーネントを追加します: テキストエリア 返信文を作成します。

このコンテナーは、次の値に基づいて表示/非表示になります: isReplying.

3. 「返信」ボタンを追加

• 配置: Avonni ボタン コンポーネント をコンテナーの外側に。

• 次のように設定します: 返信

インタラクション設定（クリック時）:

• アクションタイプ: 代入（Assignment）

• 変数: {!isReplying}

• 演算子: 等しい

• Value: を実行します—追加の設定は不要です。

ボタンをクリックすると、次が設定されます: isReplying 最小（Min） を実行します—追加の設定は不要です。、これにより返信パネルが表示されます。

4. コンテナー内に「閉じる」アイコンを追加

• ドラッグ: アイコンコンポーネント を返信コンテナーに。

• アイコン: utility:close や utility:delete

インタラクション設定（クリック時）:

• アクションタイプ: 代入（Assignment）

• 変数: {!isReplying}

• 演算子: 等しい

• Value: false

アイコンをクリックすると変数がリセットされ、コンテナーは再び非表示になります。

5. コンテナーの表示ルールを設定

• 先ほど追加した コンテナーコンポーネント.

• を開きます になります。次の場合: あなたの LWC が 設定。

• 条件を追加: 表示条件 isReplying が 等しい を実行します—追加の設定は不要です。.

結果

• ページ読み込み時は、 isReplying が falseなので、返信コンテナーは非表示です。

• をクリックすると 返信 ボタンにより isReplying 最小（Min） を実行します—追加の設定は不要です。が設定され、コンテナーが表示されます。

• をクリックすると 閉じる アイコンで再び falseに戻し、再度非表示にします。

これらすべてのロジックは 宣言的に 2 つの代入（Assignment）インタラクションだけで実現—カスタムコードは不要