DisplayOnDevice, IsPhone(), IsTablet() and similar actions not working on first load

Hello,

We are using in our web app the "DisplayOnDevice" pattern and the "Is<Device>()" actions to show/hide elements according to the user's device. However, it seems like they are not working properly on the very first time the page is loaded.

For instance, we have a page that uses "DisplayOnDevice" to only show content on desktops, but that content is also rendered in phones on the first time that page is loaded. If I refresh the page, then everything starts working correctly.

I've created a simple eSpace reproducing this issue. You can access the application here. If you access it on your phone, you'll see the "This is a desktop" message. If you reload the page, you'll then see the "This is a phone" message, which is the correct one. If you clear your device's cache (cookies, cached files, etc) and reload the page, the problem happens again.

Is this a bug?

It seems to be a bug.

Would you raise a ticket on support page so Outsystems guys have a look at it?

Hi Aurelio,

Unfortunately I am unable to look into the OML right now.

Question: 

I presume the module is using a SilkUI/OutsystemsUI theme and the webscreen a SilkUI/OutsystemsUI layout?

This is needed for the DisplayOnDevice widget to work properly since it uses javascript from the layout.


Regards,

Nordin

Yes, the screen uses an OutsystemsUI layout and the theme is an OutsystemsUI theme. If this is indeed a bug, it's a pretty obvious one. How could it slip through?

I'll open a support ticket.

Hi Aurelio,


Even we are facing the same issue. We too have used OutSystems UI Web Themes in our applications. Do keep us posted if you get any answers from OutSystems Support.


Regards,

Rushabh

Hello,

Outsystems has confirmed that this is indeed a bug. They've shared a workaround, which basically consists of using a piece of javascript to detect the first time the screen is being accessed and, in that scenario, reload it. This is not really ideal, since it results in the screen being loaded twice and the user seeing the incorrectly rendered page for an instant before it reloads.

I'm sharing the .oml they've sent with this workaround.