Skip to main content






Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:

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.

      By default, the Display on Device widget contains OnDesktop, OnTablet, and OnPhone placeholders.

    3. Add the required content to each of the placeholders.

      In this example, we add images by dragging the Image widget into each of the placeholders, and on the Properties tab, from the Image dropdown, selecting an image from the sample OutSystems UI images.

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

    • Was this article helpful?