[[{“value”:”
Introduction
Sometimes a regular Smart Filter isn’t enough ,especially when the field values are case-sensitive.
By switching to a Smart MultiComboBox filter, we can let users pick multiple exact matches from a predefined list, avoiding case-related headaches and making filtering faster.
Prerequisites
- A CAPM entity your Smart Table is bound to.
- A group-by view or entity that will return distinct values for your filter field.
Step 1: Understanding the current filter setup
Right now, your Smart Filter Bar probably has a multi-value token input for status.
We’re going to replace that with a MultiComboBox so users can simply tick the statuses they want, without worrying about typing the exact case.
Step 2: Create the dropdown source entity
Here’s an example CDS view to provide unique status values:
entity StatusDropDown as
select from mlc.Employees {
key status
} group by status;
- key status → Marks status as the unique identifier in the list.
- group by status → Ensures we only get distinct statuses (case-sensitive).
- This becomes the data source for the MultiComboBox items.
Step 3: Add XML namespaces
Make sure your XML file includes:
xmlns:smartfilterbar=”sap.ui.comp.smartfilterbar”
xmlns:smartField=”sap.ui.comp.smartfield”
xmlns:core=”sap.ui.core”
Step 4: Replace smart filter with a Smart MultiComboBox
<smartfilterbar:ControlConfiguration
key=”status”
index=”30″
label=”Status”
visibleInAdvancedArea=”true”
filterType=”searchExpression”
groupId=”_BASIC”>
<smartfilterbar:customControl>
<MultiComboBox
id=”StatusDropDown”
items=”{path: ‘/StatusDropDown’, sorter: {path: ‘status’}}”>
<items>
<core:Item key=”{status}” text=”{status}” />
</items>
</MultiComboBox>
</smartfilterbar:customControl>
</smartfilterbar:ControlConfiguration>
- We bind the MultiComboBox to the /StatusDropDown entity.
- The status field is both the key and display text.
- Sorting ensures the list looks organized.
Step 5: Hook into beforeRebindTable
Add this in your Smart Table XML:
beforeRebindTable=”onBeforeRebindTable”
Step 6: Import libraries in your controller
“sap/ui/model/Filter”,
“sap/ui/model/FilterOperator”,
Step 7: Filtering logic for multiple selections
onBeforeRebindTable: function (oEvent) {
const oBindingParams = oEvent.getParameter(“bindingParams”);
const aStatus = this.getView().byId(“StatusDropDown”).getSelectedKeys();
if (aStatus && aStatus.length > 0) {
const orFilters = aStatus.map(status =>
new Filter(“status”, FilterOperator.EQ, status)
);
oBindingParams.filters.push(
new Filter({ filters: orFilters, and: false }) // OR logic
);
}
}
Step 8: Test it out
Reload the app, open the filter bar, and you should see your MultiComboBox instead of the regular filter.
Pick a few statuses and the table should only show matching records.
Conclusion
By converting a multi-value Smart Filter into a Smart MultiComboBox, we:
- Gave users the flexibility to select multiple exact matches without typing.
- Avoided case-sensitivity issues by letting the system pull valid values directly from the backend.
- Made the filtering process faster and more reliable for real-world datasets where values like Active, active, and ACTIVE might all exist.
This approach is clean, reusable, and works seamlessly with Smart Table + Smart Filter Bar setups in SAPUI5.
“}]]
#abap