In this tutorial, we explain the concepts of data binding in OpenUI5.
Data binding is used to bind UI elements to data sources. This keeps the data in sync and allows data editing on the UI.
For data binding, you need a model and a binding instance: The model holds the data and provides methods to set the data or retrieve it from a server. It also provides a method for creating bindings to the data. When you call this method, a binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data changes. An element can listen to this event and update its visualization according to the new data.
The UI uses data binding to bind controls to the model which holds the application data, so that the controls are updated automatically whenever application data changes. Data binding is also used in reverse, when changes in the control, for example data entered by the user, cause updates in the underlying application data. This is called two-way binding.
💡 You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, copy it to your workspace, and ensure that the application runs by calling the
webapp/index.htmlfile.
The tutorial consists of the following steps. To start, just open the first link — you'll be guided from there.
- Step 1: No Data Binding — In this step, we create a basic application and simply place some text on the screen using a standard sap.m.Text control. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 2: Creating a Model — In this step, we create a model. It serves as a container for the data your application operates on. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 3: Create Property Binding — Although there is no visible difference, the text on the screen is now derived from model data. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 4: Two-Way Data Binding — We change the user interface to display first and last name fields using sap.m.Input fields and add a check box to enable or disable them. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 5: One-Way Data Binding — Unlike two-way binding, one-way data binding lets data travel in one direction only: from the model to the consumer, but never back. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 6: Resource Models — Business applications often require language-specific (translatable) text. We place all translatable texts into a resource bundle. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 7: (Optional) Resource Bundles and Multiple Languages — Resource bundles enable an app to run in multiple languages without changing any code. We create a German version of the app. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 8: Binding Paths: Accessing Properties in Hierarchically Structured Models — We explore how to reference fields in a hierarchically structured model object by adding a second panel with address data. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 9: Formatting Values — We add a link that sends an e-mail to Harry Hawk, using a custom formatter function to convert the model data. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 10: Property Formatting Using Data Types — We apply data types such as Currency to controls to ensure the value displayed on the screen is formatted correctly. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 11: Validation Using
sap/ui/core/Messaging— We enable validation for the entire app so that validation error messages are passed to Messaging and connected to the offending control. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS)) - Step 12: Aggregation Binding Using Templates — Aggregation binding lets a control bind to a list within the model data. We add a third panel with a list of products. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 13: Element Binding — We use a form with relatively bound controls and bind it to the selected list entity via element binding. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 14: Expression Binding — An expression binding lets you display a calculated value on the screen, derived from values found in a model object. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 15: Aggregation Binding Using a Factory Function — We use a factory function to generate different controls based on the data received at runtime. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
Copyright (c) 2026 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.