XPages: Make categorized views behave

The current implementation of categorized views gives a table column to each column. In most cases, you probably don't want this. The code below makes the categories look more like nested sections.

The code is requires Dojo 1.4, which is bundled with Domino 8.5.2. To make it compatible with previous versions, you'd have to exchange categoryButtons.closest( 'tr' ) with code that walks up the DOM tree until it finds a tr-node.

function transformCategorizedViews(){
 // Needed for dojo.NodeList.closest()
 dojo.require("dojo.NodeList-traverse");

 var categoryButtons = dojo.query( '.xspDataTable button[title=collapsed], .xspDataTable button[title=expanded]' );

 // Get parent row/find all the empty cells before expand/collapse button
 categoryButtons.closest( 'tr' ).forEach( function( row ){
  var colspan = 1, cell, cells = row.cells;

  // No need to modify single cell rows
  if( cells.length === 1 ){ return; }
  for( var i = 0; i < cells.length; i++ ){
   cell = cells[i];

   // Hide empty cells/set colspan to the category equal to hidden cells
   if( cell.innerHTML === '' ){
    colspan += 1;
    cell.style.display = 'none';
   } else {
    cell.setAttribute( 'colspan', colspan );
    cell.style.paddingLeft = (30 * (colspan - 1) ) + 'px';
    break;
   }
  }
 });
}

Since categorized views use partial refresh, you'll need something like my partial refresh hijacker.

Here's how to use the above code with the hijacker:

dojo.addOnLoad(function(){
 // Run on load
 transformCategorizedViews();
 // Run on partial refreshes
 dojo.subscribe( 'partialrefresh-complete', transformCategorizedViews );
});

Share and enjoy!