Step 4: Two-Way Data Binding

In the examples used so far, we have used a read-only field to display the value of a model property. We will now change the user interface so that the first and last name fields are displayed using sap.m.Input fields and an additional check box control is used to enable or disable both input fields. This arrangement illustrates a feature known as "two-way data binding". Now that the view contains more controls, we will also move the view definition into an XML file.

Preview

Figure 1: Input fields can be enabled or disabled

Coding

You can view and download all files in the Explored app in the Demo Kit under Data Binding - Step 4.

webapp/view/App.view.xml (New)

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
  <Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
    <content>
      <Label text="First Name" class="sapUiSmallMargin" />
      <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <Label text="Last Name" class="sapUiSmallMargin" />
      <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <CheckBox selected="{/enabled}" text="Enabled" />
    </content>
  </Panel>
</mvc:View>

We create a new view folder in our app and a new file for our XML view inside the app folder.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>SAPUI5 Data Binding Tutorial</title>
	<script
		id="sap-ui-bootstrap"
		src="../../../../../../../../../resources/sap-ui-core.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-preload="async"
		data-sap-ui-resourceroots='{ "sap.ui.demo.db": "./" }'
		>
	</script>
	<script>
		// Attach an anonymous function to the SAPUI5 'init' event
		sap.ui.getCore().attachInit(function () {
			// Create a JSON model from an object literal
			var oModel = new sap.ui.model.json.JSONModel({
				firstName: "Harry",
				lastName: "Hawk",
				enabled: true,
				panelHeaderText: "Data Binding Basics"
			});
			// Assign the model object to the SAPUI5 core
			sap.ui.getCore().setModel(oModel);
 
			// Display the XML view called "App"
			new sap.ui.core.mvc.XMLView({ viewName : "sap.ui.demo.db.view.App" })
				.placeAt("content");
		});
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

We add the parameter data-sap-ui-resourcerouts to the bootstrap.

We delete the code that assigned the sap.m.Text field to the UI and add an XML view that is identified by its resource name.

You can now refresh the application preview and select or deselect the checkbox. You will see that the input fields are automatically enabled or disabled in response to the state of the checkbox.

It is clear that we have not written any code to transfer data between the user interface and the model, yet the Input controls are enabled or disabled according to the state of the checkbox. This behaviour is the result of the fact that all SAPUI5 models implement two-way data binding, and for JSON Models, two-way binding is the default behavior.

Two things are happening here:

Data binding allows the property of a control to derive its value from any suitable property in a model.
SAPUI5 automatically handles the transport of data both from the model to the controls, and back from the controls to the model. This is called two-way binding.