Module 4: Views & Layouts

Layouts define how content is structured, aligned, and adapted across devices.
In SAPUI5, layouts are responsive by design and play a key role in delivering Fiori-compliant UX.

---

1. XML Views (Recommended)

---

Why XML Views?

XML Views are:

• Declarative
• Easy to read
• Easy to maintain
• Tool-friendly (BAS, VS Code)

SAP Recommendation

Always prefer XML Views for SAPUI5 applications.

---

XML View Structure

<mvc:View
  controllerName="com.app.demo.controller.Main"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">

  <!-- UI content goes here -->

</mvc:View>

Best Practice

Keep XML clean and readable — avoid logic in views.

---

2. Pages & Containers

sap.m.Page

Page is the fundamental container for mobile and responsive apps.

Features

• Header
• Footer
• Content area
• Navigation support

Example: Page

<Page title="Dashboard" showNavButton="true">
  <content>
    <Text text="Welcome to SAPUI5" />
  </content>
</Page>

Common Containers

Container	Purpose
Page	Main screen
App	Root container
ScrollContainer	Scrollable area
Panel	Group content

Clean UI

Use one Page per view.

---

3. VBox, HBox & FlexBox

Why Flex Layouts?

Flex layouts help:

• Align elements
• Control spacing
• Adapt to screen size

VBox (Vertical Layout)

<VBox alignItems="Center" justifyContent="Center">
  <Text text="Title" />
  <Button text="Submit" />
</VBox>

HBox (Horizontal Layout)

<HBox justifyContent="SpaceBetween">
  <Text text="Name" />
  <Input />
</HBox>

FlexBox (Advanced Control)

<FlexBox
  direction="Row"
  justifyContent="SpaceAround"
  wrap="Wrap">
  <Button text="A" />
  <Button text="B" />
</FlexBox>

Control Comparison

Control	Use Case
VBox	Vertical stacking
HBox	Horizontal alignment
FlexBox	Complex responsive layouts

Recommendation

Use VBox/HBox for most layouts, FlexBox only when needed.

---

4. Grid & SimpleForm

sap.ui.layout.Grid

Used for:

• Complex forms
• Multi-column layouts
• Desktop-heavy screens

<layout:Grid
  defaultSpan="L6 M6 S12"
  xmlns:layout="sap.ui.layout">
  <Text text="Label" />
  <Input />
</layout:Grid>

SimpleForm (Very Important)

SimpleForm is the preferred way to build forms.

Benefits

• Automatic label alignment
• Responsive behavior
• Minimal configuration

SimpleForm Example

<f:SimpleForm
  layout="ResponsiveGridLayout"
  xmlns:f="sap.ui.layout.form">
  
  <Label text="Name" />
  <Input />

  <Label text="Email" />
  <Input />

</f:SimpleForm>

SAP Recommendation

Use SimpleForm with ResponsiveGridLayout for forms.

---

5. Responsive Layouts

Responsive Design in UI5

UI5 handles responsiveness using:

• Responsive controls
• Layout properties
• Device breakpoints

Breakpoints

Device	Size
Phone	S
Tablet	M
Desktop	L

Responsive Properties Example

<layout:Grid defaultSpan="L6 M12 S12" />

Key Rule

Design for mobile first, scale up for desktop.

---

6. Device Adaptation

sap.ui.Device API

Used to detect:

• Device type
• Orientation
• Touch support

if (sap.ui.Device.system.phone) {
  // Phone-specific logic
}

Device-Specific UI

<Button visible="{= !${device>/system/phone} }" />

Best Practice

Prefer responsive design over device-specific logic.

---

7. Layout Best Practices

Follow These

• Avoid nested layouts
• Keep hierarchy shallow
• Use SimpleForm for forms
• Test on multiple devices
• Follow Fiori spacing guidelines

Avoid These

• Absolute positioning
• Fixed widths
• Too many FlexBoxes
• Hardcoded device checks

---

8. UI5 Layouts vs Classical HTML/CSS

Aspect	HTML/CSS	SAPUI5
Responsiveness	Manual	Built-in
Layout logic	CSS	Controls
Consistency	Developer	Framework
Accessibility	Manual	Built-in

Enterprise Benefit

UI5 ensures consistent UX across applications.

---

9. Interview-Grade Explanation

Q: How do you build responsive layouts in SAPUI5?

Answer:

I use XML views with responsive containers like VBox, HBox, and SimpleForm with ResponsiveGridLayout, relying on UI5's built-in responsiveness instead of device-specific logic.

---

10. Summary

• XML Views are preferred
• Page is the base container
• VBox/HBox handle most layouts
• SimpleForm is ideal for forms
• UI5 handles responsiveness
• Device API is used sparingly

---

11. What's Next?

➡️ Module 5: UI5 Controls – Basics

Learning Tip

Good layouts make apps usable — great layouts make them delightful.