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!

[former_member600217]

For “Full Screen List Report”   { https://experience.sap.com/fiori-design-web/full-screen/ }

with dynamic screen which is of type

[ Two Screens = “with a input screen and navigate to display the table details” or

Single screen = placing Filter bar on above of a table ]

do we as well need to do changes to App view,index,manifest file as mentioned in prev blog or

only above mentioned changes are required?

I tried to develop and ended with no luck as i could see blank page.

it would be helpfull if you can you just provide the required info for developing the Full screen list report mentioned in a link above with dynamic page concept.

Thank You

[ericci]

Hi Manasa, that page is talking about a UI/UX approach is not translated in specific UI control.

The "Full-Screen Layout" is deprecated as the page is saying. If you want to have a real full-screen layout you just need to use the Dynamic Page (as explained in this post) without the Flexible Column Layout (that is used to have a Master-Detail UI/UX).

So if you need a Two/Three column application (because you need to display master-detail) follow all the three blog post, otherwise (if you just need a full-screen page) follow only the Dynamic Page part.

The index.html modification will be needed only when you test your app on the WebIDE, when you deploy the app on the Fiori Launchpad it will use an index.html provided by the launchpad itself.

[former_member600217]

How do we create a Full screen layouts using Dynamic Page using the App container Controller.When i try to develop a app i am getting the following error.

I have followed the below steps.

1. Created a Project using UI5 Template with App containter


2. Created a View(View1) and created a Route and its Target in manifest

"routing": {
"config": {
"routerClass": "sap.f.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "es.xx.yy.view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [{
"name": "RView1",
"pattern": "",
"target": ["View1"]
}],
"targets": {
"View1": {
"viewType": "XML",
"viewName": "View1",
"viewId": "idView1",
"viewLevel": 1
}
}
}

3. when I wanna create a Page with <f:DynamicPage/>and its aggregation i am getting the following error (I used the same code from Business Partner first screen)

Did i miss any step to use the Dynamic Page?

error:Uncaught (in promise) Error: Cannot add direct child without default aggregation defined for control sap.f.DynamicPageHeader

Thanks