Hi, I'm new to the WebFOCUS world, so this may be an easy solution, if so, I apologize. I'm using the HTML Composer in AppStudio (WF8009) and I'm wondering if there is any way to do an OnClick trigger via the Tasks & Animations pane for when an individual tab is clicked on the tab control. Right now I only see the option to select the windowPanel1 in the trigger list. I was hoping there would be an option select windowPanel1Page_1, windowPanel1Page_2, etc.

I'm essentially just wanting to refresh the reports on each tab when each tab is clicked. Reason being is that we have some charts that do not load and autosize correctly if they are not being viewed while they are loading (hope that makes sense).

I'm not too familiar with JavaScript, so I haven't tried to do it from there either, but I would imagine this could be done. I wasn't able to find anything when I searched as well.

Thanks

This message has been edited. Last edited by: <Kathryn Henning>,

Hi Capples,

I faced the same issue of sizing in the beggining. What I did was remove the tab structure and have the same number of buttons. Then place iFrames on top of each other and hide and show them on the click of buttons you can put charts or entire html files inside the iFrames. I did the latter one. So each iframe has its own submit button now. When you show a particular iframe click its submit button using javascript. Its easy to do than to explain here. If you need some code then let me know I'll share mine.

Thanks,
Gaurav

Thanks for your response Gaurav. It's funny because I actually tried that option when I posted this thread. It did work, but it seemed difficult to maintain through the GUI with everything stacked on top of each other. Nonetheless, I can resort to this option if needed.

Thank you,
Clint

were you folks on IE9 or latter? We just upgraded to IE 11. We are on WF 8008. Our html pages with multiple tabs are a mess. Are you saying this is the case under WF 8.1 as well? Anyone know what version has the bugs worked out? We don't want to re-devleope all this...

The tabs are just HTML DIV elements. Inside these elements there is text that represents the name of your tabs. You can tell the browser to listen for mouse clicks, then test the contents of whatever was clicked on to see if it's one of your tabs. If it is, you can call on the IBI JavaScript function that executes a task.

In JavaScript, information about what the user clicked on is passed to a listening function. You set this function up in the "window_onload" function in App Studio's "Embedded JavaScript/CSS" tab.

This example assumes two tabs, each with a chart inside of it. The tab names are "Chart 1" and "Chart 2":

//Begin function window_onload
function window_onload() {

    UpdateData();

// * * * Listen for mouse clicks * * *
// Tabs are titled "Chart 1" and "Chart 2"
document.addEventListener('click', function(e) {
    // Get event object for IE or non-IE browsers
    e = e || window.event;
    var target = e.target || e.srcElement;

    // Get contents of HTML element that was clicked on
    text = target.textContent || text.innerText;

    // Call IBI function to execute the task that refreshes the chart
    switch(text) {
        case "Chart 1": IbComposer_triggerExecution("task2",1); break;
        case "Chart 2": IbComposer_triggerExecution("task3",1); break;
    }
}, false);

}

quote:

Reply

..appreciate that...not sure I fully understand it...just want the tool to work without getting into the code...which we were warned not to do!

You just need to copy and paste the code into the "Embedded JavaScript/CSS" tab (If you are using App Studio).

Then add as many "case" lines in the "switch(text)" part of the code as you have tabs. In the quotes after the "case" word put the names of your tabs from the design view, and make sure the task name (also in quotes) is the task you want to run when that tab is clicked.

heck I'll try anything....why doesn't the product work though! (rhetorical)

what would the 'task' be....I want each graph to refresh itself....apparently a second time!

Still a little confused...The main HTML page tab has selection controls (drop down boxes for user selction) and a run button. The run button's hyperlink properties call a dozen or more graphs spread over 3 tabs to refresh....the refreshed graph's on the 2nd and 3rd tab appear jumbled...until I right click refresh each one manually...is this is what the 'task' needs to do....refresh each graph on that page? How do I do that...surely I am not rerunning all the fexes?

quote:

Originally posted by RobertF:
what would the 'task' be....I want each graph to refresh itself....apparently a second time!

Still a little confused...The main HTML page tab has selection controls (drop down boxes for user selction) and a run button. The run button's hyperlink properties call a dozen or more graphs spread over 3 tabs to refresh....the refreshed graph's on the 2nd and 3rd tab appear jumbled...until I right click refresh each one manually...is this is what the 'task' needs to do....refresh each graph on that page? How do I do that...surely I am not rerunning all the fexes?

