Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED/SHARE] Taking a value in a Js variable and storing it in a DM variable?:

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED/SHARE] Taking a value in a Js variable and storing it in a DM variable?:
 Login/Join
 
Virtuoso
posted
Hey all,

So, in JavaScript you can get your current window height and width by doing the following:

var height = window.innerHeight;
var width = window.innerWidth;


My dilemma is that I want to take the current values of the window height and width and be able to store them in Dialog Manager (DM) variables for use later in the following lines of code that specify width and height for a chart I've developed:

-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-* Want to be able to do:

-DEFAULTH &WF_STYLE_HEIGHT='&HEIGHT.EVAL';
-DEFAULTH &WF_STYLE_WIDTH='&WIDTH.EVAL';


My end goal is making my chart/graph size dynamically to the window size it renders in. ON GRAPH SET AUTOFIT ON does not work after changing GRMULTIGRAPH 0 to 1. The HEADING text adjusts to the window width without a problem, but the chart/graph stays the same.

Anyone here know a way in which I can get the values of innerWidth and innerHeight into DM variables? Or how I could make my chart responsive due to AUTOFIT not working?

Any help is much appreciated!

Thanks in advance!

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


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Expert
posted Hide Post
Are you running the fex from a PORTAL ?

If so the & vars &WF_STYLE_WIDTH, &WF_STYLE_HEIGHT should be set with the portals iframe dimensions.

Note, we had to adjust the height to cater for the report heading of the chart. i.e. HEADING, "..."


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Virtuoso
posted Hide Post
Waz,

This and other graphs' ultimate end are in various panels within a page within a portal, yes. Is there a way to dynamically acquire the portal iframe dimensions and pass them to my graph code? How can I feed this graph code at least the initial panel height and width that it populates in?


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Expert
posted Hide Post
Well I have a way to manipulate the jschart to set the width to autosize, including on resize, but its involved and I would need to check to see if I am allowed to post it.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Virtuoso
posted Hide Post
That would be great! If needed, maybe delete or replace any confidential code from the code structure you have?

That, or if you aren't allowed at all, could you give me an idea of how you went about doing such? You could even PM me if that helps.

I would really appreciate help in how to go about getting the autosizing to work for my scenario.

Thanks!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Expert
posted Hide Post
OK,

This is the code.

With this utility, you must HOLD the output of the chart so this fex can manipulate it.
This utility also relies on AUTOFIT set to ON.
You will have to get a javascript function called isApple that returns true or false and have it available to call to determine if the device is an iPad, etc.

Some aspects of the code still have issues.

Let me know how it goes and whether its useful.

-* File: IBFS:/WFC/Repository/{location}/chart_auto_width.fex Created by WebFOCUS AppStudio

-* &utlChartFile          = The physical file to read, the saved HTM file
-* &utlChartOut           = The save name of the original chart HTM
-* &utlchartwidthadjust   = Adjustment amount of the width of the chart
-* &utlchartminimumwidth  = Adjustment the minimum width of the chart
-* &utlchartsperline      = Number of charts horizontally, used to set the width of the chart if multiple are shown in the frame on the same line.
-* &FIXED_WF_STYLE_HEIGHT = The height of the chart
-*
-* Usage:
-* ...
-* ON GRAPH SAVE AS MY_CHT
-* END
-* -RUN
-*
-* -SET &utlChartFile = 'my_cht.htm' ;
-* -SET &utlChartOut  = 'MY_CHT' ;
-* -SET &utlchartsperline = {number of charts horizontally}
-* -INCLUDE /WFC/Repository/{location}/chart_auto_width.fex
-*

-DEFAULTH &utlchartwidthadjust = 10
-DEFAULTH &utlchartminimumwidth = 500
-DEFAULTH &utlchartsperline = 2

-MRNOEDIT EX -LINES * EDAPUT MASTER, T_HTMREAD, C, MEM
FILENAME=T_HTMREAD, SUFFIX=FIX, $
SEGNAME=T_HTMREAD, SEGTYPE=S1, $
  FIELD=LINE, ALIAS=L, USAGE=A4000, ACTUAL=A4000, $
