Search code examples
odatasapui5sap-fiori

SAPUI5 Smart table expand


Using the publicly available Nortwhind oData v2 service I can expand on Product and Supplier entity in a normal sap.m.Table using the following code:

<Table 
    id="table" 
    width="auto" 
    class="sapUiResponsiveMargin" 
    items="{ 
        path: '/Products', 
        parameters : { expand: 'Supplier' } 
    }">
    <columns>
        <Column id="nameColumn">
            <Text 
                text="{i18n>tableNameColumnTitle}" 
                id="nameColumnTitle" />
        </Column>
        <Column hAlign="End">
            <Text text="test" />
        </Column>
    </columns>
    <items>
        <ColumnListItem 
            type="Navigation" 
            press="onPress">
            <cells>
                <ObjectIdentifier title="{ProductName}"/>
                <Text text="{Supplier/CompanyName}"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

Now how can I achieve the same output using a smart table? Based on this post I tried the following:

<sap.ui.comp.smarttable:SmartTable 
    xmlns:sap.ui.comp.smarttable="sap.ui.comp.smarttable" 
    tableType="ResponsiveTable" 
    header="Smart Table"
    enableAutoBinding="true" 
    entitySet="Products" 
    initiallyVisibleFields="ProductName" 
    tableBindingPath="Supplier"/>

But it is not working. Any suggestions?


Solution

  • I have moved a step further. I have added the following code:

    onBeforeRebind: function(oEvent) { var mBindingParams = oEvent.getParameter("bindingParams");
    mBindingParams.parameters["expand"] = "Supplier"; },
    

    well that's it for how using $expand on Smarttables

    Is there any way to display columns from the other entity?

    Only via NavigationProperty. You need to extend your smarttable columns like mentioned bellow:

    <smartTable:SmartTable 
            entitySet="Products"
            tableType="ResponsiveTable"
            header="Products" showRowCount="true"
            enableAutoBinding="true"
            class="sapUiResponsiveContentPadding">
            <Table>
                <columns>
                    <Column width="100px" hAlign="Left">
                        <customData>
                            <core:CustomData key="p13nData"
                                value='\{"columnKey": "p13nDataKey",  "columnIndex":"4", "leadingProperty": "Supplier"}' />
                        </customData>
                        <Text text="{/#Supplier/Name/@sap:label}" />
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <Text
                                text="{Supplier/Name}" />
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </smartTable:SmartTable>