How to display a drill-down/drill-through report in a popup?

Dashboard Designer
#1

Hi,

When using drill-down or drill-through in Helical Insight, is it possible to display the target report in a popup/modal window on the current page , instead of replacing the current report?

If yes, how can this be configured?

Thank you!

#2

Hi Jingxiang,

(A) By default, when using Drill-Through in Helical Insight, clicking on the parent report opens the child report in the same frame, replacing the parent report.

However, the child report can be maximized, in which case it is displayed in a popup/modal-style window along with navigation options to go back, front, very initial state. There is also a maximize option though, wherein the child report which gets rendered there can be maximized (Further reading : Right-Click Operations In Dashboard Designer - Helical Insight and Removing Black Background in Maximize Option in Helical Insight Dashboards)

(B) There is also a second option using the Operations feature at the report level (though this is more tedious and requires more work).
You can refer to the following documentation for configuring Operations: Change Report Properties Dynamically using Operations - Helical Insight

Using Operations, you can write custom JavaScript logic to control how the child report is opened. For example, the JavaScript can:

  1. Capture the value clicked in the parent report.
  2. Pass the clicked value, along with any other required parameter/filterlabel of dashboard & clicked action values, to the child report URL.
  3. Open the child report in a popup/modal window instead of replacing the parent report.

Note: The second approach requires custom JavaScript implementation. It is not a standard drill-through configuration where the child report automatically opens in a modal. The JavaScript needs to be customized according to the parent report, child report, parameters, and URL structure being used.

For example, a basic plain JavaScript approach to open a report in a popup window would be:

function openReportPopup(reportUrl) {
var width = 1000;
var height = 700;

var left = (window.screen.width - width) / 2;
var top = (window.screen.height - height) / 2;

window.open(
    reportUrl,
    "HelicalInsightChildReport",
    "width=" + width +
    ",height=" + height +
    ",left=" + left +
    ",top=" + top +
    ",resizable=yes,scrollbars=yes"
);

}

The reportUrl can be constructed dynamically using the clicked value and other required parameters. For example:

var clickedValue = “ABC123”;

var reportUrl =
“REPORTURL&invoice=” +
encodeURIComponent(clickedValue);

openReportPopup(reportUrl);

The exact report URL and parameter names will depend on the child report configuration. The above is only a generic JavaScript example illustrating the popup mechanism; it would need to be adapted to the actual report and parameter structure.

Thank you

#3

this link will also help in understanding how to pass filter/parameters name and values in URL : Subject: Passing Filter Parameters When Creating a Sankey Diagram Using an API Data Source in Helical Insight - #2 by helicalforum

#4

Hi,

Is it possible to avoid using window.open() to open the child report in a new browser window? With this approach, the new window may still display browser UI elements such as the address/navigation bar.

We would prefer to display the child report in a popup/modal directly within the current Dashboard page, while keeping the original Dashboard unchanged.

#5

Hi Jingxiang,

Yes, this can be achieved within the existing Dashboard page.

You can use the Right-Click Operations available in the Dashboard Designer. This allows you to define custom HTML, CSS, and JavaScript for the Dashboard.

The approach would be:

  1. In the Dashboard Designer, configure the required Right-Click Operation on the parent report.
  2. Use the JavaScript to capture the value/action selected by the user.
  3. Construct the child report URL with the required parameter/filter values.
  4. Create an HTML modal container using the Dashboard’s HTML option.
  5. Use CSS to style the modal and its overlay.
  6. Use JavaScript to load the child report inside an <iframe> within the modal.
  7. Provide a close button to hide the modal and return to the original Dashboard.

The overall flow would therefore be:

Parent Report → Right-Click Operation → JavaScript → Open in-page Modal → Child Report inside Modal

For example, the HTML can contain a modal with an iframe:

<div id="childReportModal" style="display:none;">
    <div class="modal-content">
        <button onclick="closeChildReport()">Close</button>
        <iframe id="childReportFrame"
                width="100%"
                height="700px"
                frameborder="0">
        </iframe>
    </div>
</div>

The JavaScript can then control the modal:

function openChildReport(reportUrl) {
    document.getElementById("childReportFrame").src = reportUrl;
    document.getElementById("childReportModal").style.display = "block";
}

function closeChildReport() {
    document.getElementById("childReportModal").style.display = "none";
    document.getElementById("childReportFrame").src = "";
}

This keeps everything inside the current Dashboard page. No separate browser window needs to be opened, and the original Dashboard remains available underneath the modal.

The exact JavaScript for capturing the clicked value and constructing the child report URL will depend on the parent report, child report, and parameters being passed.

For reference, the Right-Click Operations functionality is documented here:

Right-Click Operations In Dashboard Designer - Helical Insight

Thank you