Display on Device

Display on Device UIパターンを使用すると、どのデバイスタイプにどの要素を表示するかを選択することができます。このパターンを使用して、様々なデバイス（コンピュータ、タブレット、スマホ）に表示される要素を具体的に指定することで、情報の表示方法を改善できます。

Display on Device UIパターンの使用方法

1.Service StudioのツールボックスでDisplay on Deviceを検索します。

Display on Deviceウィジェットが表示されます。

![](<images/displayondevice-2-ss.png>)

1.ツールボックスから、Display on Deviceウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/displayondevice-3-ss.png>)

1.必要なコンテンツをDisplay on Deviceウィジェット内のプレースホルダに追加します。

この例では、ImageウィジェットをDisplay on Deviceウィジェットにドラッグし、OutSystems UIのサンプル画像から画像を選択して追加しています。

![](<images/displayondevice-4-ss.png>)

1.［Properties］タブの［Behavior］ドロップダウンリストで、このウィジェットを表示するデバイスタイプを選択します。これらの画像は、指定したデバイスタイプでは表示されますが、その他のデバイスでは表示されません。

![](<images/displayondevice-5-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。