[smart control] Change binding path of items in the smart table

Smart table can do many things without coding

Story of Problem

If you look at the demo of the smart table, you would agree that this control saves developers like us tons of development effort. However, if come to customization, it’s nightmare to customize the behavior of the smart table.

The powerful it is, the more complex it is.

Yes, that’s why it’s difficult for you to know how the smart table work and how it works. I’ve got one pain point that urge me to write this article, in case somebody else needs it. That is:

How to bind the smart table to a custom binding path (like another table), not binding directly to the entitySet

My app with the connection problem (using Northwind OData service)

It has taken me 2 weeks to figure this out. Yes, 2 weeks. I admit that I’m a terrible reader that I missed one important property of the smart table, that makes me look for the workaround for so long. Then when I read the document again, I found that the solution is already there in the definition of the smart table.

Reason for this confusion:

Firstly, the document is too long that makes me confused & missed the important information. You can try reading the API of the smart table here too see how complicated the document is.

Secondly, the reason I think it from the inconsistency in the document of SAPUI5:

• In the normal table, the binding path of the table is defined using the “items” property of the table.
• on the other hand, with a smart table, it’s defined with another name: “tableBindingPath”

Here’s solution:

Use the property “tableBindingPath” of sapui5 smart table, you can define the custom binding path to the table, eg. the navigation property inside entity details (bound to the details view).

You can check my working definition of the smart table in XML view. (highlighted tableBindingPath)

<smartTable:SmartTable tableBindingPath="Territories" entitySet="Territories" id="smartTable" smartFilterId="smartFilterBar" tableType="ResponsiveTable" useExportToExcel="false"
       beforeExport="onBeforeExport" useVariantManagement="true" useTablePersonalisation="true" header="Line Items" showRowCount="true"
       persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" demandPopin="true" class="sapUiResponsiveContentPadding"
       initiallyVisibleFields="RegionID,TerritoryDescription,TerritoryID"/>

After setting that property, we get what we wanted:

Smart table worked inside a details view, using a custom binding path.

Source code

You can get the working example source code in Github:

https://github.com/strawherotk/demo_smartTable_customBindingPath

(Check the ‘Smart table’ tab in the details page)

Hope that help you with SAPUI5 development.

Cheers!

— V —