Dynamic Data Binding in sap ui5

View.xml :

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="dynamicbinding.BindDynamic" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Dynamic Binding with Json" id="pageid">
<content>

</content>
</Page>
</core:View>


controller.js :


sap.ui.controller("dynamicbinding.BindDynamic", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf dynamicbinding.BindDynamic
*/
onInit: function() {
var ojson= new sap.ui.model.json.JSONModel("Model/data.json");
this.getView().setModel(ojson);
var oTable= new sap.m.Table
({
columns:[new sap.m.Column({
header:new sap.m.Text({
text:"FirstName",})}),
new sap.m.Column({
header:new sap.m.Text({
text:"LastName",})}),
new sap.m.Column({
header:new sap.m.Text({
text:"EmailId",})}),
new sap.m.Column({
header:new sap.m.Text({
text:"MobileNo",})}),
new sap.m.Column({
header:new sap.m.Text({
text:"Address",})})]});

var cElLs= new sap.m.ColumnListItem({
cells:[ new sap.m.Text({
text:"{fname}"}),
new sap.m.Text({
text:"{lname}"}),
new sap.m.Text({
text:"{email}"}),
new sap.m.Text({
text:"{mobno}"}),
new sap.m.Text({
text:"{address}"})
       ]});
var page_ID=this.getView().byId("pageid");
page_ID.addContent(oTable);

oTable.bindItems("/Records",cElLs);
}


});


data.json : 

{
"Records":[{
"fname":"Riya",
"lname":"Patel",
"email":"riyapatel@ril.com",
"mobno":"9876054123",
"address":"Surat"
},
{
"fname":"Heena",
"lname":"Khan",
"email":"heenakhan@ril.com",
"mobno":"9086745231",
"address":"Delhi"
},
{
"fname":"Mahesh",
"lname":"Patil",
"email":"maheshpatl@ril.com",
"mobno":"8907634215",
"address":"Surat"
},
{
"fname":"Riya",
"lname":"Patel",
"email":"riyapatel@ril.com",
"mobno":"9876054123",
"address":"Surat"
},
{
"fname":"Riya",
"lname":"Patel",
"email":"riyapatel@ril.com",
"mobno":"9876054123",
"address":"Surat"
}
]}

Post a Comment

Previous Post Next Post