Dynamic content type of table cell - sapui5

Question

I get data from a database, make a model out of it and bind to a table.
I have a problem with one databse field that contains dataURL of the image or "Not Available" if no image is present.
The problem is that depending on the database field value, the cell of the table should be sap.m.Image or sap.m.Text.
And I can't get it to work.
Here is the relevant code part:
var signatureData = {};
signatureData.item = "Signature";
signatureData.value = data.signature;
var oModelSignature = new sap.ui.model.json.JSONModel();
oModelSignature.setData(signatureData);
var oSignatureTable = sap.ui.getCore().byId("reportDetailsSignature");
oSignatureTable.setModel(oModelSignature);
var oSignature;
if(data.signature == "Not Available"){
oSignature = new sap.m.Text({text: "{value}"});
}else{
oSignature = new sap.m.Image({src: "{value}", width: "7%", height: "7%"});
}
oSignatureTable.bindItems("/", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({text: "{item}"}),
oSignature,]
}));
I have my table empty with "No data".

Answer 1

Since you're getting the value from data.signature only once, that will be the value your template will work with, regardless of whatever values it may have further in your model
A better approach will be to use a HBox as a template, with both an Image and a Text control, and using a formatter (see https://sapui5.hana.ondemand.com/sdk/#docs/guide/a2fe8e763014477e87990ff50657a0d0.html) you toggle the visibility for either of them.
(Forgive me for using XML syntax for the view, as that's my preferred style. But you can adapt to JS View easily):
EDIT: As an exercise for myself, I have created a running Code Snippet below.
// The UI5 controller
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
// a model with dummy data. Values are either empty or contain a URL
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows : [
{ value : "sap-icon://syringe", col2 : "Value 2", col3 : "Value 3", ol4 : "Value 4" },
{ value : "", col2 : "Value 6", col3 : "Value 7", col4 : "Value 8" },
{ value : "sap-icon://account", col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
{ value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
{ value : "sap-icon://e-care", col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" },
{ value : "", col2 : "Value 22", col3 : "Value 23", col4 : "Value 24" }
]
});
this.getView().setModel(oModel);
},
// Formatter for icon visibility
setIconVisible : function (sValue) {
return !!sValue;
},
// Formatter for text visibility
setTextVisible : function (sValue) {
return !sValue;
}
});
// Code needed to place XML view into 'uiArea' DIV element
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<!-- bootstrapper -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<!-- here the magic will be shown -->
<div id="uiArea"></div>
<!-- The XMLView definition -->
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" >
<Table id="tbl" inset="true" multiSelect="true" selectionMode="MultiToggle" mode="MultiSelect"
items="{/rows}">
<columns>
<Column>
<Text text="Col1" />
</Column>
<Column>
<Text text="Col2" />
</Column>
<Column>
<Text text="Col3" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<!-- Notice how the cell contains a HBox with an Icon and Text control -->
<!-- Visibility will be toggled using the formatter function for both -->
<HBox>
<core:Icon src="{value}" visible="{path:'value', formatter:'.setIconVisible'}" />
<Text text="No data" visible="{path:'value', formatter:'.setTextVisible'}" />
</HBox>
<Text text="{col2}" />
<Text text="{col3}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>

Answer 2

The problem in my code was the absence of an array in my signatureData object.
After I added the above object into an array which is included in another object, the data appeared in the table.
Here is a working example.
If the value of signature key is a data URL of the image (or a link to it), the image is shown.