Home » Tips and Techniques » Clearing the Dashboard

Clearing the Dashboard

in


Clearing the Dashboard

By Tom Flynn
Scenario:

We have a Dashboard page with 4 frames:

IFRAME1 = Bar Graph
IFRAME2 = Pie or Bar Graph
IFRAME3 = Bar Graph
IFRAME4 = Report

Once the user clicks on a Bar riser or Pie slice, the drilldown opens in the next frame on the same page.

After the user has opened all 4 frames with selections, they then click on another selection in Frame 1 or 2

When the user clicks on Frame1, we clear out Frames 3 and 4 as Frame 2 is populated
When the user clicks on Frame2, we clear out Frame 4 as Frame 3 is populated

Here are all completed files mentioned.

Detailed Steps:
  • We have 4 graphs which are 4 different processes, unrelated to each other, that populate iframes 1,2,3,4 on the Dashboard (this can be 6, 9,12 iframes, no matter)
  • Clicking on any slice of a GRAPH to drilldown, will clear out all frames, move that entire graph to iframe1, and begin populating iframe2 with the drilled report.
  • Program 1 displays a BAR Graph showing RETAIL COST and DETAIL COST by COUNTRY, opens in IFRAME1
    • At the bottom of Program1, drilldown target is IFRAME2,  calls Javascript  function BlankAllFrames coded in the HTML
    • ON GRAPH SET STYLE *
    • TYPE=DATA,
    •      ACROSSCOLUMN=N1,
    •              FOCEXEC=app/program2.fex(COUNTRY=COUNTRY SEL='DEALER'),
    •                   TARGET=iframe2,
    • $
    • TYPE=DATA,
    •      ACROSSCOLUMN=N2,
    •              FOCEXEC=app/program2.fex(COUNTRY=COUNTRY SEL='RETAIL'),
    •                   TARGET=iframe2,
    • $
    • ENDSTYLE
    • END
    • -HTMLFORM BEGIN
    • <HTML>
    • <HEAD>
    • </HEAD>
    • <BODY language=javascript onload=parent.BlankAllFrames()>
    • </BODY>
    • </HTML>
    • -HTMLFORM END
  • JavaScript BlankAllFrames added in HTML
    • function BlankAllFrames() {
    •   document.all.iframe2.src = '';
    •   document.all.iframe3.src = '';
    •   document.all.iframe4.src = '';
    • }
    •  
  • Click on one of the BARS, Program2 is the DRILLDOWN from above, Displays another Graph in IFRAME2
    • ON GRAPH SET STYLE *
    • TYPE=HEADING,
    •      FONT=VERDANA,
    •              STYLE=BOLD,
    •              SIZE=11,
    • $
    • TYPE=DATA,
    •      ACROSSCOLUMN=N1,
    •              FOCEXEC=app/program3.fex(COUNTRY=A1 SEL1=&SEL_1.QUOTEDSTRING),
    •              TARGET=iframe3,
    • $
    • TYPE=DATA,
    •      ACROSSCOLUMN=N2,
    •              FOCEXEC=app/program3.fex(COUNTRY=A1 SEL1='SALES'),
    •              TARGET=iframe3,
    • $
    • ENDSTYLE
    • END
    • -RUN
    • -HTMLFORM BEGIN
    • <HTML>
    • <HEAD>
    • </HEAD>
    • <BODY language=javascript onload=parent.BlankFrame3_4()>
    • </BODY>
    • </HTML>
    • -HTMLFORM END
  • JavaScript BlankFrame3_4 added in HTML
    • function BlankFrame3_4() {
    •   document.all.iframe3.src = '';
    •   document.all.iframe4.src = '';
    • }
  • Click on one of the BARS, Program3 is the DRILLDOWN, Displays another Graph in IFRAME3 with the DRILLDOWN in the Header
    • ON GRAPH SET STYLE *
    • TYPE=REPORT, LEFTMARGIN=0.250000, TOPMARGIN=0.250000, RIGHTMARGIN=0.250000, BOTTOMMARGIN=0.250000, ORIENTATION=PORTRAIT, SQUEEZE=ON, PAGESIZE=Letter, $
    • TYPE=REPORT, FONT='VERDANA', SIZE=10, GRID=OFF, $
    • TYPE=HEADING, LINE=1, JUSTIFY=CENTER, SIZE=10, STYLE=BOLD, $
    • TYPE=HEADING, LINE=2, ITEM=1, FOCEXEC=app/program4, STYLE=BOLD, TARGET=iframe4,$
    • ENDSTYLE
    • END
    • -RUN
    • -HTMLFORM BEGIN
    • <HTML>
    • <HEAD>
    • </HEAD>
    • <BODY language=javascript onload=parent.BlankFrame4()>
    • </BODY>
    • </HTML>
    • -HTMLFORM END
  • JavaScript BlankFrame4 added in HTML
    • function BlankFrame4() {
    •   document.all.iframe4.src = '';
    • }
  • Click on the DRILLDOWN link, Program4 executes a report into IFRAME4
    • Select another BAR in IFRAME2, IFRAME4 is emptied while IFRAME3 is populated
    • Select another BAR in IFRAME1, IFRAME3 and IFRAME4 are emptied while IFRAME2 is populated

Click here to see a screenshot.

Here are all completed files mentioned above.

If any questions, please contact Tom at tom.flynn@resilientbiz.com.