代入

概要

Assignment（代入）インタラクションは「この変数を取り、この特定の方法で値を変更する」という命令だと考えてください。Text Input や Toggle のような多くの入力コンポーネントはデータバインディングを通じて自動的に変数を更新できますが、Assignment インタラクションはアクションの直接の結果として変数の値を変更する必要がある場合に使用します。

主な目的

状態管理： コンポーネントの状態を制御する変数を設定します（例：ボタンがクリックされたときに isPanelVisible を true ）。
データ操作： 変数に格納されたデータを変更します（例：数値をインクリメントする、文字列にテキストを追加する、文字列の一部を置換する）。
値のリセット： ユーザー入力を簡単にクリアしたり、コンポーネントを初期状態にリセットしたりできます。

Assignment インタラクションを使用するタイミング

表示の切り替え（トグル）： 「詳細を表示/非表示」ボタンでは、Assignment を使って Boolean 変数を true および false.
動的テキストの構築： さまざまなユーザー操作に応じて、変数内で文字列を連結（追加）します。
データのクリーンアップ： 既存のレコードデータを取得するには、 置換 演算子を使って、変数に格納されたデータを別の場所で使用する前にフォーマットまたはクリーンアップします。

設定

Assignment インタラクションは、他のコンポーネントのイベント（例：On Click、On Change）内の操作として追加します。

トリガーとなるコンポーネントを選択： 変数の変更を開始するコンポーネント（例：ボタン）を選択します。
インタラクションにアクセス： プロパティパネルで、 Interactions セクションに移動します。
イベントを選択： 代入をトリガーするイベントを選択します（例： On Click).
アクションを追加： 「アクションを追加」をクリックします。
アクションタイプを設定： 選択： Assignment （または「Set Variable Value」のような類似名）。
Assignment のプロパティを設定：
- 変数： （Resource - 必須) 対象の 変更したいターゲットの Variable リソースを選択します（例： ）。 {!myCounterVariable}, {!isDetailsVisible}）。この変数はすでに Resources パネルに存在している必要があります。
- 演算子： （選択）選択する どのように 変数を変更したいか：
  - equal: は現在の変数の値を新しい値で置き換します。これは最も一般的な演算子です。 （削除：元文が t39 として長文分割されているため、前後の文として独立に翻訳されています）
  - add: は既存の値に を追加します。動作はデータ型によって異なります：
    「 数値では、数学的な加算を行います（例： 2 add 1 になる）。 3).
    「 AccountId equals {!inputAccountId}テキストでは、テキストを連結（追加）します（例： "Hello" add " World" になる）。 "Hello World").
    「 コレクションでは、リストに新しいアイテムを追加します。
  - 最初の出現を置換：指定した文字列の最初の インスタンスを見つけて置き換えます。 （削除：t55 は文の一部として独立翻訳）
  - すべての出現を置換：指定した文字列の すべての すべてのインスタンスを見つけて置き換えます。
  - 正規表現で置換：正規表現を使用した高度なテキスト操作のためのものです。
- 値：（Resource または Static）演算子で使用する値を提供します。例えば演算子が equalであれば、これは新しい値です。演算子が addであれば、これは追加される値です。これは静的な値（例： 1, true, "Active"）であるか、別のリソースからの動的値（例： {!anotherVariable}, @MyInput.value).

例

動的な「返信表示/非表示」コンテナの作成

ここでは、あなたが述べた具体的なユースケースを構築します：「Reply」ボタンが返信フォームを含むコンテナを表示し、そのパネル内の「閉じる」アイコンで再び非表示にする例です。これはコンポーネントの状態管理方法を示します。

状態用の Boolean 変数を作成する

にします。 Resources、新しい Boolean 変数を作成します.
API 名： isReplying
初期値： に設定： false.

パネルを作成して可視性をバインドする

コンポーネントをキャンバスにドラッグします。これが返信パネルになります。 コンテナ コンテナの内部に、返信メッセージ用の
のような他のコンポーネントを配置します。 テキストエリア 返信メッセージ用。

「Reply」ボタンを作成する

Avonni の Button コンポーネント Kanban ボードの境界の外側のスペースを調整し、ページ上の他のコンポーネントと分離します。 コンテナ。
ラベル： "Reply"
On Click インタラクション：
1. アクションを追加します。 Assignment 設定：
2. {!isReplying}
  - 変数： 「Trash」アイコンを作成する
  - 演算子： equal
  - 値： false

の内部に

返信、に コンテナutility:close アイコン コンポーネントのリソースからの値にすることができます。
アイコン名： utility:delete （または （ゴミ箱アイコンを好む場合）。クリック可能にします。 コンテナコンポーネントを選択します
On Click インタラクション：
1. アクションを追加します。 Assignment 設定：
2. {!isReplying}
  - 変数： 「Trash」アイコンを作成する
  - 演算子： equal
  - 値： true

「コンポーネントの表示設定（Set Component Visibility）」の設定で、Reply ボタンがクリックされ、かつ

変数が isReplying に設定されていない場合にのみコンテナを表示する条件を追加します。 true.

結果

ページが読み込まれたとき、 isReplying は falseなので、コンテナは非表示です。Reply ボタンをクリックすると変数が trueに設定され、コンテナとその内容が表示されます。パネル内の「閉じる」アイコンをクリックすると変数が再び falseに設定され、再び非表示になります。この一連の状態変更は、2つのシンプルな Assignment インタラクションで宣言的に管理されます

「いいね」カウンターのインクリメント

この例では「Like」ボタンを使って、Text コンポーネントに表示されるカウンターをインクリメントし、数値操作を示します。

Number 変数を作成する

Resources に likeCount という名前の Number 変数を初期値 0 で追加します

表示用テキストを追加

Text コンポーネントをドラッグし、その Value を {!likeCount} にバインドして現在のカウントを表示します

「Like」ボタンを追加

「Like」とラベル付けされたボタンを追加します。

On Click：Assignment アクションを追加します。
変数：{!likeCount}
演算子：add
値：1

（オプション）リセットボタンを追加

「Reset Likes」とラベル付けされた別のボタンを追加します。

On Click：Assignment アクションを追加します。
変数：{!likeCount}
演算子：equal
値：0

結果： 各「Like」クリックはカウントをインクリメントします（例：0 → 1 → 2）。Text は即座に更新されます。リセットは 0 に戻します。

主な注意点

データ型は重要です： この add 演算子は数値とテキストで異なる動作をします。実行したい操作に変数のデータ型が一致していることを確認してください。
変数は存在していなければならない： Assignment アクションで使用する前に、変数リソースを作成する必要があります。前にそうすれば Assignment アクションでそれを使用できます。
アクションの連鎖： Assignment はしばしば一連のインタラクションの一段階です。例えば、最初に変数に値を 割り当て 追加し、その新しい値を入力として フローを実行 することがあります。

まとめ

Assignment インタラクションは、変数に格納されたデータを制御・操作するための基本的なツールです。コンポーネントの状態管理、カウンター作成、フォームのリセット、ユーザー操作に応じた動的ロジック構築などをすべて宣言的に行うための鍵となります。

最終更新 2 か月前

役に立ちましたか？