Filter menu should collapse on clicking apply button

Technical queries
, , , ,
#1

Hello Helical Insight,

I am using helical insight version 5.0 GA enterprise verson. In dashboard whenever I select a filter value and click apply button filter menu should be collapsed. How can I achieve this functionality?

#2

Hello,

You can achieve this by using below custom js code.
Code :

<script>

let currentURL = window.location.href;

const filterButtonElementChecker = async (elementIdentifier) => {
console.log('hello');
  const checkInterval = 500; // Check every 500 milliseconds
  const maxAttempts = 10; // Try for a maximum of 10 seconds (20 * 500ms)
  let attempts = 0;
  while (attempts < maxAttempts) {
    const el = document.querySelector(elementIdentifier);
    if (el !== null) {
      return el;
    }
    await new Promise((resolve) => setTimeout(resolve, checkInterval));
    attempts++;
  }
  return null;
};

const filterDropFunctionality = async () =>{
if (currentURL.startsWith(`${baseURL}/#/report-viewer?`)) {

window.onload = async function() {
    console.log('Page and all resources are fully loaded');
	let filterButtonEl = await filterButtonElementChecker('ul.ant-menu-overflow.ant-menu.ant-menu-root.ant-menu-horizontal.ant-menu-light.hi-report-viewer-menu > li:nth-child(2)');

   filterButtonEl.addEventListener('click', () => {
    setTimeout(() => {
        let applyButtonEl = document.querySelector('.ant-drawer-header > .ant-drawer-extra > button.ant-btn.ant-btn-primary.ant-btn-sm');
        let closeButtonEl = document.querySelector('.ant-drawer-header > .ant-drawer-header-title > button.ant-drawer-close');

        if (applyButtonEl) {
            applyButtonEl.addEventListener("click", () => {
                closeButtonEl.click();
            });
        }
    }, 1500);
});
   };


  }
}

window.addEventListener("hashchange", async function () {
filterDropFunctionality();
});

filterDropFunctionality();



</script>

Usage:
a. Open loginbody.jsp file (path : .../hi/apache-tomcat-9/webapps/bi-ee/WEB-INF/jsp/login )
b. Paste above JS code in loginbody.jsp file after tag
For reference check below image :

image

According to above image you have to paste the code at line 24 after tag (The line number might be different in your case)

c. After Pasting save the file and hard refresh the Helical Insight page, now if you open a dashboard in new window mode and whenever you select any value in filters and click apply button the filter menu automatically collapses.

As this is applied at the global level it will be applicable to every dashboard.

Thank You,
Helical Insight.