Facet filter is a very cool filter control which can be used in crowded tables. Unlike column filter in grid table, it allows multi selection.
During the usage of facet filter, you might notice that after selecting values, the content is not dynamically populated based on the filtered rows. By default, there is no direct connection between facet filter content and the filtered table content.
What we are going to do is, we will implement Lodash library and pre-populate facet filter content dynamically based on table content. Lodash is javascript library which contains functions that makes it easier to work with arrays and I really cannot imagine my UI5 programming without it. Whenever you feel terrified, petrified, mortified, stupified or stressed and depressed, just open a code playground and fix some complex array scenarios with Lodash :).
I am going to demonstrate it by using codepen which my another code playground tool. It allows you create folder structure and include third party libraries without any issue.
Content of facet filter data looks something like this;
Below is a the detail of attributes;
JSON content of the facet filter should be as below;
We are going to populate our facet filter after our rows are populated. For this purpose, we are going to use attachChange event of the table binding after rendering.
onAfterRendering: function() {
var bind = this.getView().byId("idProductsTable").getBinding("items");
bind.attachChange(this.RowBindingChange);
},
For filtering, sorting or after any row binding change, method “RowBindingChange” will be triggered. onAfterRendering will be triggered only once after page is rendered so please don’t confuse. What makes our function always to be triggered is “attachChange” event.
After each RowBindingChange event triggered, our algorithm will follow below steps;
RowBindingChange: function(oEvent) {
var that = this;
var data = [];
// get binded rows into data!
var oList = oEvent.getSource().oList;
$.each(oEvent.getSource().aIndices, function(a, b) {
data.push(oList[b]);
});
// facet configuration
var filter_header = [];
//filter products. column name is Name in our JSON content for that array
//we will use FILTER_ID during filtering. Generally it is better to use ID here rather than description
var filter_product = {
COL: "Name",
FILTER_ID: "Name",
FILTER_NAME: "Name"
};
// add supplier as well
var filter_supplier = {
COL: "SupplierName",
FILTER_ID: "SupplierName",
FILTER_NAME: "SupplierName"
};
// facet header configuration. TITLE is what users will see on top. FACET_ID will be used during filtering and values will be shown to user.
var filter_product_header = {
FACET_TITLE: "Products",
FACET_ID: "Name",
VALUES: filter_product
};
var filter_supp_header = {
FACET_TITLE: "Suppliers",
FACET_ID: "SupplierName",
VALUES: filter_supplier
};
//populate config!
filter_header.push(filter_product_header);
filter_header.push(filter_supp_header);
// FACET_BUILD for title and values
function FACET_BUILD(IV_FACET_TITLE, IV_FACET_ID, IT_VALUES) {
var result = {
FACET_TITLE: IV_FACET_TITLE,
FACET_ID: IV_FACET_ID,
VALUES: IT_VALUES
};
return result;
}
//We need to get unique rows with Lodash from the table rows [obj parameter].
//and return in proper structure.
function FACET_GET_VALUES(IV_COL, IV_FILTER_ID, IV_FILTER_NAME, obj) {
var result = _.map(_.uniqBy(obj, IV_COL), function(item) {
return {
FILTER_ID: item[IV_FILTER_ID],
FILTER_DESC: item[IV_FILTER_NAME]
};
});
return result;
}
var FACET_FILTER = [];
// prepare values for filter
_.each(filter_header, function(obj) {
var FACET_VAL = FACET_GET_VAL(
obj.VALUES.COL,
obj.VALUES.FILTER_ID,
obj.VALUES.FILTER_NAME,
data
);
//populate final data!
var FACET_HEADER = FACET_GET_HEADER(
obj.FACET_TITLE,
obj.FACET_ID,
FACET_VAL
);
//collect
FACET_FILTER.push(FACET_HEADER);
});
// finally update model!. It is better not to use global models but this is for test purpose.
sap.ui.getCore().getModel().setProperty("/FACET_FILTER", FACET_FILTER);
console.log(FACET_FILTER);
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
5 | |
5 | |
4 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 |