The sap.m library provides essential container controls for organizing mobile application interfaces. The sap.m.App serves as the root element managing navigation and overall application structure, supporting properties like homeIcon for bookmark icons and background customization through backgroundColor or backgroundImage. Modern implementations leverage sap.m.App with sap.f.FlexibleColumnLayout for split-screen layouts, replacing the legacy sap.m.SplitApp approach.

The sap.m.Page control functions as a full-screen container dividing the interface into three distinct aggregation areas: headerContent, content, and footer. The header area typically hosts navigation buttons and titles, though developers can implement custom headers via the customHeader aggregation. The central content area supports scrolling by default, controllable through the enableScrolling property. Footers remain fixed at the bottom unless configured as floating using floatingFooter. This containment pattern where controls host other controls exemplifies UI5's aggregation concept.

For content grouping, sap.m.Panel offers a collapsible container with a title bar, optional info toolbar, and content area. Developers customize headers through the headerToolbar aggregation, adding buttons, spacers, or custom titles. Panels operate in fixed or expandable modes, the latter controlled via the expandable property with configurable expandAnimation. Best practices recommend avoiding nested panels and limiting panel density per view.

Implementation Example

The following XML view demonstrates nesting containers properly, utilizing displayBlock="true" to ensure proper full-screen rendering:

<mvc:View
    controllerName="demo.ui5.layout.controller.Main"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    displayBlock="true">
    
    <App id="rootApp">
        <pages>
            <Page title="{i18n>pageHeader}">
                <content>
                    <Panel 
                        headerText="{i18n>sectionTitle}" 
                        expandable="true" 
                        expandAnimation="true">
                        <content>
                            <HBox alignItems="Center" justifyContent="SpaceBetween">
                                <Input 
                                    value="{/user/input}" 
                                    placeholder="{i18n>inputPlaceholder}"
                                    valueLiveUpdate="true"
                                    width="65%"/>
                                <Button 
                                    text="{i18n>actionBtn}" 
                                    press=".handleAction"
                                    type="Emphasized"/>
                            </HBox>
                        </content>
                    </Panel>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

Localizasion Configuration

Add the following entries to your i18n.properties file to support the view bindings:

# Application Metadata
appTitle=Layout Demo
appDescription=Demonstrating Page and Panel container implementation

# View Labels
pageHeader=Dashboard
sectionTitle=Input Section
inputPlaceholder=Enter your name...
actionBtn=Greet