A journey into the evolution of SplitApp Part 3: An Introduction to Flexible Column Layout + Dynamic Page Layout

[ericci]

Introduction & Recap

Good morning everyone, in the previous blog post we have started to migrate our “old” application from a deprecated SplitApp layout to the new and shiny Flexible Column Layout. As you can remember the process was really easy and smooth with just a couple of file to modify in order to reach our final result.

In this blog post, I will explain to you how to fully migrate our application replacing the deprecated (since release 1.48) Page Layout with the new Dynamic Page Layout.

In general, we will replace everything we have in our Page with something similar from the DynamicPage.

• Page title will be replaced with the aggregation DynamicPageTitle


• SearchField from the sub header’s toolbar will be placed inside a DynamicPageHeader


• The ObjectHeader is a little bit more complex and I will explain in detail in a section below

Step 1 — Update the BusinessPartnerList view

This step is easy, we just need to replace our Page’s title and create a DynamicPageHeader where we will place our SearchField. Everything else will be placed inside the content aggregation without changes.

Step 2 — Update the BusinessPartnerDetail view

So this page (like the BusinessPartnerSalesOrderDetail) is a little bit more complex because we need to replace more things.

The Dynamic Page Layout is a freestyle layout, it means that it’s perfect when you want to do things on your own without restriction and with a lot of flexibility. It also means that you have to build the layout by yourself without all the cool things that are already offered by default from an ObjectPageHeader.

For me, the DynamicPageLayout it’s perfect, I prefer to spend more time to build the UI/UX but to get the perfect result I had in my mind.

So what we need to do:

• Add to the DynamicPage a DynamicPageTitle


• Inside the DynamicPageTitle we will move all our navigation button (open/close full-screen and exit). Those buttons will be placed inside the navigationActions aggregation


• All the ObjectHeader information like the Intro and Title will be placed inside the heading Title and expandedContent/snappedContent of our sap.f.DynamicPagetitle


• Every ObjectAttribute and ObjectStatus that are inside the ObjectHeader will be placed inside our sap.f.DynamicPageHeader


• Everything else will be placed inside the content aggregation of the DynamicPage

Step 3 — Update the BusinessPartnerSalesOrderDetail view

This view is more or less equal to the BusinessPartnerDetail so you just need to repeat the same process above 😉

Step 4 — Enjoy the final result

If you want, you can clone the project and try it on your own. Check it out on my GitHub account.

After following all these steps this will be the final result. Do you see the differences between this video and the first one at the start of the blog post?

PS: As usual, the animations are not very smooth but I think that the issue could be my current laptop and the number of chrome tabs currently opened (+ all the IDEs that are eating my RAM)

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!