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.
IntroductionSometimes 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. PrerequisitesA 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 setupRight 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 entityHere’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 namespacesMake 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 beforeRebindTableAdd 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 selectionsonBeforeRebindTable: 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 outReload 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. ConclusionBy 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. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
