Screen Orientation

Screen Orientation


Is it possible to get the screen orientation with SilkUI Web (WebPatterns); I found a Static-entity Orientation but don't know how to use it.

Why do you need screen orientation on a web application?



On a Tablet; we want to display a table only in landscape mode. There's to much information for portrait-mode.

The orientation entity is for "navigation bar" widget from silkUI. However I didn't discovered how to get the orientation of the device yet.
 I think it's a CSS class you can call but I'm not sure. I will update this post whenever i found it.

There is a css class ".landscape", but it's only available for mobile apps. There is also a plugin, but also only available for  mobile apps.

If I'm correct, you have a web application that's responsive on tablets? What you could do is create an extension to return the width of the screen. Based on the return value, you can play with the value to define your 'if' statement.

Or you can use javascript:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode

Hope it helps.

Hello Mathias, 

If I'm not mistaken, no, there is nothing in Silk that allows you to work with orientation change. 

I am not sure why you'd want this, but Outsystems already tells you if you are on 'portrait' or in 'landscape' with a class on the body element (this if you are using a mobile app). 

Regardless, you can use javascript to help you detect if it's portrait or landscape when the orientation changes:

window.addEventListener("orientationchange", function() {
    console.log(screen.orientation.type); // you can from this use ifs to determine what to do depending on if it's portrait or landscape

Hope this helps!

Hey guys,

I need some help here.

On Outsystems Mobile I have a local variable called IsScrollVisible. This local variable is set in the OnReady Action.

In that action I have a JavaScript block with the javascript orientationchange event just like Rita mentioned above to set the value to an output parameter that is updated when the orientation of the device is changed.

However I need to update the IsScrollVisible local variable with the value of the output parameter when the orientationchange event is triggered.

How may I achieve this?

Thanks in advance.