Opening the drill down report in the same frame and adding a back link to navigate back to the parent report

Hi Helical Team,

We are going to use Helical Insight within our application. Now we want to have drill down functionality but the drill down report should open in the same frame (not in new tab since we are using in integration mode). when the child report has opened in the same window we should have a back button kind of feature allowing to navigate back to the previous report. How can that be done?

Thank You.

Hi Shwetant,

Open the parent report and create the child report with the required filter.

In the parent report, in the JS tab, append the below code. In the last line in the windows. open provide the URL of the child report between window.open(" and &mode=dashboard. After &mode=dashboard will come the name of the filter. For instance in the below JS the name of the filter which we are triggering is upt_day and the name of the child report which we are triggering is hi.html?dir=sales-reports&file=05bc0c7d-be15-421b-80d7-62a3cb23c3b4.report

hi_container.set("preExecution",function(c){

var viz_Options = c.get("viz_Options");



viz_Options.chartOptions.data = {

onclick: function(d,i) {
var xticks = hi_container._values.c3Chart.internal.config.axis_x_categories
var xtick_clicked = xticks[d['index']]
reportRender(xtick_clicked);

}

};

c.set("viz_Options",viz_Options);

});

function reportRender(value) {
window.open("hi.html?dir=sales-reports&file=05bc0c7d-be15-421b-80d7-62a3cb23c3b4.report&mode=dashboard&upt_day="+value, "_self");
}

image

Note: **The above code is implemented on axis charts. Similarly, you can implement it on tabular reports **
Now when you click on the report the child report will get opened in the same panel.

In order to add the BACK button in the child report open the child report in edit mode and below JS for functionality.

var goBackButton=document.createElement("button");
goBackButton.innerHTML="Go Back";
goBackButton.setAttribute('type', "button");
goBackButton.setAttribute('class', "button_cls");
goBackButton.onclick=function(){
document.location.href = 'hi.html?dir=uptycs-reports&file=a96540ae-cd52-474f-9c1e-4136a3daac69.efw&mode=dashboard';
};
document.body.append(goBackButton);

Add below CSS for the button look and feel

.button_cls{ background-color: skyblue;
color: white;
cursor: pointer;
position: absolute;
margin-top: 0px;
top: 0px;
margin-left: -1px;
border-radius: 3px;
padding: 2px 6px;
font: bold 15px calibri}
#main{ padding: 30px 0px;}

.button_cls{
left:10px;
}

image

Thank You
Helical Insight Team.