Skip to main content

Module 6: Data Binding Fundamentals

Data binding is the core strength of SAPUI5.
It automatically synchronizes UI controls and application data, eliminating manual DOM manipulation.

If you master data binding, UI5 becomes easy and powerful.

1. What is Data Binding in SAPUI5?​

Data binding connects:

  • Model data
  • UI control properties / aggregations

Any change in the model is automatically reflected in the UI.

Key Advantage

No manual UI refresh is required.

2. Property Binding​

What is Property Binding?​

Property binding binds a single model value to a control property.

Example​

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

If /username changes in the model → input updates automatically.

With Type & Validation​

<Input
  value="{path: '/amount', type: 'sap.ui.model.type.Float'}" />
Best Practice

Use data types for formatting and validation.

3. Aggregation Binding​

What is Aggregation Binding?​

Aggregation binding binds a collection (array) to a control aggregation like:

  • List items
  • Table rows

Example: List Binding​

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

How It Works​

Model Array → UI5 creates items dynamically

Core UI5 Feature

UI5 handles creation and destruction of child controls.

4. Element Binding​

What is Element Binding?​

Element binding binds a single object as a context for multiple controls.

Example​

<VBox binding="{/employee}">
  <Text text="{name}" />
  <Text text="{department}" />
</VBox>

Controller-Based Element Binding​

this.getView().bindElement("/employee");
Use Case

Detail views in Master–Detail applications.

5. One-Way vs Two-Way Binding​

Binding Modes​

ModeDescription
OneWayModel → UI
TwoWayModel ↔ UI
OneTimeInitial value only

Default Behavior​

ModelDefault Mode
JSONModelTwoWay
ODataModelTwoWay

Explicit Binding Mode​

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

Two-way binding can unintentionally modify model data.

6. Formatter Functions​

What is a Formatter?​

Formatter functions:

  • Transform data before display
  • Keep logic out of views

XML Usage​

<Text
  text="{path: '/price', formatter: '.formatPrice'}" />

Formatter Implementation​

formatPrice: function (fPrice) {
  return fPrice + " USD";
}
Best Practice

Use formatters only for presentation logic, not business logic.

7. Expression Binding (Modern & Powerful)​

What is Expression Binding?​

Expression binding allows inline logic in XML using {= }.

Examples​

<Text text="{= ${/status} === 'A' ? 'Active' : 'Inactive' }" />

<Button enabled="{= ${/amount} > 0 }" />
Advantage

Reduces controller code for simple conditions.

When to Use Expression Binding​

  • Simple conditions
  • Visibility toggles
  • Enable/disable logic
Avoid

Complex logic in expression bindings.

8. Binding Context & Paths​

Absolute vs Relative Paths​

Path TypeExample
Absolute/employees/0/name
Relativename (with context)
Key Insight

Relative paths depend on binding context.

9. Multiple Models & Named Models​

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

Using multiple models is very common.

10. Best Practices for Data Binding​

Follow These
  • Prefer declarative bindings
  • Use element binding for detail views
  • Use formatters for display logic
  • Use expression binding sparingly
  • Keep business logic out of views
Avoid These
  • Manual DOM updates
  • Deep logic in XML
  • Unnecessary two-way binding
  • Excessive formatter usage

11. UI5 Data Binding vs Classical JS​

AspectClassical JSSAPUI5
UI updatesManualAutomatic
BindingCustomBuilt-in
State mgmtManualModel-based
Enterprise Benefit

Data binding reduces bugs and improves maintainability.

12. Interview-Grade Explanation​

Q: Explain different types of data binding in SAPUI5.

Answer:

SAPUI5 supports property, aggregation, and element binding. Property binding connects single values, aggregation binding handles collections like lists, and element binding sets a context for multiple controls. Binding modes define data flow, and formatters and expression bindings handle presentation logic.

13. Summary​

  • Data binding is core to UI5
  • Property binding handles single values
  • Aggregation binding handles collections
  • Element binding simplifies detail views
  • Binding modes control data flow
  • Formatters & expression bindings format data

14. What's Next?​

➡️ Module 7: Models in SAPUI5

Learning Tip

Once data binding clicks, UI5 feels magical.