Skip to main content

Module 16: Advanced Data Binding & Models

Advanced data binding techniques allow SAPUI5 applications to remain clean, performant, and scalable even as complexity grows.

This module focuses on:

  • Combining data from multiple sources
  • Using binding contexts effectively
  • Optimizing performance for large applications

1. Composite Binding​

What is Composite Binding?​

Composite binding allows you to:

  • Combine multiple model properties
  • Bind them to one control property
  • Optionally format the combined value

Example: Composite Binding with Formatter​

<Text
  text="{
    parts: [
      { path: '/firstName' },
      { path: '/lastName' }
    ],
    formatter: '.formatFullName'
  }" />
formatFullName: function (sFirst, sLast) {
  return sFirst + ' ' + sLast;
}
Use Case

Display combined values like Full Name, Address, or Amounts with Currency.

2. Multiple Models Usage​

Why Multiple Models?​

Large UI5 apps typically use:

  • One ODataModel (backend)
  • One or more JSONModels (UI state)
  • ResourceModel (i18n)
  • Device model
Enterprise Pattern

One model per responsibility.

Setting Multiple Models​

this.getView().setModel(oUserModel, "user");
this.getView().setModel(oViewModel, "view");

Binding Named Models​

<Text text="{user>/name}" />
<Text visible="{view>/isEditable}" />
Best Practice

Always use named models for clarity in large apps.

3. Context Binding​

What is Binding Context?​

A binding context defines:

  • The current data object
  • Relative paths for bindings

Element Binding Recap​

this.getView().bindElement("/SalesOrderSet('50000001')");
<Text text="{Customer}" />
<Text text="{Amount}" />
Key Benefit

No need to repeat full paths in every binding.

Context Binding in Event Handling​

var oContext = oEvent.getSource().getBindingContext();
var sPath = oContext.getPath();
Real Projects

Context binding is critical in tables, lists, and dialogs.

4. Binding Modes (Advanced Usage)​

Binding Modes Recap​

ModeDirection
OneWayModel to UI
TwoWayModel and UI
OneTimeInitial only

Explicit Binding Mode Control​

oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);

When to Change Binding Mode​

Use OneWay When
  • Display-only data
  • Performance-sensitive scenarios
Be Careful With TwoWay
  • Accidental model updates
  • Unintended backend changes

5. Performance Optimization in Data Binding​

Common Performance Issues​

  • Too many bindings
  • Deep binding paths
  • Heavy formatters
  • Frequent model refreshes

Performance Best Practices​

Follow These
  • Use element binding to reduce path depth
  • Avoid formatters in large tables
  • Use expression binding for simple logic
  • Prefer OneWay binding where possible

Avoid Binding in Loops​

Anti-Pattern

Creating controls dynamically with bindings in loops causes performance degradation.

6. Model Refresh Strategies​

Full Model Refresh​

oModel.refresh(true);
  • Reloads all data
  • Expensive operation
Use Sparingly

Avoid full refreshes unless absolutely required.

Partial Updates (Preferred)​

oModel.setProperty("/status", "Approved");
  • Updates only affected bindings
  • High performance

Refresh After submitChanges​

oModel.submitChanges({
  success: function () {
    oModel.refresh();
  }
});
Real Projects

Refresh only the affected entity, not the whole model.

7. Advanced Pattern: View Model (State Model)​

What is a View Model?​

A view model is a JSONModel used only for:

  • UI state
  • Visibility
  • Enable/disable flags
var oViewModel = new sap.ui.model.json.JSONModel({
  busy: false,
  editable: true
});
this.getView().setModel(oViewModel, "view");
<Button enabled="{view>/editable}" />
Clean Architecture

Separating UI state prevents polluting business models.

8. Advanced Binding Pitfalls​

Avoid These
  • Refreshing full ODataModel frequently
  • Complex formatter logic
  • TwoWay binding everywhere
  • Mixing UI state with backend data

9. Interview-Grade Explanation​

Q: How do you optimize data binding performance in SAPUI5?

Answer:

I use element binding to reduce deep paths, prefer OneWay binding for display-only data, avoid heavy formatters in tables, use view models for UI state, and minimize full model refreshes by updating only affected properties.

10. Summary​

  • Composite binding combines multiple values
  • Multiple models improve separation of concerns
  • Context binding simplifies paths
  • Binding modes control data flow
  • Performance requires careful binding design
  • Model refresh should be minimal and targeted

11. What's Next?​

➡️ Module 17: Advanced OData Concepts

Learning Tip

Advanced binding mastery separates good UI5 developers from great ones.