How to update the total count when filtering the columns of an optimized table

User Experience Knowledge Share
, , ,
1

There is no easy way on the server to update the pxResultCount property when applying a filter on an optimized table because the filtering is done at runtime and does not impact the data page itself

This document explains how to update the total result count when applying a filter by running a javascript function everytime the table is updated. This count is available in some of the grid context and some custom JS is required to achieve this functionality

Note that this was tested on 8.7 and uses some not public context that might change with a new platform upgrade

The attached ruleset showcase a demo using the MyWorkList page available with Theme-Cosmos

demo3.png
demo3.png3584×1546 374 KB

1/ Create a new section that will include the custom code - this section will be loaded only when the table is loaded

Note that the selector to update the count will need to be tweaked - you can add a helper class on the display Text - in the demo, I am looking the elements by the section name and the format of the display text.

demo2.png
demo2.png1746×1302 294 KB

Here is the code snippet


```
<script>
  pega.u.d.attachOnload (function() { 
    var gridEl = document.getElementById("PEGA_GRID_CONTENT");
    if(gridEl && pega.ui.TemplateEngine && pega.ui.TemplateEngine.getClientDataProvider()) {
      var dp_name = gridEl.getAttribute("pl_prop").replace(".pxResults","");
      var tbl = pega.ui.TemplateEngine.getClientDataProvider().trackedPropertiesList[dp_name];
      if(tbl && tbl.$pxFilters) {
        var count = Object.values(tbl.$pxFilters)[0].$pxSize; 
        if(count) {
          /* You will need to adjust this selector to locate the element showing the count */
          var el = document.querySelector("div[node_name='SearchResults'] .table_search");
          if(el) el.text = count;
        }
      }
    }
  }, true);
</script>
```

2/ Add the custom section after the optimized table - make sure that the table has filtering enabled on the column

demo1.png
demo1.png2510×1016 230 KB

Here is a demo of the functionality

demo4.gif

GridCountDemo.zip (49.7 KB)

2

Hi @RichardMarsot

Thank you for sharing this. I was able to use the JS and achieve desired result with single Table Grid on the screen. But when I try with multiple table grids on same screen having the custom JS section underneath each of the Table Grids, it does not update the Result count on second or third table grid.

If I switch the position of second table grid to above first table grid then it works for second but stops working on first.

Please let me know your thought how can resolve this.

Thank you

3

@AjitT017 this doc was just focused on a single table in a page and did not attempt to be reusable for other use cases where you have several tables on the page - the best would be to put this function in a JS file and attach it to the portal harness - that would avoid loading the same code over and over again - the 2nd change needed would be to identify the table that the function is currently attached too so that the gridEl is the table that the script is trying to update - Supporting this configuration would require significant update to the script above which was not the purpose of this topic.

4

@RichardMarsot

I have exact same requirement. However, I don’t suppose this will work on tables which are paginated right? All the data is not loaded in the HTML.

5

@RichardMarsot

How would this script change for an optimized table with a pagelist instead of a data page? I tested it, and it isn’t working; it seems the table is not able to be defined.

6

@PEGAFREAK correct - this will not work for paginated DP - all the rows must be available in the client for the count to be accurate - the use case was for a User worklist and it is usually small enough (less than 100 items) that it does not need to be paginated.

7

@JC_Romero likely the query selector will be different but you should be able to achieve the same outcome with some small tweaks in the JS code