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);

Did you know that with WEBCON you can automate virtually any process? Even baking cookies 🍪
 
Speaking of cookies: we use the ones that are essential for our website to function properly, as well as additional ones that help us customize our content to your preferences. If you don’t mind cookies, click Accept. If you want to learn more, explore settings.
Settings