CIC92 CIC92 - 2 months ago 32
Javascript Question

From xml to js SAPUI5 Custom List Item code NO ERROR IN THE CONSOLE

I'm trying to arrive at this custom design with Custom List Item -> this design
just that the icon content can be 3 types of icons with 3 types of colors.

I already did it with in the xml view

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


but because I have to change the color and the icon in a dynamic way in base of some oData values, I want to do it in the controller so i can use the .onAfterRendering function and the formatter, in xml I don't know hot to specify him a formatter and manipulate it in the js controller.
I have a .onAfterRendering that changes my color in base of a oData value but I have to change even icon in base of that value.

So I tryed to write the code in js but i have the list with no data and no error in the console.

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

Does not the use of formatters suffice?

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

and in the controller:

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";
   }
},