Module 3: MVC Architecture in SAPUI5

SAPUI5 follows the Model–View–Controller (MVC) design pattern to ensure separation of concerns, maintainability, and testability in enterprise UI applications.

This module explains how MVC is implemented in UI5, not just what MVC is.

---

1. MVC Concept in SAPUI5

What is MVC?

MVC separates an application into three logical layers:

Layer	Responsibility
Model	Data & application state
View	UI layout & structure
Controller	User interaction & logic

UI5 Advantage

MVC is built-in in SAPUI5 — you don’t implement it manually.

---

MVC Flow in UI5

User Action
   ↓
Controller
   ↓
Model (Data Change)
   ↓
View (Auto Update via Binding)

Key Concept

In UI5, views never fetch data directly.

---

2. Views in SAPUI5

Views define the UI structure, not behavior.

2.1 Types of Views

SAPUI5 supports three view types:

View Type	Usage	Recommendation
XML View	Declarative, readable	✅ Preferred
JS View	Programmatic UI	⚠️ Rare
HTML View	Legacy	❌ Avoid

SAP Recommendation

Always use XML Views for enterprise applications.

2.2 XML View Example

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

  <Page title="Dashboard">
    <Button text="Click Me" press="onPress" />
  </Page>

</mvc:View>

Key Rule

No business logic inside views.

---

3. Controllers

Controllers handle:

• User events
• UI logic
• Model interaction

3.1 Controller Lifecycle Methods

Method	Purpose
onInit	Initialization
onBeforeRendering	Before UI render
onAfterRendering	After UI render
onExit	Cleanup

3.2 Controller Example

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function (Controller) {
  "use strict";

  return Controller.extend("com.app.demo.controller.Main", {

    onInit: function () {
      // Initialization logic
    },

    onPress: function () {
      // Handle button press
    }

  });
});

Clean UI5

Controllers should be thin, not bloated.

---

4. Models Overview in SAPUI5

Models hold application data and expose it to views.

4.1 Common UI5 Models

Model	Use Case
JSONModel	Client-side data
ODataModel (V2/V4)	Backend integration
ResourceModel	i18n texts
XMLModel	Rare / legacy

Modern Apps

Most apps use ODataModel + JSONModel.

4.2 Setting a Model

var oModel = new sap.ui.model.json.JSONModel({
  name: "Yogesh"
});
this.getView().setModel(oModel);

---

5. Data Binding Basics

Data binding connects models to views automatically.

5.1 Binding Types

Binding Type	Purpose
Property	Single value
Aggregation	Lists / tables
Element	Context binding

5.2 Property Binding Example

<Input value="{/name}" />

Model update → UI updates automatically.

5.3 Aggregation Binding Example

<List items="{/employees}">
  <StandardListItem title="{name}" />
</List>

Key Benefit

No manual DOM updates.

---

6. MVC Separation – Best Practices

6.1 What Goes Where?

Layer	Should Contain	Should NOT Contain
View	Layout, binding	Logic, data fetch
Controller	Events, flow	UI structure
Model	Data	UI logic

6.2 Best Practices

Follow These

• Keep views declarative
• Keep controllers small
• Use models for state
• Avoid logic in XML
• Avoid direct DOM access

6.3 Common Anti-Patterns

Avoid These

• AJAX calls in views
• Heavy logic in controllers
• Hardcoded texts (no i18n)
• Manipulating UI controls directly

---

7. MVC in UI5 vs MVC in ABAP

Aspect	ABAP MVC	UI5 MVC
Model	Classes / CDS	Models
View	ALV / UI	XML Views
Controller	Report / Class	Controller.js

Full-Stack View

MVC is consistent across ABAP and UI5, just implemented differently.

---

8. Interview-Grade Explanation

Q: How does MVC work in SAPUI5?

Answer:

SAPUI5 implements MVC natively where views define UI declaratively, controllers handle user interactions, and models manage data. Data binding ensures automatic synchronization between model and view, enforcing clean separation of concerns.

---

9. Summary

• MVC is core to SAPUI5
• XML Views are preferred
• Controllers manage behavior
• Models manage data
• Data binding keeps UI in sync
• Clean separation improves maintainability

---

10. What's Next?

➡️ Module 4: Views & Layouts

Learning Tip

If MVC is clean, everything else in UI5 becomes easier.