Factory Function

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

With the help of factory function,you can place different controls in same column based on some conditions. This approach is much more flexible and allows complex or heterogeneous data to be displayed.Go through it and please let me know in case of any issue/doubt.

Example 1 :-

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"

class="sapUiSizeCompact" xmlns:vikas="sap.ui.layout.form">

<Page id="pageId">

<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 json = new sap.ui.model.json.JSONModel("model/record.json")
var tabId = this.byId("tabId");
tabId.setModel(json);
tabId.bindItems("/Records", function(Id, path) {
var key = path.getProperty("key");
if (key === "R") {
return new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{name}"
}), new sap.m.Text({
text : "{mobile}"
}), new sap.m.Text({
text : "{email}"
}) ]
}).addStyleClass("redclass");
} else if (key === "G") {
return new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{name}"
}), new sap.m.Text({
text : "{mobile}"
}), new sap.m.Input({
value : "{email}"
}) ]
}).addStyleClass("greenclass");
} else if (key === "Y") {
return new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{name}"
}), new sap.m.Text({
text : "{mobile}"
}), new sap.m.Text({
text : "{email}"
}) ]
}).addStyleClass("yellowclass")
} else {
return new sap.m.ColumnListItem({
cells : [ new sap.m.Link({
text : "{name}"
}), new sap.m.Text({
text : "{mobile}"
}), new sap.m.Text({
text : "{email}"
}) ]
})
}
});
}
});

record.json

{"Records":[
{
"name":"vikas Kumar",
"mobile":123,
"email":"v@gmail.com",
"key":"R"
},
{
"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":"Y"
},
{
"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":"G"
}
]}

style.css                                                                                                                              

.redclass {
background-color:red ! important;
}
.yellowclass{
background-color:yellow ! important;
}
.greenclass{
background-color:green ! important;
}
                                                                         

Result