Skip to Content
0
May 20, 2016 at 11:32 AM

Smart Table Custom Column

2556 Views

Hello Experts,

I am trying to transform a text column, that is generated from the Smart Table, into an Icon column.

I have the following code for the smart table:

<mvc:View
     controllerName=MyController"
     xmlns="sap.m"
     xmlns:mvc="sap.ui.core.mvc"
     xmlns:smartTable="sap.ui.comp.smarttable" 
     xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
     xmlns:soc="sap.ui.comp.navpopover" 
     xmlns:core="sap.ui.core"
     xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
...
<smartTable:SmartTable id="smartTable_ResponsiveTable" 
     tableType="ResponsiveTable" 
     dataReceived="onDataReceived" 
    beforeRebindTable="onBeforeRebindTable" 
     enableAutoBinding="false" 
     entitySet="OrderSet"
     header="Found"
     showRowCount="true"
     useExportToExcel="false"
     useTablePersonalisation="true"
     persistencyKey="SmartTablePKey"
     useVariantManagement="true"
     ignoredFields="ObjectKey"
     initiallyVisibleFields="Icon,UserStatus,Name,NetValue">
  </smartTable:SmartTable>
...

What I need to do is to transform the the text I receive from the Back-end for the Icon column into Icons.

I found two ways of doing this:

  1. Adding a custom Column (Which I do not know how???)
  2. Modify the cells of the Icon Column on the "onDataReceived" event where I read the text value and replace it with an icon, for each row in the table.


This is how I am doing it at the moment:

onDataReceived: function(oEvent) {
     var oSmartTable = oEvent.getSource();
     var oTable = oSmartTable.getTable();
     var sText = oText.getProperty("text");
     if (sText) {
          var sIconId = "icon_" + index;
          var oIcon = new sap.ui.core.Icon({
            src: formatter.toSapui5Icon(sText),
            alt: sText,
           useIconTooltip: false
       });

     index++;


     item.removeCell(0);
     item.insertCell(oIcon, 0);
 }


It works for the first 20 rows, but then when I push the button to get the next 20 values it doesn't work anymore.

Here are some screenshots:

So, that is why I need to understand how the custom columns work with the Smart Table.

In the online documentation, Smart Table, it is written that we could use CustomData to achieve this, but the sap.ui.comp.smarttable.SmartTable has only 3 aggregations:

- customToolbar

- noData

- semanticObjectController


So I do not see where and how should I create my custom column and neither how to populate it.


Please help me understand better how should we work with smart tables.


Thank you for your time.



Adrian


Attachments

img1.PNG (100.1 kB)
img2.PNG (28.1 kB)