Sorry, I did not explain the task setup part of this.

When setting up graphs, by default App Studio puts the "Requests/Actions" that loads the graphs into the "load" event under "Tasks & Animations". There will be one Request/Action per graph. So at load time, all graphs are loaded.

The problem the original poster was facing was that inactive tabs were sizing the graphs wrong. So when a user clicked on an inactive tab to make it active and see the graphs, the display was not correct. Since the load only happens once, the graphs need to be refreshed when the tab is made active via a mouse click.

To do that refresh, under "Tasks & Animations" you can create new tasks for the graphs and then trigger them (using JavaScript) to run when a tab is clicked. So say I have three tabs with four graphs on each tab page. I would create three new tasks: let's call them "task2", "task3" and "task4". The "Trigger Type" for each is "TBD". Each of these tasks would have four "Requests/Actions", one to load each of the four graphs on that tab page. The "Target type" would be "Frame", and the "Target/Template Name" would be the graph name (Something like "chart1" or "chart2" or "chart3", etc.).

So once those are set up in "Tasks & Animations", the JavaScript code would look something like this (Assuming the tab names are "Tab 1", "Tab 2" and "Tab 3"):

//Begin function window_onload
function window_onload() {

    UpdateData();

// * * * Listen for mouse clicks * * *
// Tabs are titled "Chart 1" and "Chart 2"
document.addEventListener('click', function(e) {
    // Get event object for IE or non-IE browsers
    e = e || window.event;

    // Get HTML element that was clicked (Tabs are HTML DIV elements)
    var target = e.target || e.srcElement;

    // Get contents of HTML element that was clicked on
    text = target.textContent || text.innerText;

    // Call IBI function to execute the task that refreshes 4 charts on that tab page
    switch(text) {
        case "Tab 1": IbComposer_triggerExecution("task2",1); break;
        case "Tab 2": IbComposer_triggerExecution("task3",1); break;
        case "Tab 3": IbComposer_triggerExecution("task4",1); break;
    }
}, false);

}

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

alas we do not use App studio! Thanks though..interesting...

quote:

Originally posted by RobertF:
alas we do not use App studio! Thanks though..interesting...

I'm not familiar with the other IBI development tools, but it is probably possible to do this with those tools as well.

we opened a case...to be honest BI is the development tool....developing around tool bugs was not part of the deal! Hopefully they have a solution to our issue, if we need to upgrade to a latter version of WF then that's on us....thanks for your time though!

quote:

Originally posted by Squatch:
The tabs are just HTML DIV elements. Inside these elements there is text that represents the name of your tabs. You can tell the browser to listen for mouse clicks, then test the contents of whatever was clicked on to see if it's one of your tabs. If it is, you can call on the IBI JavaScript function that executes a task.

In JavaScript, information about what the user clicked on is passed to a listening function. You set this function up in the "window_onload" function in App Studio's "Embedded JavaScript/CSS" tab.

This example assumes two tabs, each with a chart inside of it. The tab names are "Chart 1" and "Chart 2":

//Begin function window_onload
function window_onload() {

    UpdateData();

// * * * Listen for mouse clicks * * *
// Tabs are titled "Chart 1" and "Chart 2"
document.addEventListener('click', function(e) {
    // Get event object for IE or non-IE browsers
    e = e || window.event;
    var target = e.target || e.srcElement;

    // Get contents of HTML element that was clicked on
    text = target.textContent || text.innerText;

    // Call IBI function to execute the task that refreshes the chart
    switch(text) {
        case "Chart 1": IbComposer_triggerExecution("task2",1); break;
        case "Chart 2": IbComposer_triggerExecution("task3",1); break;
    }
}, false);

}

thanks Squatch.This works beautifully.
But what If I have multiple Accordion or TABS with the same Page Title.
eg. Accordion1 has 3 pages.. Title: Page1,Page2,Page3
and Accordion2 also has 3 pages..Title: Page1,Page2,Page3

How to differentiate which Accrdion /Page1 was clicked.

Thanks

I think I figured it out I can simply add
document.getElementById("windowpanel1").addEventListener.....


document.getElementById("windowpanel2").addEventListener.....


Thanks again for your help