How to Automatically Hide Accordion Widgets When Clicking on Tabber (Linux)

[Liliia_DevX]

How to Automatically Hide Accordion Widgets When Clicking Outside the Accordion Window (Linux)

Introduction

This article addresses the specific scenario where accordion widgets remain visible even after interacting with other interface elements, such as tabber widgets, in a dashboard environment. 

Step-by-Step Guide

• Integrate a widget Script in the widget edit mode > click the 3 dots menu > Edit Script:

widget.on("ready", function(w, e) {
    var tabs = document.querySelectorAll(".listDefaultCSS > span.listItemDefaultCSS, .listItemContainer > span.listItemDefaultCSS, .listItemContainer.selected > span.listItemDefaultCSS");
    tabs.forEach(function(tab) {
        tab.addEventListener("click", function(e) {
            var accordions = document.querySelectorAll(".bk-accordion");
            var arrows = document.querySelectorAll(".bk-arrow");
            accordions.forEach(function(accrd) {
                if (accrd.style.opacity == "1") {
                    accrd.style.opacity = "0";
                    accrd.style.padding = "0";
                    accrd.style.height = "0";
                }
            });
            arrows.forEach(function(arr) {
                if (arr.style.opacity == "1") {
                    arr.style.opacity = "0";
                }
            });
        });
    });
});

This script will detect clicks on the tabber widgets and hide any visible accordion windows by setting their opacity, padding, and height to zero.

• After adding the script, navigate through your dashboard to ensure that accordion widgets hide as expected when clicking on a tabber widget or other areas.

[ALT Text: A data visualization dashboard displaying a bar graph titled "Profit per Product." The graph shows profit values for different products with values reaching up to 10,000. The total EU profit is indicated as 23,36K, with a profit rate of 49.81%. Tabs for additional analysis are visible at the top.]

Conclusion

By incorporating the provided dashboard script, users can enhance their user interface experience by ensuring accordion widgets automatically hide when interacting with other dashboard elements. Despite the current design limitations regarding the accordion's position, the script offers a viable solution to improve dashboard interactions.

Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this please let us know.