21. State management

1. All data — only in models

Do not store data in value or other control properties. All application data should be stored in models:

  • For server data, use ODataModel and explicitly bind components to it.
  • For local/temporary data, use JSONModel.

Example:

// Bind to ODataModel
this.getView().setModel(this.getOwnerComponent().getModel("mainOData"));

// Local model for the page
const oLocalModel = new sap.ui.model.json.JSONModel({
    filter: "",
    isBusy: false,
    items: []
});
this.getView().setModel(oLocalModel, "view");

2. Separate JSONModel for each page

For each page/view, create a separate named JSONModel for local data. This makes debugging easier: the entire state structure is visible as JSON, and you can quickly substitute data via the debugger.

Example:

// In the controller's onInit
this.getView().setModel(new JSONModel({
    search: "",
    selected: null,
    table: []
}), "view");

3. Explicit model structure initialization

Always initialize the entire model structure in onInit. Do not add new parameters dynamically at runtime — this complicates maintenance and debugging.

Example:

// Bad:
this.getView().getModel("view").setProperty("/newField", 123); // dynamically

// Good:
this.getView().setModel(new JSONModel({
    newField: 123
}), "view");

4. Business logic — only through models

Avoid accessing controls by id (this.byId(...)). All business logic should work with data in models, not directly with controls.

Example:

// Bad:
const value = this.byId("input").getValue();

// Good:
const value = this.getView().getModel("view").getProperty("/inputValue");

5. EventBus — only for events

Use EventBus only for passing events between independent components. Do not use it for passing data.

6. URL parameters for passing state between pages

To pass state between pages, use router parameters (query/hash). Do not pass large amounts of data via the URL.

Example:

this.getRouter().navTo("detail", { id: selectedId });

7. Model typing in TypeScript

In TypeScript projects, explicitly describe the type of object for JSONModel:

type ViewModel = {
    search: string;
    selected: number | null;
    table: any[];
};
const model = new JSONModel({} as ViewModel);

Summary

  • All data — only in models (ODataModel/JSONModel)
  • Separate named JSONModel for each page
  • Explicit model structure initialization
  • Business logic works only with models
  • EventBus — only for events
  • For TypeScript — model typing
  • For passing state between pages — only URL parameters

See also