Home > Forum > Forms > Item list group collapsed by default

Item list group collapsed by default
0

MVP

Hi everyone,

I have an item list with grouping on one column. I'd like to have this column group collapsed by default. How would I do that? JavaScript? Please consider I'm no js expert so any piece of code or a completely different approach would be much appreciated.

Thanks,
Martin

MVP

Hi Martin,

sorry it took a while until I had a similar use case. You can use this code in a Form Rule of type JavaScript mode. The only thing you need to change is the parameters in the last line:
#{WFCON:2800}# < The id of the item list field form the Objects tab.
true/false < will either collapse only the first or all groups.

Remark:
This will only work, if the item list is displayed on page load. If it's part of a tab, which is not displayed, this won't work

Best regards,
Daniel


// If ccls exist assign it to ccls, if it doesn't (||) exist, create an new object (namespace)
ccls = window.ccls || {};
// create a new object for our function
ccls.collapseGroup = {};
// Set base timeout settings
ccls.collapseGroup.Timeout = 0;
ccls.collapseGroup.TimeoutMax = 4;

ccls.collapseGroup.execute = function (itemListId, firstGroupOnly) {
// Start debugger, if debug parameter is set via query parameter.
if (new URLSearchParams(document.location.search).get("debug") == 1) {
debugger;
}
ccls.collapseGroup.Timeout++;

// verify that the attachment element exists
var items = $(".ms-Icon--ChevronUp",$("#SubElems_"+itemListId));
if (items == null || items.length == 0 ) {
// as long as we didn't reach the maximum number of timeout calls, create another one.
if (ccls.collapseGroup.Timeout <= ccls.collapseGroup.TimeoutMax) {
// the execute function will be executed again in 333ms
setTimeout(function (){ccls.collapseGroup.execute(itemListId, firstGroupOnly);},333)
}
return;
}

// item exists, implement the required action
if (firstGroupOnly) {
items[0].click()
}
else{
for (i = 0; i < items.length;i++) { items[i].click();}
}
};

ccls.collapseGroup.execute(#{WFCON:2800}#,false);