Blockから画面にパラメータを渡す方法

記載内容について

OutsystemsのBlockからOutputParameterのように、Blockを呼び出した画面にParameterを渡す方法について実装例を使って記載いたします。
公式ドキュメントによる解説はこちらから

今回はBlockのInputで渡した値を呼び出し元の画面に表示するシンプルなアプリを作成しながら説明をしていきます。完成品は下記キャプチャのようなものを想定しています。

では早速Block側から実装していきます。

Input用のBlockを作成し、画面に入力用の「Input」及び「Button」Widgetを配置します。

次に「Input」に入力された値を格納する変数を作成、さらに「Button」のOnclick用アクション（現時点では処理自体は空っぽでOK）を作成してWidgetの赤いエラーを消していきます。

次に今回の肝となる「Button」が押下された際にparameterを渡すためのEventを作成していきます。
作成したBlock上で右クリックをし、「AddEvent」を選択してEventを作成します。

さらに作成したEvent上で右クリックをし、InputParameterを作成します。

ここまででEventの作成は完了です。
次に今作成したEventを「Button」のOnClick Actionに配置します。InputParameterにはBlockで入力された値を格納している変数を設定します。

ここまできたらBlock側の作業は終了です。

ここまできたらもう一息です！
MainFlow上で右クリックして「AddScreen」を押下して画面を作成し作成した画面上で右クリックして「Add Local Variable」を押下しBlockから受け取った値を格納する変数を作成します。

次に作成した画面上に先ほど作成したBlockをドラッグ&ドロップで配置します。
すると下記画像のようにBlock側でEventがトリガーされた際に呼び出すアクションがないためエラーが出ているはずです。これを解消していきます。

画面上に新たにClientActionを作成してInputParameterを追加します。
作成したAction内に「Assign」を配置してBlockから受け取った値を格納する変数にClientActionのInput Parameterをアサインします。

ここまでくると先述のエラーが一つだけ残っているはずなので発生元に移動してBlock側でEventがトリガーされた際に呼び出すアクションに今作成したClientActionを設定し、そのアクションのInput ParameterにEventのparameterを設定します。

最後にparameterを受け取れるか確認するために画面上にExpressionを配置してpublishして完了です。実際に渡せているか確認してみてください。

今回はBlockから画面にparameterを返す処理を記載してみました。やっていることはOutputParameterなのに使用するのはInput Parameterなので訳が分からず困りまくったので記事にしてみました。この記事で私のような迷える子羊が一匹でも減ることを祈るばかりです。