Using Adaptive Layout in Lumira Designer, Part 1

The functionality of the Adaptive Layout Component in SAP’s Dashboarding Tool

In this blog series, we will go over the value of the Adaptive Layout Component and Composites in Lumira Designer. In this first blog, we will start out by explaining what the adaptive layout component is, why it’s valuable, and some examples of the functionality.

In part two we will dive into Composites and go over the basics, show why they can be extremely useful in saving time and effort, and also show an example that contains KPIs for Sales.

Lastly, in part three we will bring it all together by demonstrating how to connect your composite to data in an application, show how easy it is to reuse composites in an application, and help you to visualize how the adaptive layout component has optimal viewing capabilities for different size devices and can be used with your composites in an application.

Adaptive Layout Component

As the name indicates, the Adaptive Layout truly is adaptive to whatever size device you are needing to view your application with. If you are viewing on a large screen, it is adjusting for that. If you want to view the application on your mobile device, that is also an option with the flexible functionality of the Adaptive Layout Component.

An Adaptive Layout consists of blocks, which can hold components and works similarly to grids, except they can adapt on the fly to fit whatever size screen you are viewing the application. You can add as many blocks as you’d like to your Adaptive Layout and you can adjust the size of each block for each of the different viewports. A viewport represents the different size screens on which you could be viewing the application. The different size viewports are small, medium, large, and extra large. You can also adjust the vertical and horizontal spacing between each block.

Now that we have a basic understanding of the capabilities of the Adaptive Layout Component, we can dive right into some examples.

When you add the Adaptive Layout Component to your Layout there are some properties that are worth noting. You can see that you can adjust the vertical and horizontal spacing between each block. Your options are None, Small, Medium, and Large. You also have the option to adjust the minimum width of the Medium, Large, and Extra Large Viewports.

To add a block, you simply right click on the Adaptive Layout Component in your Layout and select Create => Block.

Once you add a block and click on it, you can see that there’s also some properties here as well. Under display, you can adjust the width of the block for each of the Small, Medium, Large, and Extra Large Viewports. You can also adjust the height of the block as well.

If you want to test adjusting the size of the block for each specific Viewport, you can do that by right-clicking the Adaptive Layout Component in the Layout, selecting Preview of Viewport and choosing whichever size you’d like to test. So, if for example you wanted to adjust the Small Colspan from 12 to 8 and you wanted to see how the block would look, you can Preview the Small Viewport and then change the Small Colspan to 8 and the block will adjust.

To give a quick example of how the blocks look using different viewpoints, I’ve created six empty blocks. This first screenshot shows the Small Viewport. You can see there’s just 1 block on top of each other for viewing on a small screen (In the application you would scroll down to see all 6 blocks).

In the Medium Viewport, you can see that it is now 2 blocks wide for a slightly bigger screen. As you can imagine, this will continue to grow as you choose the larger Viewports.

Wrapping it up

The Adaptive Layout Component is a very powerful tool, giving you the flexibility to view your application on a wide range of devices ranging from a large TV in a conference room to your mobile device.

The next blog in the series will cover the topic of Composites, which can save you valuable time in the development process. Stay tuned!

In the Medium Viewport, you can see that it is now 2 blocks wide for a slightly bigger screen. As you can imagine, this will continue to grow as you choose the larger Viewports.

See more Business Intelligence insights or get future articles sent right to your inbox

increase your knowledge
increase your knowledge

Read More about Lumira in these recent Blogs

If this blog didn’t quite answer your question or you have other Business Intelligence questions or concerns, please feel free to contact us.

By |2018-09-02T17:39:34+00:00August 7th, 2018|Kingfisher, Lumira, Lumira Designer, New features|0 Comments

About the Author:

Andrew has more than 7 years of experience and specializes in the EIM field, with a solid background in front end as well. He has strong experience with SAP HANA, Data Services, Information Design Tool, Lumira, Crystal Reports and Web Intelligence. He has worked in a number of industries such as Retail, Energy, Manufacturing, and Healthcare with direct experience working with two Fortune 100 companies. Andrew enjoys playing and watching sports, being outdoors, and traveling in his free time. When he’s not busy pulling for the Atlanta Sports teams you can reach him at Andrew.Johnson@kingfisherinc.com.