I have searched focal point for this topic but have been unable to find anything. I'm having an issue with stacking reports on top of each other in the html composer. I'm using version 8.1.04

I created a dashboard that drills down into reports. Based on what they want to drill down into, I would like to create a different report based on that selection. For example, I have a line chart that graphs 5 types of items. These items are graphed by dates.

If they select item 1 for a date, I would like to create a report directly below the line chart that gives me information on that item for that date, an accordion report with more specific data. But if they select item 2 for a date, I would like to create an entirely different report for more information - another accordion report, but with different data. And if they select item 3, I would like to create a bar chart and an accordion report for more information.

My issues is that I want multiple reports build into 1 space on the html page based on what has been selected. When I'm trying to do this, I'm having several issues. For the reports that I don't want to see based on the selection, I write a blank line so I don't get the NO DATA error. When my html page runs, I get those blank lines interfering with my "good" report. My bigger problem is that I'm not able to select anything in those reports that are on the bottom layers. Meaning I put reports on top of each other in the html composer. But now those ones on the bottom, I can't get to them to select the + signs to open the accordion on the bottom layered reports or use any scroll bars on those bottom layered reports.

What have others done in these cases? I feel like this is something that I'll need to do in the future and I would imagine others have done as well.

This message has been edited. Last edited by: <Emily McAllister>,

AprilC,

So, if I'm understanding you right, you have a line graph with data points in one iFrame of an HTML page you are creating; and upon click of one of those data points, a set of reports pertaining to that data point's date populate within an accordion panel below?

Second off, how familiar are you with HTML/CSS/Js? Used it much as of yet?

Thirdly, are you in DevStudio or AppStudio?

CoolGuy,

I think you have a good understanding of my process except for my reports that I'm building based on the data point selected in our main line graph. I'm building all of those reports in DevStudio. Then I'm putting them into individual report components (frames) on the html page. For all of those reports I'm using the value of the selected data point to decide if that report should build or not. I either build the report (an accordion or bar chart) or a blank line report. So every one of those report frames on the html page builds either a real report or a blank line report.

I am a little familiar with HTML/CSS/JS. I've used it in the past.

I created my reports in DevStudio using the code. We don't use the GUI for any reports. But for the html, I am using the GUI interface in AppStudio.

You can stack reports/charts on top of one another in HTML (App Studio), then show or hide them using JavaScript based on a user selection.

Thanks Squatch. I was able to use js to turn the reports visible or hidden based on the value of my drilldown selection.

For anyone interested, here is the js function:

function hideBreakDowns() {
if (edit2.value == "Onsite") {
document.getElementById("report3").style.visibility="hidden";
document.getElementById("report5").style.visibility="hidden";
}
else {
document.getElementById("report9").style.visibility="hidden";
}
}

Then I added the call to this js function on the task for the drilldown. I'll be able to add more to this as I add specific reports for the drilldown options.

If you are going to add more reports in the future, you might want to change the "if-else" structure into a "switch" statement:

    switch(edit2.value) {
        case "Onsite": document.getElementById("report3").style.visibility="hidden";
                       document.getElementById("report5").style.visibility="hidden";
                       break;
              default: document.getElementById("report9").style.visibility="hidden";
                       break;
    }

I find this easier than dealing with complex "if-else" structures. You can easily add more "case" statements as you create more reports. Just don't forget the "break" statement at the end of each "case" statement.

Great tip! Thanks Squatch.