Drop down filter on widget in Portal

[odahum]

Hey,

Has anyone created a set of drop downs to filter a data table widget in service portal before?

The OOTB filtering presents the user with too many choices. I need to define a set of choice list fields that the user can filter on like so:

This is basically the same functionality as interactive filters in reports, except I want it on a table in Service Portal instead.

 Thanks!

[SVimes]

I accomplished this by enabling the filters on the data table widget (cloned and customized OOB widget), adding the filters needed, and applying CSS on the page to hide add/remove filter buttons and disable click events on the selected filters/breadcrumbs (can still change operators and values.)

//hide several add/remove filter buttons
.remove-conditions-row {
  display: none;
}
.add-conditions-row {
  display: none;
}
.new-criteria {
  display: none;
}
.filter-footer {
  display: none;
}
.filter-header span {
  display: none;
}
//disable being able to change which columns are being filtered
.field-list-button {
  pointer-events: none;
}
//hide dropdown triangle icon
.glyphicon.glyphicon-triangle-bottom {
  display: none;
}
//disable click events on breadcrumbs
.sp-breadcrumb-link.sp-breadcrumb-remove-condition.ng-scope:first-child {
    pointer-events: none;
}

This is what it ends up looking like:

This does still allow the end user to filter out and show matching from the data table itself.