Display on Device

You can use the Display on Device UI pattern to select what elements are displayed on which device types. With this pattern you can improve the way information is displayed on different devices - computers, tablets, and phones - by specifically specifying which elements display on each of them.

How to use the Display on Device UI Pattern

1. In Service Studio, in the Toolbox, search for Display on Device.

   The Display on Device widget is displayed.

   

   If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

   a. Go to Module > Manage dependencies.

   b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

   c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

   d. Search for and select the element you want to add, and click Apply.

   e. In Service Studio, in the Toolbox, search for the widget again.

2. From the Toolbox, drag the Display on Device widget into the Main Content area of your application's screen.

   

3. Add the required content to the placeholders inside the Display on Device widget.

   In this example, we add images by dragging the Image widget into the Display on Device widget and selecting an image from the sample OutSystems UI images.

   

4. On the Properties tab, from the Behavior drop-down list, choose the device types you want to display this widget on. These images are displayed on the device types you specify, and not shown for any other devices.

   

After following these steps and publishing the module, you can test the pattern in your app.