Good morning and happy new year to everyone!

One of my new-year-resolution of my long list was to create more content about the SAP ecosystem I’m working on and explore new and interesting topic to expand my knowledge.
Since SAPUI5 1.48 Split-Screen Layout / Master List has been deprecated in favor of Flexible Column Layout.
This means that we have to learn which is the new best practice for this kind of scenario because as developers we should always be informed on the bleeding-edge technologies and approaches of the frameworks/tech we use every day at work.
In order to learn how to use Flexible Column Layout and everything that’s involved into it, I will create three different blog post:
The second and third blog post will have real use-case example with working code and we will use as our base project (as an example of your legacy app) the CRUD SAPUI5 application we have created in the latest couple of months.
If you’ve missed those articles here’s a useful recap:
As I mentioned earlier Flexible Column Layout is the evolution of the current SplitApp pattern and you should use it for every Split-Screen Layout / Master List scenario.
The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns. Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full-screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.
The flexible column layout is already incorporated within SAP Fiori elements.
The Dynamic Page Layout is the perfect companion to fill our Flexible Column Layout. It’s our no-brain choice if we need to develop a freestyle application.
The dynamic page is a generic layout control designed to support various floorplans and use cases. The content of both the header and the page can differ from floorplan to floorplan.
The header of the dynamic page is collapsible, which helps users to focus on the actual page content, but still ensures that important header information and actions are readily available.
The dynamic page also includes an optional footer toolbar for closing or finalizing actions that impact the whole page.

The dynamic page layout consists of the following areas:
So as I said, after this first basic introduction in the next blog post we will cover:
And here’s the little bonus. I’ve already recorded (sorry for the low-quality video) a full working demo of the final result of our journey. Enjoy it!
What do you think about this series? Do you want more focus on some specific SAPUI5 aspect?
Write it down on the comment section! Happy coding to everyone!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
| User | Count |
|---|---|
| 3143 | |
| 1916 | |
| 1916 | |
| 1213 | |
| 1079 | |
| 757 | |
| 755 | |
| 742 |