Introduction to sap ui5 flexiblecolumnlayout control

The control is located in the namespace sap.f under .

This control realizes the main... By displaying up to three pages in different columns - details - Detail paradigm .

This control is logically similar to sap.m.SplitContainer, The difference is that it can handle three columns ( be called Begin, Mid and End) Instead of two columns (Master, Detail). The width of these three columns is variable .

There are several possible layouts that can be made through the API Make changes , It can also be changed by the user through the layout arrow .

Use three in internal control sap.m.NavContainer example , So as to form three columns .

These three examples are shown in the figure below ：

Use this control in applications that need to display information related to multiple logical levels at the same time ( for example , List item 、 term 、 Sub items, etc ). In a sense , The control is flexible , The application can focus the user's attention on a specific column , Make it bigger , Even full screen .

These columns can be accessed through beginColumnPages、midColumnPages and endColumnPages Aggregate access .

By means of getBeginColumnPages You can visit beginColumnPages, Other aggregations are similar .

The relative size and visibility of these three columns are based on layout The value of the attribute is determined .

Changes to the layout due to user interaction will be made through stateChange Events are communicated to applications .

The control automatically displays the maximum number of possible columns according to the device size and the current layout . The application does not need to consider the current device / The size of the screen , But you only need to add content to the column and change the value of the layout attribute .

Layout attribute ：

although FlexibleColumnLayout Can display at the same time 2 or 3 A page , But they can never have the same width (50%/50% or 33%/33%/33%). One of the pages is always bigger ( an ), Even occupy the full width of the control ( Full screen ). It's intentional , Because users should clearly know what to focus on at any given moment , for example , A list of items 、 A specific project 、 Details of a project .

About FlexibleColumnLayout More about , Please refer to my SAP UI5 course ：SAP UI5 Application development tutorial 97 - How to use the client JSON The model builds a Master-Detail-Detail Details page in layout