xmlからjsへSAPUI5カスタムリスト項目コードコンソールにエラーがありません

Question

カスタムリストアイテムでこのカスタムデザインに到着しようとしています - this design 3種類のアイコン色。

私はすでにXMLビューで

<List items="{path: '/results'}" id="exemple"> 
       <CustomListItem> 
       <FlexBox alignItems="Start" 
        justifyContent="SpaceBetween"> 
       <items> 

       <core:Icon size = "2rem" src="sap-icon://flag" /* I NEED 3 ICONS HERE*/ class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" /> 
       <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" > 
       <Label class="sapUiTinyMarginEnd" text="{BM}" /> 
       <Label class="sapUiTinyMarginEnd" text="{BMS}"/> 
       </VBox> 
       </items> 
       </FlexBox> 
       </CustomListItem> 
       </List> 

でそれをやったが、私はいくつかのODATA値のベースで動的な方法で色やアイコンを変更しなければならないので、私はコントローラでそれをやりたいですだから、私は彼にフォーマッタを指定し、jsコントローラで操作することを熱く知らないxonの.onAfterRendering関数とフォーマッタを使用することができます。 私は、oData値のベースで自分の色を変更する.onAfterRenderingを持っていますが、その値のベースでもアイコンを変更する必要があります。

私はjsでコードを書くことを試みましたが、私はデータなしのリストとコンソールにエラーがありません。

var view = that.getView();//get view     
       var oList = sap.ui.getCore().byId(view.createId('listjs')); 
       oList.setModel(oModel); 
       var CustomListItemTemplate = new sap.m.CustomListItem(); 
       var FlexBox = new sap.m.FlexBox({ 
         alignItems : "Start", 
         justifyContent: "SpaceBetween" 
         }); 
       FlexBox.addItem(
         new sap.ui.core.Icon({ 
           src : "sap-icon://status-error", //HERE I SHOULD HAVE A FORMATTER BECOUSE I NEED 3 ICONS "sap-icon://status-error", "sap-icon://status-SUCCESS" AND "sap-icon://SOMETHING ELSE" 
           size: "2rem" 
         }), 
         new sap.m.VBox({ 

         }), 
         new sap.m.Label({ 
          text: "{BMS}" 

         }), 
         new sap.m.Label({ 
          text: "{BM}" 

         }) 
       ); 
       /*oList.onAfterRendering = function() { 
       if (sap.m.List.prototype.onAfterRendering) { 
        sap.m.List.prototype.onAfterRendering.apply(this, arguments); 
       } 
       var items = this.getItems(); 
       for (var i = 0; i < items.length; i++) { 
        var item = items[i]; 
        var obj = item.getBindingContext().getObject(); 

        switch (oData.results[0].BMS) { 
        case 'NOTGOOD': 
        { 
         item.$().find('.sapUiIcon').addClass('RED'); 

        } 
        break; 
        case 'GOOD': 
        { 
         item.$().find('.sapUiIcon').addClass('GREEN'); 
        } 
        break; 
        default: 
        { 
         item.$().find('.sapUiIcon').addClass('YELLOW'); 
        } 
        break; 
        } 
       } 
      }*/ 
      oList.bindAggregation("items","/results" ,CustomListItemTemplate); 

Answer 1

フォーマッタの使用で十分ですか？

<List items="{path: '/results'}" id="exemple"> 
    <CustomListItem> 
     <FlexBox alignItems="Start" 
        justifyContent="SpaceBetween"> 
     <items> 
      <core:Icon size="2rem" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" 
         src="{path: 'BMS', formatter: '.formatIconSrc'}" 
         color="{path: 'BMS', formatter: '.formatIconColor'}" /> 
      <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" > 
       <Label class="sapUiTinyMarginEnd" text="{BM}" /> 
       <Label class="sapUiTinyMarginEnd" text="{BMS}"/> 
      </VBox> 
     </items> 
     </FlexBox> 
    </CustomListItem> 
</List> 

とコントローラに：私は私のコードで2つの異なるリストがあるので、それを再作成するためにしようと試みbecouse

formatIconSrc:function(bms){ 
    switch(bms){ 
     case 'NOTGOOD': 
     return "sap-icon://status-error"; 
     case 'GOOD': 
     return "sap-icon://status-success"; 
     default: 
     return "sap-icon://somethingelse"; 
    } 
}, 
formatIconColor:function(bms){ 
    switch(bms){ 
     case 'NOTGOOD': 
     return "red"; //css colors supported 
     case 'GOOD': 
     return "green"; 
     default: 
     return "yellow"; 
    } 
},