Simple smart filter bar example

Question

I am trying to implement smart filter bar on top of my smart table. My smart table contains a simple table, which is having calculated fields from formatter.js

<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="/abc">
    <smartFilterBar:controlConfiguration>
        <smartFilterBar:ControlConfiguration key="Order" label="ProdOrder">
            <smartFilterBar:customControl>
                <Input id="Order" placeholder="Order"/>
            </smartFilterBar:customControl>
        </smartFilterBar:ControlConfiguration>
    </smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="smartTable_ResponsiveTable" smartFilterId="smartFilterBar" tableType="ResponsiveTable" entitySet="abc"
    enableAutoBinding="true" showRowCount="true">
    <smartTable:customData>
        <core:CustomData key="p13nDialogSettings" value='{filter:{visible:false}}'></core:CustomData>
    </smartTable:customData>
    <Table id="table" width="auto" class="sapUiResponsiveMargin">
        <columns>
            <Column id="idColumnOrder" customData:p13nData='\{"leadingProperty":["ManuOrder"]}'>
                <Text text="{i18n>order}" id="order" tooltip="{i18n>order}"/>
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <ObjectIdentifier class="sapUiTinyMarginTopBottom" title="{ManuOrder}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</smartTable:SmartTable>

However, somehow my smart filter is not working. I googled a lot but can not find solution. Can someone tell me whats wrong or can share any example of how to properly implement smart filter?

thanks in advance :)

Solution

When using a SmartTable instead of a regular Table, assign the SmartFilterBar an id, and then set the property smartFilterId equal to the id of the SmartFilterBar. Then the searching and filtering happens automatically.

<smartFilterBar:SmartFilterBar id="smartFilterBar"...>
...
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable smartFilterId="smartFilterBar"...>
...
</smartTable:SmartTable>

Or, if you use a regular Table like the code you provided, you'll have to use the controller to get the filters and use them to filter the binding of your table. You need to bind your table to an entity set first (or to a property in a JSON model if that's what you're using), and add an event handler for the search event of the SmartFilterBar.

In your view:

<smartFilterBar:SmartFilterBar id="smartFilterBar" search="onSearch"...>
...
</smartFilterBar:SmartFilterBar>
<Table id="table" items="{/entitySetName}"...>
...
</Table>

In your controller:

onSearch: function() {
    var aFilters = this.getView().byId("smartFilterBar").getFilters();
    this.getView().byId("table").getBinding("items").filter(aFilters);
}