{"id":3,"date":"2020-11-06T15:50:26","date_gmt":"2020-11-06T14:50:26","guid":{"rendered":"https:\/\/ad-astra.com.pl\/?p=1"},"modified":"2021-01-22T10:59:50","modified_gmt":"2021-01-22T09:59:50","slug":"responsywny_lumira_designer","status":"publish","type":"post","link":"https:\/\/ad-astra.com.pl\/en\/2020\/11\/06\/responsywny_lumira_designer\/","title":{"rendered":"Designing Responsive App Structure in Lumira Designer"},"content":{"rendered":"

As technology advances, mobile devices, tablets and smartphones are becoming an integral part of our lives. This dependence also extends to our professional lives and the way we conduct business. <\/p>\n\n\n\n

For this reason, every year customers increasingly prefer viewing data and reports on mobile devices. Truly, this shouldn\u2019t be a surprise to anybody - practically all of us do not part with our phones. This trend results in reports being accessible from anywhere, at any time, supporting business decisions in a better and faster manner. <\/p>\n\n\n\n

However, the usage of mobile devices is associated with certain limitations, such as a much smaller screen and resolution compared to the ordinary PC. These factors may also differ significantly depending on the smartphone model. This could make preparing an application that would display all the necessary data in a legible and intuitive manner a challenge. Fortunately, modern BI software offer many ways of dealing with this problem. In this article we will explain one of them. <\/p>\n\n\n\n


Our goal<\/strong> - creating a responsive structure for the application that changes depending on the orientation (vertical \/ horizontal) and resolution of the mobile device. To accomplish this, we will be using SAP Lumira Designer. As Lumira's built-in scripting language currently doesn\u2019t support detecting a change in screen resolution, we will also be using the built-in support for CSS scripts.<\/p>\n\n\n\n


Step 1<\/strong> - Create a new application based on an empty template.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2<\/strong> - Add two panels to the application and maximize them (Maximize Selected Component button). Panels are container-type objects into which we can place other elements. Place a chart in one of the panels, and a Crosstab in the other. Maximize them both so that they overlap each other (see \u2013 picture below).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3<\/strong> - Create a new new CSS file for the application<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 4<\/strong> - Add the CSS rules <\/p>\n\n\n\n

Using the @media rule, we can define dynamic CSS properties that become active only when the given conditions are met.<\/p>\n\n\n\n


We will start with a simple rule that checks if the device screen orientation is set to \u201clandscape\u201d. <\/p>\n\n\n\n

@media screen and (orientation:landscape)\n\t{\t\n\t\t   \t\n\t}\n<\/code><\/pre>\n\n\n\n

Between the braces we enter CSS properties that become active when the condition is met. In this example, let's try hiding one of the objects (as a reminder, we hide the Panel type object). <\/p>\n\n\n\n
@media screen and (orientation:landscape)\n\t{\t\n\t\t   \t#PANEL_1_panel1\t\t{ display: none;}\n\t}\n<\/code><\/pre>\n\n\n\n
Where: \n\"PANEL_1\" is the name of our panel in Lumira Designer. <\/p>\n\n\n\n
\"PANEL_1_panel1\" is the Panel\u2019s ID as read by CSS <\/p>\n\n\n\n
{ display: none; } - CSS rule that hides the specified element. <\/p>\n\n\n\n

We will now add a second @media rule which will hide the second panel, this time  in portrait orientation. <\/p>\n\n\n\n
@media screen and (orientation:landscape)\n\t{\t\n\t\t   \t#PANEL_1_panel1\t\t{ display: none;}\n\t}\n@media screen and (orientation:portrait)\n\t{\t\n\t\t   \t#PANEL_2_panel1\t\t{ display: none;}\n\t}\n<\/code><\/pre>\n\n\n\n

Step 5<\/strong> - Save changes and run the application.\nIf we have performed all the steps correctly, only one panel should be visible on mobile devices or their simulation at a time.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
- Save changes and run the application.\nIf we have performed all the steps correctly, only one panel should be visible on mobile devices or their simulation at a time. <\/p>\n\n\n\n
For example, if the properties are to be active when the a) screen height is in the range of 375-413 pixels, and b) the screen height is smaller than its width (as in \u201cLandscape\u201d orientation) , we can use the following rule: <\/p>\n\n\n\n
@media screen and (min-height: 375px) and (max-height: 413px) and (orientation:landscape)\n\t{  \t\n\t   \t#PANEL_1_panel1\t\t{ display: none;}\n   \t}\n<\/code><\/pre>\n\n\n\n
The internet is filled with templates for specific phone models. On this note, I hope you found the article useful. Thanks for reading!<\/p>","protected":false},"excerpt":{"rendered":"
As technology advances, mobile devices, tablets and smartphones are becoming an integral part of our lives. This dependence also extends to our professional lives and the way we conduct business.\nFor this reason, every year customers increasingly prefer viewing data and reports ...<\/p>","protected":false},"author":2,"featured_media":209,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[54,55,56,18,52,53,19],"_links":{"self":[{"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/posts\/3"}],"collection":[{"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":11,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/posts\/3\/revisions\/287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/media\/209"}],"wp:attachment":[{"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ad-astra.com.pl\/en\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}