Module 9: Controller Logic & Lifecycle

Controllers are the brains of a SAPUI5 application.
They handle user interactions, coordinate models, and control application flow — without owning UI structure or data.

This module explains controller lifecycle, event handling patterns, and clean controller design.

---

1. Role of a Controller in SAPUI5

A controller is responsible for:

• Handling user events
• Orchestrating navigation
• Updating models
• Coordinating UI behavior

Clean UI5 Rule

Controllers should coordinate, not compute.

---

2. Controller Lifecycle Methods

SAPUI5 controllers have a well-defined lifecycle.

Lifecycle Order

onInit
  ↓
onBeforeRendering
  ↓
onAfterRendering
  ↓
onExit

When Are Lifecycle Methods Called?

Method	Called When
onInit	Controller is instantiated
onBeforeRendering	Before every render
onAfterRendering	After every render
onExit	Controller is destroyed

---

3. onInit – Initialization Logic

Purpose of onInit

• Set up models
• Attach route handlers
• Initialize variables

Example

onInit: function () {
  this._oRouter = this.getOwnerComponent().getRouter();
  this._oRouter.getRoute("detail")
    .attachPatternMatched(this._onRouteMatched, this);
}

Best Practice

Use onInit for one-time setup only.

---

4. onBeforeRendering – Rarely Used

Purpose

• Adjust UI before rendering
• Prepare view state

Example

onBeforeRendering: function () {
  // Avoid heavy logic here
}

SAP Recommendation

Avoid business logic in onBeforeRendering.

---

5. onAfterRendering – DOM Access (Use Sparingly)

Purpose

• Access rendered DOM
• Integrate third-party libraries

Example

onAfterRendering: function () {
  // DOM is available here
}

Important

Direct DOM manipulation is strongly discouraged.

---

6. Event Handling Patterns

6.1 Event Handler Naming

<Button press="onSave" />

onSave: function (oEvent) {
  // Handle save
}

Naming Convention

Use on <Action> naming for handlers.

6.2 Accessing Event Source

onPress: function (oEvent) {
  var oButton = oEvent.getSource();
}

6.3 Reading Binding Context

var oContext = oEvent.getSource()
  .getBindingContext();

Key Concept

Always use binding context, not control IDs.

---

7. Helper Methods in Controllers

Why Helper Methods?

Helper methods:

• Reduce duplication
• Improve readability
• Encapsulate logic

Example

onSave: function () {
  if (!this._isValid()) {
    return;
  }
  this._submitData();
},

_isValid: function () {
  // Validation logic
  return true;
},

_submitData: function () {
  // Save logic
}

Clean Code

Prefix helper methods with _ to mark them as private.

---

8. Clean Controller Design

What a Controller SHOULD Contain

Should	Example
Event handling	onPress, onChange
Navigation	router.navTo
Model coordination	setProperty
UI state handling	enable/disable

What a Controller SHOULD NOT Contain

Avoid These

• Business logic
• Heavy calculations
• Direct AJAX calls
• DOM manipulation

Move Business Logic To

• Service classes
• Model logic
• Backend (OData / RAP)

Full-Stack Principle

Controllers are thin, backend is strong.

---

9. Controller vs View vs Model Responsibilities

Layer	Responsibility
View	Layout & binding
Controller	Events & flow
Model	Data & state

Interview Insight

Clear separation = maintainable UI5 app.

---

10. Common Controller Mistakes

Avoid These

• Large controllers (>500 lines)
• Logic duplication
• Hardcoding IDs
• Manual DOM updates
• Mixing navigation and business logic

---

11. Interview-Grade Explanation

Q: How do you keep SAPUI5 controllers clean?

Answer:

I keep controllers thin by handling only events, navigation, and model coordination. Business logic is moved to helper or service classes or backend services, and I rely on data binding instead of manual UI updates.

---

12. Summary

• Controllers manage application flow
• onInit is for initialization
• onBeforeRendering is rarely needed
• onAfterRendering should be used sparingly
• Event handlers should be simple
• Clean controllers improve maintainability

---

13. What's Next?

➡️ Module 10: OData Model Basics

Learning Tip

A clean controller is the sign of a mature UI5 developer.