EDAPUT*
-RUN
FILEDEF T_HTMREAD DISK &utlChartFile
DEFINE FILE T_HTMREAD
 CR/A1          = HEXBYT(10,'A1') ;
 Chart_Id/A50   = IF LINE CONTAINS '<div class=''chart'' id='''
                  THEN TOKEN(LINE,'''',4)
				  ELSE LAST Chart_Id ;
 NEW_LINE/A4000 = IF LINE CONTAINS 'window.onresize = function() {'
                  THEN 'function sizeApple(){'
 			  	| CR | '	var prntHeight = parent.innerHeight || parent.document.documentElement.offsetHeight ;'
 			  	| CR | '	var prntWidth = parent.innerWidth || parent.document.documentElement.offsetWidth ;'
			    | CR | '	//var orientation = window.orientation;'
			    | CR | '	var orientation = (prntHeight<prntWidth)?90:0;'
			    | CR | '	switch(orientation) {'
			    | CR | '		case 0:'
			    | CR | '		case 180:'
			    | CR | '			chart.width = 754;'
			    | CR | '			break;'
			    | CR | '		case 90:'
			    | CR | '		case -90:'
			    | CR | '			chart.width = parseInt(1000/&utlchartsperline)-20;'
			    | CR | '			break;'
			    | CR | '	}'
			    | CR | '	chart.draw("' || Chart_Id || '");'
			    | CR | '}'
			    | CR | 'if (isApple){'
			    | CR | '	sizeApple();'
			    | CR | '	window.parent.addEventListener("orientationchange",'
			    | CR | '		sizeApple,'
			    | CR | '		false'
			    | CR | '	);'
			    | CR | '}'
			    | CR | '&utlChartOut|_currOnload = function() {'
				  ELSE
                  IF LINE CONTAINS 'chart.width -= hMargins;'
                  THEN 'var prntWidth = parent.innerWidth || parent.document.documentElement.offsetWidth ;'
			    | CR | 'if (chart.width > (prntWidth/&utlchartsperline)) chart.width = parseInt(prntWidth/&utlchartsperline) - 20 ;'
			    | CR | 'var widthAdjust=0;if (chart.width>=&utlchartminimumwidth*2) {widthAdjust=parseInt(&utlchartwidthadjust,10);} chart.width-=(hMargins+widthAdjust);'
				  ELSE
				  IF LINE CONTAINS 'chart.height -= vMargins;'
                  THEN 'chart.height = &FIXED_WF_STYLE_HEIGHT ;'
				  ELSE
				  IF LINE CONTAINS 'chart.draw(''jschart_&utlChartOut|_0'');'
                  THEN 'if (isApple) { sizeApple();} else {chart.draw("' || Chart_Id || '")} ;'
				  ELSE
				  IF LINE CONTAINS 'window.onload = window.onresize;'
                  THEN ' '
			    | CR | '&utlChartOut|_currOnload() ;'
			    | CR | 'window.removeEventListener(''resize'',&utlChartOut|_currOnload,false);'
			    | CR | 'window.addEventListener(''resize'',&utlChartOut|_currOnload,false);'
			    | CR | '//window.addEventListener(''onload'',&utlChartOut|_currOnload,false);'
				  ELSE LINE ;
END

TABLE 	FILE T_HTMREAD
 PRINT 	NEW_LINE
 ON 	TABLE SAVE AS &utlChartOut
END
-RUN


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Master
posted Hide Post
I'd take the easy way out and just capture in JS, then redirect to a fex passing the height and width required. You could even have it pass the info into itself.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Waz,

Thanks for the share! I will look into implementation of this & get back with what I accomplish if anything. It looks like it only adjusts the width but not the height. Am I seeing that correctly?

GavinL,

Sounds nice, but how would one do such? How can you capture the width and height in Js but then pass it to the fex into DM variables? That's the part I can't seem to figure out. Do you have examples of these suggestions you would be willing/able to share? It would be very appreciated. Thanks for your suggestions and help!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Virtuoso
posted Hide Post
quote:
Sounds nice, but how would one do such? How can you capture the width and height in Js but then pass it to the fex into DM variables?


By including them as parameters in the submit that effects the redirect -- either as additional controls for a POST, or appending &name=value for a GET.

Or am I missing something?
 
Posts: 1925 | Location: NYC | In FOCUS since 1983 | Registered: January 11, 2005Report This Post
Master
posted Hide Post
@CoolGuy

-DEFAULTH &MYHEIGHT = _FOC_NULL;
-DEFAULTH &MYWIDTH = _FOC_NULL;

-IF &MYHEIGHT NE _FOC_NULL THEN GOTO SKIPRELOAD;
-HTMLFORM BEGIN
<script>
	var height = window.innerHeight;
	var width = window.innerWidth;

	location.href='/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS%253A%252FWFC%252FRepository%252FPublic%252Ftests&|BIP_item=Tester.fex&|MYHEIGHT='+height+'&|MYWIDTH='+width;
</script>
-HTMLFORM END
-EXIT

-SKIPRELOAD

-TYPE WIDTH = &MYWIDTH
-TYPE HEIGHT = &MYHEIGHT



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Waz, Jack, and GavinL,

Thank you for all your time and help with helping me find a way to get and set the window width and height from Js to DM variables and/or affecting changes to the JSCHART!!

GavinL's solution works great! Thank you GavinL for the example code of how to implement it. Now that the initial functionality is there, would you (or anyone) by chance know how to add upon this functionality to have the graph reload and/or adjust size upon the user's window size changing?

Waz, still looking at your code and seeing if there is something there I could use to help this inquiry of mine. Thanks for your help also!

Again thank you all so much for your help!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Guru
posted Hide Post
In GavinL's post am I reading this right? You took a JS variable and turned it into a WebFOCUS variable?


WebFOCUS 8.1.05
 
Posts: 496 | Registered: January 04, 2008Report This Post
Virtuoso
posted Hide Post
MattC,

GavinL's example shows how to take a value you get/set in a Js variable within Js, and then pass it into a WF procedure as a Dialog Manager (DM) variable value through tacking it on to the end of the BIP_item execution URL. Sweet huh?


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Virtuoso
posted Hide Post
GavinL,

If I try to -INCLUDE your code as a separate procedure up top the graph fex, setting the redirection to itself, it never launches the graph, but only runs the redirection fex. Is there a way to just -INCLUDE it? Or will we just have to utilize this functionality by setting the redirection URL to whatever fex we want to pass the values to?

Thanks for your help!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Master
posted Hide Post
-INCLUDE actually loads the file into what ever file your doing, so the location.href should refresh what ever file is doing the include, not the redirect itself. -INCLUDE is like an inline code injection.

My guess, your not replacing the "tester.fex" in the URL of JS to what ever the .fex is. This shouldn't be the redirect.fex, it should be the fex that is doing the include.

Here is what I would of done..

Tester.fex
-SET &FOLDER_NAME = 'Public/tests';
-SET &FILE_NAME = 'Tester.fex';

-INCLUDE IBFS:/WFC/Repository/Public/tests/includeThis.fex

-TYPE WIDTH = &MYWIDTH
-TYPE HEIGHT = &MYHEIGHT



includeThis.fex
-DEFAULTH &FOLDER_NAME = _FOC_NULL;
-DEFAULTH &FILE_NAME = _FOC_NULL;
-DEFAULTH &MYHEIGHT = _FOC_NULL;
-DEFAULTH &MYWIDTH = _FOC_NULL;

-IF &MYHEIGHT NE _FOC_NULL THEN GOTO SKIPRELOAD;
-HTMLFORM BEGIN
<script>
	var height = window.innerHeight;
	var width = window.innerWidth;

	location.href='/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS:/WFC/Repository/&FOLDER_NAME.EVAL&|BIP_item=&FILE_NAME.EVAL&|MYHEIGHT='+height+'&|MYWIDTH='+width;
</script>
-HTMLFORM END
-EXIT

-SKIPRELOAD



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Thanks for the clarification GavinL. The reason I ask is that I was trying to be able to acquire the window values from the externally included redirect procedure without having to edit it after initially set up. Your added explanation/code does the trick!

Thanks again!

Also, do you know if we could set this up so that our graph/reports that use this can resize and reload upon window size changing? I bet there's a way, I just don't know the Js to get it done...yet. Maybe you know what properties, functions/methods I could use to get that done. Or not. No biggie if not. Just curious. I would love to be able to add that additional functionality.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Expert
posted Hide Post
CoolGuy,

Our charts are all fixed height, so we didn't need to adjust it, so it was only width.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Master
posted Hide Post
includeThis.fex
-DEFAULTH &FOLDER_NAME = _FOC_NULL;
-DEFAULTH &FILE_NAME = _FOC_NULL;
-DEFAULTH &MYHEIGHT = _FOC_NULL;
-DEFAULTH &MYWIDTH = _FOC_NULL;
-DEFAULTH &REFRESH_URL = '/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS:/WFC/Repository/&FOLDER_NAME.EVAL&|BIP_item=&FILE_NAME.EVAL';
-SET &RELOAD = IF &MYHEIGHT EQ _FOC_NULL THEN 'reloadPage();' ELSE 'window.addEventListener("resize", reloadPage);';

-HTMLFORM BEGIN
<script>
function reloadPage(){
	var height = window.innerHeight;
	var width = window.innerWidth;

	location.href='&REFRESH_URL.EVAL&|MYHEIGHT='+height+'&|MYWIDTH='+width;
}
&RELOAD.EVAL
</script>
-HTMLFORM END

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



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Waz,

No worries! Thank you anyways for your great example and all your help with this! Appreciate your time and effort.

GavinL,

You are awesome! Thank you so much for helping me with working code examples for how to go about getting autosizing of my chart/graph despite ON GRAPH AUTOFIT ON not working with GRMULTIGRAPH. You've been a big help! Really appreciate you helping me with this! Great implementations of this functionality! They're clean, concise, and very understandable.

Again, I appreciate all your help! Hope I can do the same at some point for all of you!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED/SHARE] Taking a value in a Js variable and storing it in a DM variable?:

Copyright © 1996-2020 Information Builders