Skip to Content
Author's profile photo Karol Kalisz

Responsive Layout with Flow Layouter SDK

Instruction on how to create an application with responsive layout using two new SDK Community components:

* Client Information, Design Studio SDK: Client Information Component

* Flow Layouter, Design Studio SDK: Flow Layouter Component (for responsive layouting)

What you get? (Animated GIF, click to animate)


How does this work?

You have to create following structure.


include some PANEL as main component, and

STEP 2. (optional)

you can place some “background panel” to make the UI layouting behind. This can be places via API on the flow layouter and will be resized, so it must have a fixed size.


now you have to place 2 SDK components,

  • one is the Client Information – this is reacting on size changes in the browser (see Design Studio SDK: Client Information Component) and
  • the second is Flow Layouter – it is not a flow layout container (as this is not possible with SDK API) but a layouter which can relayout other components.


and place other PANELS / COMPONENTS into it. All have to be defined with fixed size, the placement does not matter as it will be replaced.

The structure should look like this one:


Important, it works only if all the content components have size!, you cannot make them “auto”-sized, you need to put width and height.


You need to register the components to make them available for the flow layouter, eg in the onStartup script:

// this is optionally registering some background which can be styled via CSS and gets resized


// now all the components in a sequence to make them flow-laouting




























Go to “Client Information” component and code the script in “onSizeChanged” event. Basically, we have to pass some size to the layouter and reLayout() the content.




This will change the layout every time the size of the browser is changed (and also initially place the components according to the flow layout rules.

Living Example?

you can download the example app from the github repository:

Release Client Information & Flow Layouter · org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual…

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Karol,

      This is brilliant!  A very innovative and clever way to simulate a container component without any code hacks.  It's a great example of how to take advantage of the standard BIAL API from within the SDK via ZTL functions.

      You have pointed out that the SDK currently does not support the development of true container components.  Do you know if there are plans to provide this feature in the SDK in future?



      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author


      it is not yet in standard API, I would wish this myself as well - anyway - through SDK ZTL contribution this can be partly achieved.

      Design Studio SDK: Component Manager (for dynamic component access)

      what do you think?

      perhaps in next release there will be some API for the same and also with better component type recognition.

      Author's profile photo Michael Howles
      Michael Howles

      Hey Karol,

      Both Mustafa Bensan and I have had many offline chats about a want for a true responsive layout component and also a Split Layout component.  I agree with Mustafa that what you've managed to stitch together here with your SDK components is really impressive.  It's funny, because I was about to also try something similar to your Client Information component to calculate window width/height to do similar responsive calculations but you've done a much more complete and thoughtful job here.  I would definitely use this.

      But I would really think that if we could get a 'Native' container version with 1.5(+) then we wouldn't have to do the BIAL stitching together which while very clever, probably is an advanced development paradigm that a fresh Design Studio designer may not understand.

      Or, perhaps a new SDK 'container' handler one day!  (Worth as shot to ask 🙂 )

      Again, this is a great approach for current-state!

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hey Mike,

      yes, some more containers would be nice, perhaps it will happen together with extension to sap.m library (which should come some day, but we have to be careful in terms of non-breaking updates).

      Anyway, what Reiner has achieved as architect of the SDK solution is already impressive - especially when I compare this to the BEx ABAP Exit Item which was purely self written HTML code.

      The question / issue with containers as SDK is more complex as it would require also more code for the designer, which is today not necessary for the components. I would prefer if some basic containers would be available in standard and then the SDK can stay on component level.

      But, there is always a discrepancy between wishes and reality. I try to do the max based on the reality as I know this helps quicker 😉

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Karol,

      You've mentioned that Design Studio might be extended to the sap.m library in future.  Do you have any idea about what form this "extension" might take?  Is the intention to deliver the sap.m controls as standard Design Studio components, or to allow easier access to the sap.m library via the SDK, or both perhaps?



      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Thanks Karol!

      You certainly don't waste any time in responding to requests 🙂   The Component Manager is a great contribution.  Once again, not only very useful but also insightful for learning SDK techniques.



      Author's profile photo Former Member
      Former Member

      Adaptive Layout Container helps you achieve responsive layout

      where is Adaptive Layout Container ,can you help me

      1. on application

      2.execute locally


      Author's profile photo Former Member
      Former Member

      soory   I do not know how to use it

      can  you help me , I am a newer,  Thank you

      Author's profile photo Henry Taylor
      Henry Taylor

      Is this the proper place to ask some questions about this component?