0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[OutSystems]ポップアップする共通部品を作る

Posted at

共通部品として、ポップアップさせて使う入力画面や選択画面を作る方法を考えてみます。

Traditional Webでは、UIフレームワーク中にModal(画面内に配置する)とPopup(別の画面として作成する)の2種類がありました。
Reactive Web Appの標準部品にあるPopupは同じ画面内に配置するPopupしかありません。

Reactive Web AppでPopupを使って共通部品を作る方法を検討します。

確認環境

Personal Environment(Version 11.13.0 (Build 31107))
Service Studio (Version 11.11.15)

方法1:共通部品内にPopupを含めない

共通部品はBlockで作成する

独立のBlockとして共通部品を作成し、Public=Yesとする。
これで、他のモジュールからも参照可能。
image.png

共通部品で何らかの操作をした結果を配置先画面に伝えるには、BlockにEventを作成します。

  1. Blockを右クリック > Add Event
  2. (Eventに値を渡すとき)追加したEventを右クリック > Add Input Parameter
  3. 操作に紐づくScreen Action中に、Trigger Event要素を配置(EventプロパティにはAdd Eventしたものを選択)

image.png

これで、Blockを配置した画面で、部品での選択や検索等の操作を終えたというイベントを受け取れます。
(Blockで起こった変化を配置先画面で知るには、基本的にはEventを使うことになる)

配置先画面にPopupを配置

  1. 上で作成した共通部品Blockへの参照を利用側モジュールで追加
  2. 画面のLocal Variableとして、Boolean型の変数を用意(Popupの表示を制御する変数)
  3. 画面にPopupを配置(Service Studio左側のツールボックスからドラッグ&ドロップで)し、Show Popupプロパティに作成した変数を紐付け
  4. Popup内に作成しておいた共通部品を配置。配置した部品のEventに対するHandlerで、共通部品の処理結果を受け取って後処理。ここで制御用変数の値をFalseにしておく

image.png

方法2:共通部品にPopupを含める

方法1では、Popupを配置先画面の方で作っていましたが、こっちの方法では共通部品内にPopupも配置します。

Widget Treeはこんな感じ。Block直下にPopupを配置してあります。
image.png

Input ParameterにPopupを表示するためのBoolean型を持たせ、PopupのShow Popupプロパティに紐付けます。配置先の画面でこのパラメータにTrueを設定するとポップアップが表示される。選択後のイベントハンドラ(配置先画面の)で、パラメータに紐付けてある変数をFalseに戻しておく。
image.png

方法の選択方針

部品としては、方法2で良さそうですね。
同じUIをポップアップ以外でも使うときは方法1を選択する方針でしょうか。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?