Put the topmost record of a group in the corresponding collapsible row

[TroubleShooter]

Hi,

 

I hope the title speaks for itself. It's a bit difficult to explain in words so I'll just present it visually.

 

So I have this Tabular Report DataPage with Grouping and Aggregation.

 

 

What I wanted to do is to be able to pull the first record and put it in it's corresponding collapsible column. As demonstrated above.

And I hope it will remain that way even if I collapse the whole row.

 

 

 Calling out the masters in customization. I hope you hear my call of help.

 

Many thanks in advance,

TroubleShooter

[DefinitelyNot31337]

Hello once again TroubleShooter,

 

You ask such challenging/brain-teasing problems. Luckily I had my power-ups tonight and I am up for this challenge.

I am able to find a somewhat viable solution.

 

I hope the code speaks for itself too. *kidding*.  So paste>modify these code snippets in their respective places. Make sure that HTML Editor is disabled from the advanced tab.

 

Note: This only works for Level1 Grouping and it works best if you put the title (i.e. details) field in the end. I need more time to customize this solution further. 

 

Header

<script>

var init = [];
var temp = (new Date).toLocaleString() + "1AmD3f1n1t3lyN0t31337!";
  
function comparaPush(groupByField, titleField) {
  if (temp != groupByField)
  init.push(titleField);
  
  
var temp = groupByField;
  
}

</script>

 

HTML Block (*modification needed) [Regarding placement, there's only one room for error. 1/#OfFields]

<script>
  
var groupByField = "[@field:category]"; //This is your Grouping Field
var titleField = "[@field:details]"; //And this is your Title Field. The one that you'd be putting on your collapsible row
  
comparaPush(groupByField, titleField);

</script>

 

Footer

<script>

var groups = document.querySelectorAll(`[data-cb-name="group1"]`);

groups.forEach(rowalize);

function rowalize(elem, idx) {
elem = elem.firstChild;
elem.colSpan-=1;


elem.insertAdjacentHTML('afterend', `<td class="cbResultSetGroup1Label cbResultSetGroup1LabelCellNumberDate">${init[idx]}</td>`)

}


</script>

 

Hope this works for you. Happy Hacking!

Cheers,
DN31337