Skip to main content






Applies only to Traditional Web Apps



Display on Device

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

    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.


    Property Description
    Behavior (DeviceResponsive Identifier): Mandatory Select the device types upon which the content is displayed. The following are the predefined options available:

    • DesktopOnly
    • DesktopAndTablet
    • TabletOnly
    • TabletAndPhone
    • PhoneOnly
    • AllDevices


    • Entities.DeviceResponsive.DesktopOnly - Content is displayed on Desktop browsers only
    • Entities.DeviceResponsive.TabletAndPhone - Content is displayed on Tablet and Phone browsers only
    • Was this article helpful?