Group By on List gets removed when Filter is applied using filter component in Workspace(UI Builder)

[YuvrajS17678636]

Records are grouped by "Task Group"

After applying filter on the using filter component,

The group by is removed

How to keep the group by "Task Group" always applied ?

This is a custom page created using UI Builder with only list component and some filter components on the top as quick filters for user.

[Yashsvi]

Hi @YuvrajS17678636,

When applying a filter in the Workspace (UI Builder) of ServiceNow, the Group By setting on a list can be retained by using the following steps:

1. Check Filter Configuration: Ensure that the filter component is not unintentionally overriding the Group By setting.

2. Update Data Source: Make sure the data source retains the Group By settings.

3. Use Event Handlers: Add an event handler to listen for filter changes and reapply the Group By setting.

Here's a concise example script to retain the Group By setting:

function retainGroupBy() {
  var listElement = document.querySelector('your-list-element-selector');
  var groupByField = 'your-group-by-field';
  
  listElement.addEventListener('filterApplied', function(event) {
    var filterConditions = event.detail.filterConditions;
    
    // Reapply the Group By setting
    listElement.setAttribute('group-by', groupByField);
    
    // Reapply the filter conditions
    listElement.setAttribute('filter', JSON.stringify(filterConditions));
  });
}

// Initialize the function
retainGroupBy();

Replace 'your-list-element-selector' with your list element selector and 'your-group-by-field' with the field you want to group by.

Thank you, please make helpful if you accept the solution. 

[YuvrajS17678636]

Filter Component : Filter Component Documentation 
using the configuration and script from documentation 

List Component : configured the table name manually, avoided data source binding

Meanwhile, I am trying to figure out where to put that script because 'document" object is not available at most places.