スマートフォンは画面が狭いために、特定の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に移動する）があるので、要求に合う方を使う。