Smart Table Custom Column

[adrian_zguri]

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

[yogesh_beria · Accepted solution]

Hi Adrian,

You can have a table within your SmartTable tags where you can define your own columns.

<smartTable:SmartTable>

     <Table>

          <columns>

<Column width="15%">

  <customData>

  <core:CustomData key="p13nData" value='\{"columnKey": "icon","leadingProperty": "icon"}'/>

  </customData>

  <Text text="COLUMN NAME"}"></Text>

  </Column>

          </columns>

<items>

  <ColumnListItem press="onItemSelect" type="Navigation">

  <cells>

     <core:Icon src="{path:'icon', formatter:'.formatter.toSapUi5Icon'}"

</cells>

</ColumnListItem>

     </Table>

</smartTable:SmartTable>

You can also try the annotation based approach if that is possible.

Regards,

Yogesh

[adrian_zguri · Accepted solution]

Thank you very much Yogesh.

That solved my problem, even though I do not understand how is it possible to define a <Table> as an aggregation of the Smart Table whereas in the documentation it is not specified...

Nonetheless, this solution gave me a small problem.

Before, the Smart Table was handling the paging, showing me only 20 rows at a time.

Now, it shows me all the rows... Do you have any idea why it works like this? Is there any setting that I can use in order to have back the paging?

Thank you again for your help

Adrian

[yogesh_beria · Accepted solution]

Hi Adrian,

You can try setting the table's growing property to true.

That should do the trick.

Regards,

Yogesh

[adrian_zguri · Accepted solution]

Thanks again

Worked prefectly