Focal Point
[CLOSED] HTML REPORT STYLING

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

May 19, 2006, 05:12 PM
chelsea
[CLOSED] HTML REPORT STYLING
Hi,
is it posiible to dynamically adjust the html report according to the screen size of the system.that is i am creating a report in html format and my system size is 1024x768 pixels and it looks good but when i try it in a system with lesser size then the report is not displayed as intended. is it possible to make it such a way the report adjusts itself to the screen size dynamically.
Thanks for your time.

This message has been edited. Last edited by: <Kathryn Henning>,
May 19, 2006, 06:11 PM
susannah
if you set GRID=ON, the report will in fact squoosh as needed. but with GRID OFF, it wont




In Focus since 1979///7706m/5 ;wintel 2008/64;OAM security; Oracle db, ///MRE/BID
May 20, 2006, 06:01 PM
chelsea
Hi Susannah,
i tried using grid = on in my style sheet but it is not working may be because i am using borders in my style sheet .
is there any way to get the system size as a variable into webfocus like we get the system date from &date variable.
Thanks
Kiran
May 22, 2006, 09:05 AM
Kamesh
How about using PAGESIZE=SCREEN?

Just a thought


WFConsultant

WF 8105M on Win7/Tomcat
May 22, 2006, 09:50 AM
susannah
chelsea, ah..you're using set htmlcss=on, so in your stylesheet ,inventigate using WRAP=ON




In Focus since 1979///7706m/5 ;wintel 2008/64;OAM security; Oracle db, ///MRE/BID
May 23, 2006, 08:53 AM
mgrackin
Chelsea,

If the suggestions posted do not give you a workable solution there is a way, via javascript in the browser, to detect the screen resolution. You would need to pass the resolution as a variable in the call to WebFOCUS.

I'll see if I can dig up an example.


Thanks!

Mickey

FOCUS/WebFOCUS 1990 - 2011
May 23, 2006, 09:40 AM
mgrackin
Chelsea,

Create and HTML page with the following code and it will demonstrate how to capture the screen resolution with javascript and put the values into FORM elements that can be passed to WebFOCUS.

<html>
<head>
<title>
Screen Resolution Test Page
</title>
</head>
<script>
function screenres() {
document.theform.scrwidth.value=screen.width;
document.theform.scrheight.value=screen.height;
alert('Width=' + screen.width + ' Height=' + screen.height);
}
</script>
<body>
Screen Resolution Test Page
<form name="theform">
<table>
<tr><td>
Width <input name="scrwidth" type="text" value="">
</td></tr>
<tr><td>
Height <input name="scrheight" type="text" value="">
</td></tr>
<tr><td>
<input type="button" onclick="screenres();" value="Show Me the Resolution">
</td></tr>
</form>
</body>
</html>


Thanks!

Mickey

FOCUS/WebFOCUS 1990 - 2011
November 12, 2014, 09:13 AM
Danny-SRL
Hi mgrackin,
I don't want to display a form.
So, how do you then pass the values to WebFOCUS &variables?


Daniel
In Focus since 1982
wf 8.202M/Win10/IIS/SSA - WrapApp Front End for WF

November 12, 2014, 10:03 AM
njsden
Setting SQUEEZE=ON or WRAP=ON in the StyleSheet section as susannah suggested has been enough for my HTML reports to adjust themselves to the available browser's viewport area. Of course, too large a report won't fit and you'll end up with horizontal scroll bars but that's normal.

However, HTML reports wrap by default anyway so I'm curious to see what in your StyleSheet is affecting that.





Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
November 13, 2014, 10:59 AM
Danny-SRL
I need to know the resolution of the user's screen in order to define the number of pixels for a graph.
I know that there is the AUTOFIT ON option. However it always creates a graph a bit larger than the screen hence scroll bars which the user does not like.
mgrackin's code displays well the these numbers. What I need is to retrieve them in &variables.
Any idea?


Daniel
In Focus since 1982
wf 8.202M/Win10/IIS/SSA - WrapApp Front End for WF

November 13, 2014, 01:37 PM
SSander
quote:
Originally posted by Danny-SRL:
I need to know the resolution of the user's screen in order to define the number of pixels for a graph.
I know that there is the AUTOFIT ON option. However it always creates a graph a bit larger than the screen hence scroll bars which the user does not like.
mgrackin's code displays well the these numbers. What I need is to retrieve them in &variables.
Any idea?

Iv described how I catch HTML title into variable by using HTML what I hide in the BIP Portal banner and then push all the parameters to global parameters.

I hope this helps.


Release: WebFOCUS 8104, AppStudio: 8105
OS: Windows
Output: HTML,Excel,Active Reports
November 17, 2014, 01:01 AM
Danny-SRL
Hi SSander,
Can you show your code please?


Daniel
In Focus since 1982
wf 8.202M/Win10/IIS/SSA - WrapApp Front End for WF

November 17, 2014, 09:29 AM
BarryS
Hi Danny

mgrackin has a good answer just put the code inside an -HTMLFORM like:

-HTMLFORM BEGIN

var scrWidth=screen.width;
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);


-HTMLFORM END

I have not tested this using -HTMLFORM but some version of this should work.

Thanks Barry


WebFOCUS 8103, Windows, App Studio
November 17, 2014, 10:41 AM
njsden
What Barry suggests is very similar to how we instruct a window to "maximize" itself on some of our solutions, although we rely on availWidth/availHeight instead:

function maximizeWindow() {
   window.moveTo(0, 0);
   window.resizeTo(window.screen.availWidth, window.screen.availHeight);
}




Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
November 17, 2014, 11:22 AM
Danny-SRL
Barry,
I think I did not express my need well.
I understand (correctly?) that "screen.width" contains the width of the screen in pixels.
This is a Javascript variable.
What I want to know is how can I receive that value in a &variable?
  
-HTMLFORM BEGIN 
var scrWidth=screen.width;
... somehow here transfer scrWidth into &SCRWIDTH 
-HTMLFORM END 



Daniel
In Focus since 1982
wf 8.202M/Win10/IIS/SSA - WrapApp Front End for WF

November 17, 2014, 04:36 PM
Tony A
Hi Danny,

I daresay that you've reached the same conclusion that I have, it would be difficult without some sort of recursive fex call or something equally obtuse.

So, how about reversing your logic? Depending upon how you are delivering your chart (i.e. JSCHART or PNG etc.), is there potential to rassign the resultant chart's width and height attributes (and then redrawing the chart if JSCHART?) once rendered within your HTML page?

Not an ideal example but something along the lines of -
-DEFAULTH &Region = '_FOC_NULL'
DEFINE FILE GGSALES
  MNTH/Mt = DATE;
  YR/YY = DATE;
END
ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE GGSALES
-* Created by Info Assist for Graph
SUM GGSALES.SALES01.DOLLARS
GGSALES.SALES01.BUDDOLLARS
BY GGSALES.SALES01.MNTH AS 'Month'
WHERE GGSALES.SALES01.REGION EQ '&Region';
WHERE YR EQ 1997
ON GRAPH HOLD AS MYCHART FORMAT HTMTABLE
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=endeflt.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setSmoothLines(true);
setSeriesType(1,2);
setSeriesType(0,1);
*END
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<title>Danny-SRL example</title>
<script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js"></script>
<script>
$(document).ready(function() {
  sizeImage();
});
$(window).resize(function(){
  sizeImage();
});

function sizeImage() {
  var _width = $(window).width();
  var _height = $(window).height();
  $("img").attr({"width":_width+"px",
                    "height":_height+"px"});
}
</script>
</head>
<body>
!IBI.FIL.MYCHART;
</body>
</html>
-HTMLFORM END


T

This message has been edited. Last edited by: Tony A,



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
November 22, 2014, 02:53 PM
Danny-SRL
Hi Tony,
Nice idea to reverse the logic.
I needed the variables because the graph is displayed in a split screen with parameters in the top part and the graph in the bottom. I was thinking that the user could enter width and height in text boxes which would then be used in the &WF_STYLE_HEIGHT and &WF_STYLE_WIDTH variables.
I will try your idea at our customer site.
Many thanks.


Daniel
In Focus since 1982
wf 8.202M/Win10/IIS/SSA - WrapApp Front End for WF