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?


Greetings,

Niels

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. https://www.outsystems.com/forge/component/1429/Screen+Orientation+Plugin/


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.
Greetings,
Niels

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!