#イベントフロー

#はじめに

フォームの変更時にカスタムアクションをトリガーしたい場合は、イベントフローを利用できます。フォームだけでなく、ページ、ブロック、ボタン、フィールドでもイベントフローを使ってカスタム操作を設定することが可能です。

#使い方

イベントフローの設定方法を理解するために、簡単な例を見ていきましょう。ここでは、2つのテーブルを連動させ、左側のテーブルの行をクリックすると、右側のテーブルのデータが自動的にフィルタリングされるように設定します。

設定手順は以下の通りです。

1. 左側のテーブルブロック右上にある「稲妻」アイコンをクリックして、イベントフロー設定画面を開きます。
2. 「イベントフローを追加（Add event flow）」をクリックし、「トリガーイベント（Trigger event）」で「行クリック（Row click）」を選択します。これは、テーブルの行がクリックされたときにイベントがトリガーされることを意味します。
3. 「トリガー条件（Trigger condition）」は、イベントフローをトリガーするための条件を設定するものです。条件が満たされた場合にのみイベントフローが実行されます。今回は設定不要なので、どの行がクリックされてもイベントフローがトリガーされます。
4. 「ステップを追加（Add step）」にマウスカーソルを合わせると、操作ステップを追加できます。ここでは「データ範囲を設定（Set data scope）」を選択し、右側のテーブルのデータ範囲を設定します。
5. 右側のテーブルのUIDをコピーし、「ターゲットブロックUID（Target block UID）」入力欄に貼り付けます。すると、その下に条件設定画面がすぐに表示され、ここで右側のテーブルのデータ範囲を設定できます。
6. 以下に示すように条件を設定しましょう。
7. データ範囲を設定した後、フィルタリングされた結果を表示するにはブロックを更新する必要があります。次に、右側のテーブルブロックを更新するように設定しましょう。「ターゲットブロックを更新（Refresh target blocks）」ステップを追加し、右側のテーブルのUIDを入力します。
8. 最後に、右下にある保存ボタンをクリックすると設定は完了です。

#イベントの詳細

#描画前（Before render）

ページ、ブロック、ボタン、またはフィールドで使用できる汎用イベントです。このイベントでは、初期化作業を行うことができます。例えば、異なる条件に基づいて異なるデータ範囲を設定する、といった使い方があります。

#行クリック（Row click）

テーブルブロック専用のイベントです。テーブルの行がクリックされたときにトリガーされます。トリガーされると、コンテキストに「クリックされた行のレコード（Clicked row record）」が追加され、条件やステップで変数として使用できます。

#フォーム値変更（Form values change）

フォームブロック専用のイベントです。フォームフィールドの値が変更されたときにトリガーされます。条件やステップでは、「現在のフォーム（Current form）」変数を通じてフォームの値を取得できます。

#クリック（Click）

ボタン専用のイベントです。ボタンがクリックされたときにトリガーされます。

#ステップの詳細

#カスタム変数（Custom variable）

コンテキスト内で使用するカスタム変数を定義します。

#スコープ

カスタム変数にはスコープがあります。例えば、ブロックのイベントフローで定義された変数は、そのブロック内でのみ使用できます。現在のページ内のすべてのブロックで利用したい場合は、ページのイベントフローで設定する必要があります。

#フォーム変数（Form variable）

特定のフォームブロックの値を変数として使用します。具体的な設定は以下の通りです。

• Variable title：変数タイトル
• Variable identifier：変数識別子
• Form UID：フォームUID

#その他の変数

今後、さらに多くの変数タイプが順次サポートされる予定です。ご期待ください。

#データ範囲を設定（Set data scope）

ターゲットブロックのデータ範囲を設定します。具体的な設定は以下の通りです。

• Target block UID：ターゲットブロックUID
• Condition：フィルタリング条件

#ターゲットブロックを更新（Refresh target blocks）

ターゲットブロックを更新します。複数のブロックを設定できます。具体的な設定は以下の通りです。

• Target block UID：ターゲットブロックUID

#URLへ移動（Navigate to URL）

指定したURLへ移動します。具体的な設定は以下の通りです。

• URL：ターゲットURL、変数使用可能
• Search parameters：URL内のクエリパラメータ
• Open in new window：チェックした場合、移動時に新しいブラウザページが開きます

#メッセージを表示（Show message）

操作フィードバックメッセージをグローバルに表示します。

#使用場面

• 成功、警告、エラーなどのフィードバック情報を提供できます。
• 画面上部中央に表示され、自動的に消えるため、ユーザーの操作を妨げない軽量な通知方法です。

#具体的な設定

• Message type：メッセージタイプ
• Message content：メッセージ内容
• Duration：表示時間（秒単位）

#通知を表示（Show notification）

通知アラートをグローバルに表示します。

#使用場面

システムの四隅に通知アラートを表示します。以下の状況でよく使用されます。

• 比較的複雑な通知内容の場合。
• ユーザーに次の行動を促すインタラクティブな通知の場合。
• システムからのプッシュ通知の場合。

#具体的な設定

• Notification type：通知タイプ
• Notification title：通知タイトル
• Notification description：通知説明
• Placement：表示位置（選択肢：左上、右上、左下、右下）

#JavaScriptを実行（Execute JavaScript）

JavaScriptコードを実行します。