Focal Point
[SOLVED] BIP tabbed container interaction with panel container

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/4997098176

July 28, 2014, 06:29 AM
mart
[SOLVED] BIP tabbed container interaction with panel container
Hello all,

I have tried to search but did not find an answer to my problem.

I have the following. In BI Portal I created a page, on that page I added one tabbed container. Under the tabbed container I added one panel container with the name "report_results". Let's say there are 3 tabs and each tab contains one html that has report parameters and a "Run" button for a certain report. The result of the report is displayed into that panel container "report_results". This all works fine when I open up a portal click on the needed tab select the parameters and hit Run. The report is displayed in the correct place.
My problem with this is that when you change the tab then the result of the last report is still displayed in the "report_results" panel.

Does anybody know is there any way possible to clear that "report_results" panel on tab change in the portal? Or maybe there is some other way to for example assign a separate panel for every tab?
Because right now as I understand then the panel is connected to the portal page and knows nothing about the tabbed container tabs.

Thanks in advance,
Mart

WebFocus version is 8002

This message has been edited. Last edited by: <Kathryn Henning>,
July 31, 2014, 05:25 PM
<Kathryn Henning>
Hi Mart,

Welcome to Focal Point!

Is the panel container named "report_results" on each of the 3 tabs? If so, try changing them to unique names.

Thanks and regards,

Kathryn
August 01, 2014, 05:09 AM
mart
Hi Kathryn,

Thanks for having me here Smiler

Thank you for the suggestion. I have tried this but I did not find out how to put a Panel container inside a Tabbed container. I guess it is allowed to put only one fex of html or some other resource under each tab.




So this is how it currently looks like (tried my best with the Paint). As it can be seen then under each tab there is a similar html page with parameter options to choose. I painted the Panel 1 to red because currently to me it seems that Panels are connected to pages.

If someone could point me to a solution or correct path to how can I clear that content area (named: "report_results") of "Panel 1" then this would help a lot.

The only place I saw this kind of functionality is when you are developing reports with DevStudio and you run the report there. If configured then you get the report in IE and there is a button "Clear content" under the parameters section. Unfortunatly I have not been able to track down how it functions.

Mart
August 11, 2014, 01:27 PM
<Kathryn Henning>
Hi Mart,

I consulted with several coworkers for the best way to accomplish this. To get the behavior that you want cannot be done in Portal designer alone. The ‘click tab’ event has to be captured so it triggers JavaScript that will empty the report output panel.

The event capture can be done in the HTML Composer. Create the 3 tabs with referenced reports in Composer. Add the JavaScript to clear the output panel:

document.frames['panel_name'].src = "about:blank";

In Portal designer, create a new page. Add the HTML page and create a new panel for output.

You can add the JavaScript alert function to tab#1’s click event:

//Begin function tabitem1_onclick
function tabitem1_onclick(ctrl) {
window.alert("You clicked?");
}
//End function tabitem1_onclick

Cheers!

Kathryn
September 09, 2014, 04:53 AM
mart
Hi Kathryn,

I appreciate the help.
I tried to make this solution work but I guess my javascript knowledge that goes together with WF is not that high. I got the alerts working just fine but the panel cleaner basically does nothing.
I even tried to do it with a button that just cleans a panel but nothing.

Another thing that I got stuck with this is when I have two panels (one is the HTML witch holds the tabs and the other is the report output) then I did not find a way to make the panels span over the screen automatically. I can fix the dimensions for those panels and when I tell one panel to maximize then it covers the whole page, the other panel does not show at all.

I'm still learning to know this WF world and capabilities.

Thanks for helping.
Mart

Edit: Just to let everyone know then I got this thing working. Basic solution was the same that was written by Kathryn. The only thing which I was not familiar with was Javascript. In order to reference the correct frame you need to make the code look like this: parent.document.frames['panel_name'].src = "about:blank";

Because you need to reference a frame outside the html that has the tabs. Otherwise JS does not know anything about that frame.
So what it's worth then this topic can be named [SOLVED]

Thanks again for the help Smiler

This message has been edited. Last edited by: mart,