[UI5] How is my layoutData ignored in ObjectPageSubSection / [UI5] Wie wird mein LayoutData in ObjectPageSubSection ignoriert

For English reader:

Hello I’m Cong, now I’m a developer in Hybris Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just ignore the italic German paragraphs and sorry for the inconvenience. Thanks a lot!

Für Deutsch Leser:

Hallo ich bin Cong. Jetzt bin ich ein Developer bei Hybris Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!

“Our UIs are ugly.” After seeing some good designs in Google I told myself. One thing could be improved is how to show a list of people. In our UI it is a sap.m.List, but now I would like to show them in cards.

“Unsere UIs sind hässlich.” Da sagte ich mir selbst nach ich habe viele gutes Design in Google gesehen. Ich möchte eine bessere methode um eine Lists von Leute zu zeigen. In unsere UI gibt es ein sap.m.List, aber ich mag Cards.

But I met a problem that in a large scree is the layout really ugly.

Aber da gibt es ein Problem, dass diese Layout ist auch hässlich.

It won’t be hard to adjust the layout if there is a layout data. Then I change it in UI5 Diagnostics and the result looks good.

Es ist nicht schwer um das Layout zu verändern, wenn es ein LayoutData gibt. Dann versuche ich in UI5 Diagnostics und das Ergebnis sieht sehr gut aus.

I’m so smart! 😀 Then I add the layoutData in my code and the result is……nothing changed…….why…….

Ich bin wirklich klug! 😀 Dann hinzufüge ich LayoutData in die Code und das Ergebnis ist……nichts wird verändert……warum……

Who changed my layout? The first “suspect” would be ObjectPageSubSection. Let’s have a look if it did something when it was rendered. And it turns out that there’s nothing special in ObjectPageSubSectionRenderer. An aggregation called Grid is rendered.

Wer veränderte mein layout? Der erste “Verdächtigte” ist ObjectPageSubSection. Dann erforschen wir in ObjectPageSubSectionRenderer. Aber alles sind normal. Da gibt es eine Grid Aggregation.

So the layoutData should be changed before rendering. Then I search “layoutData” in ObjectPageSubSection and then find out the truth. In the function _applyLayout:

Deshalt wirt LayoutData bevor Rendering verändert. Dann suche ich “layoutData” in ObjectPageSubSection und die Wahrheit finden. In die Funktion _applyLayout:

• My layoutData is removed.
• Mein LayoutData wird gelöscht.

• A new layoutData is calculated. The default setting is “2 3 4” (how many columns of blocks will there be), but if the subSectionLayout property of ObjectPageLayout is “TitleOnLeft”, then the setting will be “2 2 3”.
• Ein neue LayoutData wird gerechnet. Die Standardeinstellung ist “2 3 4” (wie viele Säule des Blocks gibt es), aber wenn die SubSectionLayout Eingeschaft des ObjectPageLayout “TitleOnLeft” ist, so ist die Einstellung “2 2 3”.

• Then we got the final layoutData “XL4 L6 M6 S12”
• Dann bekommen wir das final LayoutData “XL4 L6 M6 S12”