Jorge Solá 11/27/2024 6:22:36 AM Here is a script to ensure that grouped record rows in grouped views are initially collapsed. When the small triangle by the group header is clicked, it toggles the visibility of the corresponding group of rows. To enable it, simply add it to your dbscript.js file in Resources:
// Function to apply the toggle behavior to group headers
function applyGroupHeaderToggle(container) {
// Select all group header rows within the specified container
const groupHeaders = container.querySelectorAll('.v3-tableview-grouphead');
groupHeaders.forEach(header => {
// Check if the triangle toggle already exists to avoid duplicates
const headerLeftCol = header.querySelector('.v3-tableview-grouphead__col-left');
if (headerLeftCol && !headerLeftCol.querySelector('.toggle-icon')) {
// Create a small triangle to prepend to the header's left column
const toggleIcon = document.createElement('span');
toggleIcon.textContent = "▶"; // Collapsed state icon
toggleIcon.className = "toggle-icon"; // Add a class to identify the icon
toggleIcon.style.cursor = "pointer";
toggleIcon.style.marginRight = "8px";
// Initially collapse the group rows
const groupRows = header.nextElementSibling;
if (groupRows && groupRows.classList.contains('v3-tableview-group')) {
groupRows.style.display = "none"; // Hide group rows by default
}
// Prepend the triangle icon to the left column of the header
headerLeftCol.prepend(toggleIcon);
// Add click event listener to toggle visibility of group rows
toggleIcon.addEventListener('click', function () {
if (groupRows && groupRows.classList.contains('v3-tableview-group')) {
if (groupRows.style.display === "none") {
// Expand the group
groupRows.style.display = "";
toggleIcon.textContent = "▼"; // Expanded state icon
} else {
// Collapse the group
groupRows.style.display = "none";
toggleIcon.textContent = "▶"; // Collapsed state icon
}
}
});
}
});
}
// Initial application of the toggle behavior to the entire document
document.addEventListener("DOMContentLoaded", function () {
applyGroupHeaderToggle(document);
// Set up a MutationObserver to watch for dynamically added content
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// Check for added nodes
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) { // Ensure it's an element node
// Apply the toggle behavior to the new content
applyGroupHeaderToggle(node);
}
});
});
});
// Observe changes in the body for added nodes
observer.observe(document.body, {
childList: true,
subtree: true
});
});
If you are using the new UI, you can add the same script to your dbscript-v3.js file.
Enjoy!
| 
