スマートフォンは画面が狭いために、特定のUIを非表示にしたいことがある。
標準部品でを実現する方法。
確認環境
Personal Environment(Version 11.13.0 (Build 31107))
Service Studio (Version 11.12.7)
対象はReactive/Mobile
実現したいこと
共通部品として、ユーザーに便利な情報（環境名とか、実行時間とか）を表示するBlockを提供しているとする。
スマートフォンでは画面が狭いので、この部品を非表示にしたいが、表示端末の種類（PC/タブレット/スマートフォン）ごとにモジュールを分けるのは避けたい。
PC/タブレット/スマートフォンそれぞれで別のUIを定義するBlock (DisplayOnDevice)
OutSystems UIにAdaptiveというUI Flowがあります。
この中にあるWidgetは、閲覧している端末の種類（PC/タブレット/スマートフォン）によって見え方を変えられる。
この仕組みは、OutSystemsのColumn系BlockのAdaptive Pattern対応に書いています。参照したドキュメントがSilk UI (バージョン10のUI Framework）なので、Reactiveと違う部分もあるでしょうが、大枠はここに書いた通りのはず。
Display on Deviceには、PC/タブレット/スマートフォンに対応するPlaceholderがあり、実行時に端末に対応するPlaceholderの中身だけが表示される仕組み。
- OnDesktop Placeholder: 閲覧端末がPCのときに表示されるUIを配置する
- OnTablet Placeholder: 閲覧端末がタブレット（iPadなど）のときに表示されるUIを配置する
- OnPhone Placeholder: 閲覧端末がスマートフォン（iPhoneなど）のときに表示されるUIを配置する
DisplayOnDeviceを利用した実装例
DisplayOnDevice適用前のUI
例として、実行日時を表示するBlockを考えてみる。
ExpressionのValueプロパティには整形した日時を編集。
FormatDateTime(CurrDateTime(), "yyyy/MM/dd HH:mm:ss")
この実装をApplicationTitle（標準で作成されるBlockでモジュール名等を表示するBlock）に配置して実行すると、当然ながら、PCでもスマートフォンでも同じものが表示される。
PCでの実行結果
スマートフォン（をChromeのdevice toolbarでシミュレート）の実行結果
DisplayOnDeviceを利用する実装に変更する（スマートフォンでは非表示に）
OutSystemsUIのAdaptive/DisplayOnDeviceの参照が必要。無ければ参照を追加しておく。
DisplayOnDeviceをドラッグ＆ドロップして、端末の種類に応じて表示を切り替えたい場所のルートに配置する。
ここでは、Containerの直下にした。
今回は、
- PC: 従前どおりの表示
- スマートフォン: 表示なし
にしたいので、元々あったExpressionをOnDesktopに移動すればよい。PC用であることのマーカーとして「(PC)」をExpressionのValueプロパティ末尾に付加。
スマートフォン用に表示するUIは、OnPhoneだが、今回は表示なしにするので、空のままでよい。
実行例
PCでの実行結果
スマートフォンでの実行結果
PCでは表示されるBlockが、スマートフォンでは、非表示になるのが確認できました。
Traditional Webの場合の補足
OutSystemsUIはReactive/Mobile用とTraditional Web用では別物。
Traditional Web用のモジュール名は「OutSystemsUI Web」。
別のモジュールであるために、利用できるBlockも異なっている。
Responsive UI Flow内に、DisplayOnDeviceとMoveOnDevice（Contentに配置したUIを、タブレットで表示されたときにはTabletWidgetIdで示すContainerに、スマートフォンならPhoneWidgetIdで示すContainerに移動する）があるので、要求に合う方を使う。
