SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE
+
-
SAPUI5 Basic Concepts
+
-
Data Binding and Model

Different Modes of Data Binding - One Way, Two Way and One Time

In previous article Introduction to Model and Data Binding in SAPUI5 , we explained basic concept of Data Binding and Model.
In this article, we will go into details of data binding and understand how different modes of data binding works and when to use them.

Note: we recommend you to read the article Introduction to Model and Data Binding in SAPUI5 first if you have not.

What are the types of Data Binding mode in SAPUI5?

There are 3 types of Data Binding mode
  • One Way
  • Two Way
  • One Time

Note: Default binding mode is "Two Way."

One Way Data Binding

One-way binding means a binding from the model to the view. If the model data changes, corresponding UI element will be changed. But change in UI element does not change model data.

Different Modes of Data Binding – One Way, Two Way and One Time

For example, let us assume that application data is hold by Model. And Model is bound to an SAPUI5 Text field. In case of One Way Data Binding, change in Model will change Text Field value. But change in Text Field will not change Model.

Different Modes of Data Binding – One Way, Two Way and One Time

Two Way Data Binding

Two-way binding means binding from the model to the view and from the view to the model in both direction.

Different Modes of Data Binding – One Way, Two Way and One Time

In case of Two Way Data Binding, change in Model will change Text Field value. Also change in Text Field will change Model data.

Different Modes of Data Binding – One Way, Two Way and One Time

One Time Data Binding

One-time binding means binding from model to view only once.

Different Modes of Data Binding – One Way, Two Way and One Time

In case of One Time Data Binding, once the binding is done and UI control is rendered, change in model does not change UI control.

Different Modes of Data Binding – One Way, Two Way and One Time

In case of One Time Way Data Binding, once the view is rendered, change in Model does not change Text Field value.

Difference between One Way, Two Way and One Time Binding Mode

Let us understand with the help of an example.

Step 1: Open SAP Web IDE to create the SAPUI5 project.

Different Modes of Data Binding – One Way, Two Way and One Time

If you do not have access to SAP Web IDE or do not know how to work on Web IDE, please refer to the article SAPUI5 Hello World using Web IDE.

Step 2: Right click on "Workspace" and create a new folder called "DataBindingModes".

Different Modes of Data Binding – One Way, Two Way and One Time

Step 3: Right click on the folder "DataBindingModes" and select "New" --> "SAPUI5 View".

Different Modes of Data Binding – One Way, Two Way and One Time

Step 4: Enter the View name as "App" and Namespace as "databindingmodes". Then click on "Finish".

Different Modes of Data Binding – One Way, Two Way and One Time

Step 5: Open App.view.xml file and paste below code.

  <mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="databindingmodes.controller.App">
    <Panel headerText="Data Binding Demo">
        <Label text="Input Field with One Way Data Binding"
            class="sapUiSmallMargin"/>
        <Input value="{path: '/Name', mode: 'OneWay'}"
            valueLiveUpdate="true" width="200px" />

        <Label text="Input Field with Two Way Data Binding"
            class="sapUiSmallMargin"/>
        <Input value="{path: '/Name', mode: 'TwoWay'}"
            valueLiveUpdate="true" width="200px" />

        <Label text="Input Field with One Time Data Binding"
            class="sapUiSmallMargin"/>
        <Input value="{path: '/Name', mode: 'OneTime'}"
            valueLiveUpdate="true" width="200px" />

        <Label text="Input Field with Default Binding Mode"
            class="sapUiSmallMargin"/>
        <Input value="{/Name}"
            valueLiveUpdate="true" width="200px" />
    </Panel>

    <Panel >
        <Text text="Hello {/Name}"
            class="sapUiSmallMargin"/>
    </Panel>
  </mvc:View>

Important points to be noted in the code:
We have added an sap.m.Input control to the view. We are binding its value to a SAPUI5 model by using curly brackets {..}.
The curly brackets {/Name} indicate that data is taken from the value of the "Name" property. If we don't specify Binding Mode, it will take default binding mode (which is Two Way).
   <Input value="{/Name}" valueLiveUpdate="true" width="200px" />

We can also specify Binding Mode explicitly. For example
  <Input value="{path: '/Name', mode: 'OneTime'}" valueLiveUpdate="true" width="200px" />

Step 6: Open App.controller.js file and paste below code.

  sap.ui.define([
    "sap/ui/core/mvc/Controller"
  ], function(Controller) {
    "use strict";

    return Controller.extend("databindingmodes.controller.App", {

        onInit: function() {
          //JSON Sample Data
          var jsonData = {
          Name: "Harry Potter"
              };
          // Create a JSON model from an object literal
          var oModel = new sap.ui.model.json.JSONModel(jsonData);
          this.getView().setModel(oModel);
        }

    });
  });

Important points to be noted in the code:
We added onInit() function to the controller. onInit is one of SAPUI5's lifecycle methods that is invoked by the framework when the controller is created.

Inside the function we instantiate a JSON model.
  var oModel = new sap.ui.model.json.JSONModel(jsonData);

The data for the model only contains a single property for the "Name".
  var jsonData = {
      Name: "Harry
    };

To be able to use this model from within the XML view, we call the setModel function on the view and pass on our newly created model. The model is now set on the view.
this.getView().setModel(oModel);

Step 7: Again right click on the folder "DataBindingModes" and select "New" --> "File".

Different Modes of Data Binding – One Way, Two Way and One Time

Step 8: Enter File Name as "index.html" and click on "Finish"

Different Modes of Data Binding – One Way, Two Way and One Time

Step 9: Open index.html file and paste below code.

  <!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-libs="sap.m"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{ "databindingmodes": "./" }'
      >
    </script>
    <script>
      sap.ui.getCore().attachInit(function () {
        new sap.ui.core.mvc.XMLView({ viewName : "databindingmodes.view.App" })
          .placeAt("content");
      });
    </script>
  </head>
  <body class="sapUiBody" id="content">
  </body>
  </html>

Step 10: Run the SAPUI5 application. You will see a screen like below.

Different Modes of Data Binding – One Way, Two Way and One Time

There are 4 types of Input Field and Model binding in this example.
One Way - If Input changes, Model does not change. But if Model changes, Input change.
Two Way - If Input changes, Model change. Also if Model changes, Input change.
One Time - After view is rendered, value of Input does not change even if Model changes
Default - Default binding is Two Way.

Different Modes of Data Binding – One Way, Two Way and One Time

Where can I get the source code?

You can download the source code from here.

Click here to check the online version of this project. Please note that this link may not work in IE browser.

What's Next?

Below articles might help you to know more about SAPUI5.

If you have any question, please post in the comment or contact us.


Support us by sharing this article.



Explore More
Close X
Close X

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy