Focal Point
[SOLVED] iFrame - Maximize

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

March 17, 2017, 04:48 PM
Enigma006
[SOLVED] iFrame - Maximize
Hello

I have multiple iframes on a HTML page which have reports and graphs linked to. Is it possible to have a maximize or a link on them so that particular frame can open in a new window?

Initial idea I have is to provide a hyperlink on each report/graph and build a link in that to open in a new window. Please suggest if there is any better option.

Regards

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


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 09:30 AM
jcannavo
I think your idea is correct. Would think all you need to do is create a drill-down on each report/graph somewhere. Then have that drill-down setup to call your report/graph in a new window.


JC
WebFOCUS Dev Studio / App Studio
8.2.01
Windows 7
March 20, 2017, 09:44 AM
Joel Elscott
A better user experience might be to put an image on the page that indicates maximize. Font Awesome has some good images that you can choose from. Once your image is placed, it's a simple Task/Animation to open the report in a new window.


WebFOCUS 8.2.03
z/OS
March 20, 2017, 10:14 AM
Enigma006
quote:
Originally posted by Joel Elscott:
A better user experience might be to put an image on the page that indicates maximize. Font Awesome has some good images that you can choose from. Once your image is placed, it's a simple Task/Animation to open the report in a new window.


I will definitely check it. Can I set in task/animation in HTML composer. I am thinking of old school method to create a executable URL in that report's fex that would open in a new window.
Please suggest. I am new to WF 8.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 10:14 AM
Enigma006
quote:
Originally posted by jcannavo:
I think your idea is correct. Would think all you need to do is create a drill-down on each report/graph somewhere. Then have that drill-down setup to call your report/graph in a new window.

Thank you. I will try this.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 10:28 AM
Joel Elscott
Yes, the task/animation section is in HTML Composer using App Studio. You'll definitely want to learn how to set up tasks, it's one of the most basic functions to know.


WebFOCUS 8.2.03
z/OS
March 20, 2017, 10:30 AM
Enigma006
quote:
Originally posted by Joel Elscott:
Yes, the task/animation section is in HTML Composer using App Studio. You'll definitely want to learn how to set up tasks, it's one of the most basic functions to know.

I know how to setup tasks but I am not aware of how to achieve this using the way you suggested.
Because, it looks like the image should be placed on HTML page. But I have 8 iframes on the page and I am thinking it would require having 8 images that would maximize each iframe. So, I was thinking having URL built in each fex and show the link so that it appears in the iframe.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 10:43 AM
Joel Elscott
Gotcha. Yes your solution would definitely work. However if your application is highly visible, or even an external application, having a maximize image might be a better user experience. It all depends on your need. And you're right, you would need to have 8 identical images all with their own tasks. I have something very similar with one of my applications. It was time consuming to setup, but our users are very happy with the result.

Sounds like you're on the right track, good luck!


WebFOCUS 8.2.03
z/OS
March 20, 2017, 11:56 AM
Enigma006
quote:
Originally posted by Joel Elscott:
Gotcha. Yes your solution would definitely work. However if your application is highly visible, or even an external application, having a maximize image might be a better user experience. It all depends on your need. And you're right, you would need to have 8 identical images all with their own tasks. I have something very similar with one of my applications. It was time consuming to setup, but our users are very happy with the result.

Sounds like you're on the right track, good luck!


Below code worked for me. Is it possible to get both the images beside graph title which is "Car Sales" and get same hyperlink functionality?
Trying to get those inside the graph frame rather than outside.

-DEFAULT &FMT = 'JSCHART';

DEFINE FILE CAR
 PDF_PNG/A150= '<IMG src="/approot/app1/icon_pdf.png" height=30 width=30 style="border-style: none" alt="Open as PDF" >';
 MAX_PNG/A150= '<IMG src="/approot/app1/icon_maximize.png" height=30 width=30 style="border-style: none" alt="Open in new window" >';
END

GRAPH FILE CAR
SUM SALES
BY COUNTRY
ON GRAPH PCHOLD FORMAT &FMT
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 750
ON GRAPH SET VAXIS 400
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH HBAR
ON GRAPH SET AUTOFIT OFF
HEADING
"<PDF_PNG <MAX_PNG"
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPlace(true);
setReportParsingErrors(false);
setSelectionEnableMove(false);
setTextRotation(getO1Label(),1);
setFontStyle(getO1Label(),2);
setFillColor(getO1Label(),new Color(0,127,192));

-*Title
setTextString(getTitle(),"Car Sales");
setDisplay(getTitle(),true);

*END
*GRAPH_JS

"introAnimation": {
    "duration": 1000,
    "enabled": true
},
"riserBevel": "bevel"
,
*END
TYPE=HEADING,
OBJECT=FIELD,
ITEM=1,
JUSTIFY=RIGHT,
FOCEXEC=app1/chart1.fex( RPT_FMT='PDF' ),
TARGET='_BLANK',
$
TYPE=HEADING,
OBJECT=FIELD,
ITEM=2,
JUSTIFY=RIGHT,
FOCEXEC=app1/chart1.fex( RPT_FMT='JSCHART' ),
TARGET='_BLANK',
$
ENDSTYLE
END
-RUN
  



8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 12:09 PM
Joel Elscott
This is how I solved this issue with my application.

1 - Put the image directly on the html page (not within the fex)
2 - Place the graph on the html page. Remove the frame borders.
3 - Placed graph within a groupbox, with borders turned on.
4 - Place maximize/pdf image within the groupbox.

To the user this will appear that the images are within the graph frame.


WebFOCUS 8.2.03
z/OS
March 20, 2017, 01:37 PM
Enigma006
quote:
Originally posted by Joel Elscott:
This is how I solved this issue with my application.

1 - Put the image directly on the html page (not within the fex)
2 - Place the graph on the html page. Remove the frame borders.
3 - Placed graph within a groupbox, with borders turned on.
4 - Place maximize/pdf image within the groupbox.

To the user this will appear that the images are within the graph frame.


With this, how did you get the image to do it job? Was a hyperlink added to image?
Please provide an example if possible. Thank you.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 01:39 PM
David Sibert
I have used a resize icon that runs a css class and jQuery which expands and collapse the frame.


dksib
DC Tech Services Inc
WF 8.2.1M
March 20, 2017, 01:40 PM
Enigma006
quote:
Originally posted by David Sibert:
I have used a resize icon that runs a css class and jQuery which expands and collapse the frame.

This sounds awesome. I will research on this.
Can you provide any example if you have time?
Thanks.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 02:14 PM
Joel Elscott
You can treat the image just like you would a button. Attached is an example.




WebFOCUS 8.2.03
z/OS
March 20, 2017, 02:16 PM
Joel Elscott
Doesn't look like my image posted for some reason. Try this link:


https://s15.postimg.org/yo9ir3crv/maximize.jpg


WebFOCUS 8.2.03
z/OS
March 20, 2017, 02:21 PM
Enigma006
quote:
Originally posted by Joel Elscott:
Doesn't look like my image posted for some reason. Try this link:


https://s15.postimg.org/yo9ir3crv/maximize.jpg

Got it.


8.1.05
HTML,PDF,EXL2K, Active, All
March 20, 2017, 11:04 PM
WF1326
You could try 'Window' object in the HTML Composer and load a frame inside it. The Window object contains Minimize, Maximize and couple of other features that may interest you.


WebFOCUS
7703/7705/8105m/8201m/8202m