A journey into the evolution of SplitApp Part 1: An Introduction to Flexible Column Layout + Dynamic Page Layout
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.
Why should I learn about Flexible Column Layout?
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:
- An introduction to Flexible Column Layout and Dynamic Page Layout(this article)
- How to migrate your current application to leverage the Flixble Column Layout features
- How to fully migrate your application replacing Page and ObjectHeader to Dynamic Page Layout (this layout will replace the dynamic page layout replaces the full-screen layout)
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:
- What do you need to start learning SAPUI5?
- SAPUI5 for dummies: A complete step-by-step exercise
- SAPUI5 for dummies part 1: A complete step-by-step exercise
- SAPUI5 for dummies part 2: A complete step-by-step exercise
- SAPUI5 for dummies part 3: A complete step-by-step exercise
- SAPUI5 for dummies part 4: A complete step-by-step exercise
- SAPUI5 for dummies part 5: A complete step-by-step exercise
- SAPUI5 for dummies part 6: A complete step-by-step exercise
Flexible Column Layout
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.
Documentation and useful links
- Fiori Design Guidelines: Flexible Column Layout (Layout + SAP Fiori Elements)
- API Reference: Flexible Column Layout
- API Reference: Flexible Column Layout Semantic Helper
- Samples
Dynamic Page Layout
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:
- The header title combined with the subtitle/summary, key information, and global actions (always visible)
- The header content (expandable/collapsible area) (optional)
- The header features to actively collapse/expand and pin/unpin the header
- The content of the page, with a footer toolbar and finalizing actions (optional)
Documentation and useful links
- SAP Fiori Design Guidelines: Dynamic Page (Layout + SAP Fiori Elements)
- Dynamic Page — Freestyle and analytical table sample (SAPUI5 samples)
- Dynamic Page — List Report Sample (SAPUI5 samples)
- Dynamic Page (SAPUI5 API reference)
What’s next and a little bonus
So as I said, after this first basic introduction in the next blog post we will cover:
- How to migrate your current application to leverage the Flixble Column Layout features
- How to fully migrate your application replacing Page and ObjectHeader to Dynamic Page Layout (this layout will replace the dynamic page layout replaces the full-screen layout)
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!
Feedback needed
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!
