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

Privacy overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognizing you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.


To see a full list of the cookies we use and learn more about their purposes, visit our Privacy Policy.