Introduction to SAP UI5 DynamicPage Control

This control is available since SAP UI5 version 1.42. DynamicPage is a layout control consisting of a header, a header with dynamic behavior, a content area, and an optional floating footer.

The control consists of several components:

• DynamicPageTitle - Consists of a title on the left, content in the middle, and an action on the right. The displayed content changes according to the current mode of the DynamicPageHeader.
• DynamicPageHeader - A generic container that can contain a single layout control and doesn't care about content alignment and responsiveness. The header works in two modes - expanded and snapped, and its behavior can be adjusted with the help of different properties.
• Content Area - A generic container that can have a single UI5 layout control, regardless of content alignment and responsiveness.
• Footer - at the bottom, with a small offset for additional actions, the footer floats above the content. It can be any sap.m.IBar control.
• If the requirement is to display a header that is always visible and a header with configurable expansion/alignment, use DynamicPage. Conversely, no expand/align functionality is required, and it's better to use sap.m.Page for lighter controls.
• If the displayed sap.m.FlexBox has non-responsive content (does not stretch to fill the available space), it is recommended to set the FlexBox's fitContainer property to false.
• If you are displaying a sap.ui.table.Table, keep in mind that it is non-responsive and may cause DynamicPage to behave unpredictably on smaller screen sizes (such as mobile devices). The Table control under the sap.m namespace should be used.
• Snapping a DynamicPageTitle is not supported in the following cases: When a DynamicPage has a scroll bar, the control usually scrolls to the snap point. However, when there is a scroll bar but not enough content to reach the snap point, it is not possible to use scrolling to collapse.
• When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List controls in the content of DynamicPage, if you want to achieve vertical text content alignment, you need to adjust their Left Text Offset Alignment between the content of the sap.f.DynamicPageHeader and the content of the DynamicPage.
• Responsive behavior: The responsive behavior of DynamicPage depends on the behavior of the displayed content. To adjust DynamicPage content padding, you can use the sapUiContentPadding, sapUiNoContentPadding, and sapUiResponsiveContentPadding CSS classes.