Factory Function Example 2

Click here and follow my SAP UI5/FIORI snippets and information Page

This is another example of factory function,in which heterogeneous controls are added in same column.This is beauty of factory function.It plays very important role in table binding,list binding...etc.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Factory Function">
<content>
<Table id="tabId">
<columns>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Mobile" />
</Column>
<Column>
<Text text="E-mail" />
</Column>
</columns>
        </Table>
</content>
</Page>
</core:View>

Controller Part

sap.ui.controller("view.S1", {
onInit : function() {
//calling method...........
this.tableBindMethod();
},
// called method.................
tableBindMethod : function() {
var that = this;
var json = new sap.ui.model.json.JSONModel("model/record.json")
var tabId = this.byId("tabId");
tabId.setModel(json);
tabId.bindItems("/Records", function(Id, path) {
return new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{name}"
}),

// calling method..............
that.factoryfunction(Id, path),

new sap.m.Text({

text : "{email}"
}) ]
})
});
},

// called method.......
factoryfunction : function(Id, Cpath) {
var key = Cpath.getProperty("key");
if (key === "L") {
return new sap.m.Link({
text : "{mobile}"
})
}
  else if (key === "C") {
return new sap.m.CheckBox({
selected : true,
})
} else if (key === "I") {
return new sap.m.Input({
value : "{mobile}"
})

} else {
return new sap.m.Text({
text : "{mobile}"
})
}
}
});

record.json

 {"Records":[

 {

"name":"vikas Kumar",

"mobile":123,

"email":"v@gmail.com",

"key":"L"

},

{

"name":"Nikhil Kumar",

"mobile":111,

"email":"nik@gmail.com",

"key":""

},

{

"name":"Bhaskar Kumar",

"mobile":444,

"email":"Bhasker@gmail.com",

"key":""

},

{

"name":"Rohit Kumar",

"mobile":2222,

"email":"Rohit@gmail.com",

"key":"C"

},

{

"name":"Ram Kumar",

"mobile":133323,

"email":"Ram@gmail.com",

"key":""

},

{

"name":"Vishal Kumar",

"mobile":123123123,

"email":"vishal@gmail.com",

"key":""

},

{

"name":"raju Kumar",

"mobile":656566,

"email":"raju@gmail.com",

"key":"I"

}

]}

Result