Posted on by

Data Binding in SAPUI5 using Simple App by 6 simple steps

Step 1:- First of we will create a simple framework to start coding. Open C9 IDE here we will create a framework inside the IDE

Folder

Step 2:-Now let’s add the UI5 library inside the script tag


<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.demokit></script>

In the body we will have one class i.e sapUiBody which we will place inside the

<body class='sapUiBody'></body>

body tag.

Step3:-Now inside the script tag let’s create two labels and inside the text property, we will give the path to pick our data i.e key1 & key2 respectively which we have already defined in our JSON data model.


var oLabel1 = new sap.m.Label({ text: "{/key1}" });

var oLabel2 = new sap.m.Label({ text: "{/key2}" });

Step4:-Now lets us create a JSON data with the key as “key1” & “key2” with the value as Welcome to Data Binding & Happy Coding ! respectively.

 


var oData = {
 "key1": "Welcome to Data Binding",
  "key2": "Happy Coding !"
 };

Next, let us create a JSON data model


var oModel = new sap.ui.model.json.JSONModel();

The above  syntax to create a JSON model .
Step5:-Next  add the oData to our model

 


oModel.setData(oData);

Now let us assign the model to our labels

 


oLabel1.setModel(oModel);
oLabel2.setModel(oModel);

Step6:-Now we will place these labels in our HTML page

 


oLabel1.placeAt("content1")
oLabel2.placeAt("content2")

So placeAt is the function which will place the elements in our HTML page.
Here the content is a div which we will create to display both the labels separately by creating two div.

 


<div id="content1">;
</div>
<div id="content2">
</div>

We are now ready to see the final output, just goto Preview and click on Live Preview File, there comes the output !
That’s all for now. Stay tuned for more 🙂