Динамический тип содержимого ячейки таблицы

Question

Я получаю данные из базы данных, выставляю из нее модель и привязываюсь к таблице.

У меня проблема с одним полем данных, содержащим dataURL изображения или «Недоступно», если изображение отсутствует.

Проблема в том, что в зависимости от значения поля базы данных ячейкой таблицы должно быть sap.m.Image или sap.m.Text.

И я не могу заставить его работать.

Вот соответствующая часть кода:

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,] 
})); 

У меня есть таблица с пустой «Нет данных».

Answer 1

Проблема в моем коде было отсутствие массива в моем signatureData объекта. После того, как я добавил объект выше в массив, который включен в другой объект, данные появились в таблице.

Адрес working example. Если значение signature является URL-адресом данных изображения (или ссылкой на него), отображается изображение.

Answer 2

Поскольку вы получаете значение из data.signature только один раз, это будет значение ваш шаблон будет работать, независимо от того, те значения, которые могут быть дополнительно в модели

Лучший подход будет использовать HBox в качестве шаблона, с обоими Image и Text, и используя форматтер (см. https://sapui5.hana.ondemand.com/sdk/#docs/guide/a2fe8e763014477e87990ff50657a0d0.html), вы переключаете видимость для любого из них.

(простите меня за использование синтаксиса XML для представления, так как это мой предпочтительный стиль Но вы можете приспособиться к JS View легко.):

EDIT: В качестве упражнения для себя я создал бег Ниже приведен фрагмент кода.

// 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>