Skip to main content

Module 7: Models in SAPUI5

Models in SAPUI5 are responsible for holding application data and state.
They act as the single source of truth and drive UI updates via data binding.

A well-designed UI5 application typically uses multiple models, each with a clear purpose.

1. What is a Model in SAPUI5?​

A model:

  • Holds data (JSON, XML, OData, texts)
  • Exposes data to views
  • Works with data binding
  • Decouples UI from data source
Core Concept

Views never "own" data — models do.

2. JSON Model​

What is JSONModel?​

JSONModel is the most commonly used client-side model in UI5.

Use cases:

  • UI state
  • Temporary data
  • Calculated values
  • Mock data

Creating a JSONModel​

var oModel = new sap.ui.model.json.JSONModel({
  name: "Yogesh",
  age: 30
});

Setting JSONModel on View​

this.getView().setModel(oModel);

Binding JSONModel Data​

<Text text="{/name}" />
<Input value="{/age}" />
Best Practice

Use JSONModel for UI state, not persistent backend data.

3. Resource Model (i18n)​

What is ResourceModel?​

ResourceModel is used for internationalization (i18n).

Purpose:

  • Language-dependent texts
  • Avoid hardcoded strings
  • Support multi-language apps

i18n File Example (i18n.properties)​

appTitle=User Management
saveButton=Save
errorMessage=An error occurred

ResourceModel Configuration (manifest.json)​

"sap.ui5": {
  "models": {
    "i18n": {
      "type": "sap.ui.model.resource.ResourceModel",
      "settings": {
        "bundleName": "com.app.demo.i18n.i18n"
      }
    }
  }
}

Binding i18n Texts​

<Button text="{i18n>saveButton}" />
SAP Rule

Never hardcode texts in UI5 applications.

4. XML Model (Intro)​

What is XMLModel?​

XMLModel holds data in XML format.

Use cases:

  • Legacy systems
  • Static configuration data

Example (Rare Usage)​

var oXmlModel = new sap.ui.model.xml.XMLModel("data.xml");
this.getView().setModel(oXmlModel);
Modern UI5

XMLModel is rarely used in modern applications.

5. Model Scope: View vs Component​

Model Scope Explained​

Models can be set at different levels:

ScopeVisibility
ViewOnly that view
ComponentEntire app
ControlSingle control

View-Level Model​

this.getView().setModel(oModel);

Use when:

  • Data is local to the view
  • Temporary UI state
this.getOwnerComponent().setModel(oModel);

Use when:

  • Data is shared across views
  • Global application state
Best Practice

Prefer Component-level models for shared data.

6. Named Models​

Why Named Models?​

Named models allow:

  • Multiple models in one app
  • Clear separation of concerns

Setting Named Model​

this.getView().setModel(oModel, "userModel");

Binding Named Model Data​

<Text text="{userModel>/name}" />

Typical Named Models​

Model NamePurpose
(default)Main data
i18nTexts
viewModelUI state
deviceDevice info
Enterprise Pattern

Using a dedicated viewModel is a common best practice.

7. Device Model (Common Pattern)​

Device Model Usage​

var oDeviceModel = new sap.ui.model.json.JSONModel(sap.ui.Device);
oDeviceModel.setDefaultBindingMode("OneWay");
this.getView().setModel(oDeviceModel, "device");

Binding Device Properties​

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

Device model helps adapt UI without hardcoding logic.

8. Model Lifecycle & Updates​

Updating Model Data​

oModel.setProperty("/name", "New Name");

UI updates automatically.

Refreshing Model​

oModel.refresh(true);
Performance

Avoid frequent full refreshes.

9. Best Practices for Using Models​

Follow These
  • Separate UI state and backend data
  • Use i18n for all texts
  • Prefer component-level models
  • Use named models for clarity
  • Keep models simple and focused
Avoid These
  • Hardcoding texts
  • Using one model for everything
  • Storing business logic in models
  • Excessive model refreshes

10. Interview-Grade Explanation​

Q: What models do you typically use in a SAPUI5 application?

Answer:

I typically use ODataModel for backend data, JSONModel for UI state and temporary data, ResourceModel for i18n texts, and named models to clearly separate concerns and improve maintainability.

11. Summary​

  • Models store application data
  • JSONModel handles client-side data
  • ResourceModel enables i18n
  • XMLModel is legacy/rare
  • Model scope defines visibility
  • Named models improve structure

12. What's Next?​

➡️ Module 8: Routing & Navigation

Learning Tip

Well-structured models make complex UI5 apps easy to manage.