LoginSignup
1
3

More than 1 year has passed since last update.

メインフローからサブフローへ、サブフローからメインフローへ値の引き渡し

Last updated at Posted at 2023-05-05

画面フローを使って値の受け渡しについて紹介します。個人的に面白い作りでした。
しかし、受け渡し値が余りにも多くなると、メインフローがすごく重たくなりますので、ご注意ください。
(経験談から話すと300くらいの変数を作ると、もう動きが遅くなります、その際、ブラウザの更新をお勧めします)

やりたいこと:
サブフロー1で入力した値をメインフロー経由で確認画面のサブフローaで出力する
※サブフロー1の後ろにサブフロー2,サブフロー3....など追加することができます。
用途は、フローを実行するユーザから情報を収集したり、そのユーザに情報を表示したりします。
最もイメージしやすいのは、どこかの会社のアカウントの新規作成時
入力画面1→入力画面2→入力画面3→入力した情報の確認画面

1.サブフロー1: 
⓵テキストコンポーネント配置
表示ラベル:お名前;Api名:fullName
image.png
⓶出力可能なテキスト型変数を作成
image.png
⓷入力する値のApi名を出力変数に割り当て
※ここは右から左へ代入するという意味です
image.png
⓸保存して、有効化する
image.png

2.サブフローa:
⓵入力可能なテキスト型変数を作成
image.png
⓶表示テキストコンポーネント配置
image.png
表示テキスト1:表示ラベル:お名前;Api名:QuestionLabel(適切)
表示テキスト2:表示ラベル:2.⓵で設定した変数値;Api名:fullName(適切)
⓸保存して、有効化する
image.png

3.メインフロー
値の受け渡し
⓵1と2で作ったサブフローを追加
image.png
⓶入力と出力可能なテキスト型変数を作成
image.png
⓷サブフローaの前で割り当て要素を配置し、サブフロー1の出力値を3.⓶で作った変数に割り当てします。
image.png
image.png
⓸サブフローaをダブルクリックし、
入力値を設定→含める メインフローの変数3.⓶を入力します。
image.png
⑤保存して、有効にします。
image.png

上記のメインフローを実行してみます。
⓵任意の名前を入力し、「次へ」をクリックします。
image.png
⓶二つ目の画面に⓵で入力した値が表示されます。
image.png

以上は画面フローの一例になります。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3