Use JavaScript variable determined in Preparation for rendering screen

Hi all,

I've done some experimenting determining the window width in order to use it for initial rendering of the web screen.

In the preparation I use RunJavaScript to execute a simple function that returns the window.innerWidth value to an input field on the screen (SizeField). This input field is linked to the local variable ScreenSize. See the screen shot below.

However, when the web screen is rendered the input field displays the correct width, but the local variable ScreenSize appears to be empty. So I can't use it to dynamically display data when rendering the screen.

I tried to execute the same JavaScript function by clicking on a button on the screen, and added an onblur() and onchange() to the Javascript function. The onblur() seemed to force the local variable ScreenSize to be changed, and I had the onchange() execute an AJAX refresh of some parts of the screen. That worked. But this is a manual solution, after initial rendering of the screen.

Using the same onblur() and onchange() in the JavaScript in the Preparation results in an error ... these function cannot be used in the Preparation apparently.

So, hopefully anyone knows how to solve this? Can I get the local variable ScreenSize set so the that I can use it for initially rendering the screen?

I tried a simple assign from the input field to the local variable right after the RunJavaScript, but that didn't do the job.

Hi Charles,

The first important thing to realize is that JavaScript runs client side, and - unless you are developing a mobile app - all of your Platform code, including local variables, run server side. Also, the Preperation is just that: it prepares the screen for rendering, but the screen hasn't rendered yet, so you can't execute any JavaScript (the page hasn't been sent to the browser yet!).

In order to determine the window width like you want (I think this is a very bad idea btw, see below), you need to send the content of the input box back to the server. You could do this by clicking a button (in JavaScript), which will send the content of the form (in this case including the input field containing the width value) back to the server. If you need to render a screen and need to know the width on forehand, you could create an empty page with a hidden input box and button, and redirect to the actual page after the button click.

That said, is this really something you want to do this way? This is far from responsive - the user could resize the screen for example - and we have CSS3 nowadays with which you can programmatically adjust styles based on the screen size. That would be a far better option imho!

Hi Kilian, thanx for your reply.

I get the message and totally agree with you ... I'm not going to resize the screen 'manually' in any way, I totally leave that up to the responsive theme / CSS3.

And I know that I can implement a button, press it, execute the javascript and have the value of a javascript-variable put into an input filed. Done that and it works fine.

But what I was trying to achieve was to have the JavaScript executed automatically, and have the result/returnvalue  available somewhere  in OutSystems BEFORE rendering the screen. (in my case, just to determine the info showed in a specific column of a report, so not to do any rescaling actions myself :-))

That's why I experimented with executing JavaScript in the preparation, what in fact works by the way (I can determine the window width in the Preparation ... I've read the JavaScript is actually processed 'in the context of the client / browser'). The input field I use to show the determinde window width actually displays the correct width (determined in the Preparation) after rendering the screen.

So my remaining issue is: is it possible to get this value in a local variable (or elsewhere) in order to use it in rendering the screen.

I hope I could make myself more clear this time!? :-)

one  way you can do it:

- "empty" preparation

- javascript document:onready() -> fakenotify(screenwidth)

-screenaction, do something with the variable you get from the noitfy

better way is to fakenotify the screen in the layoutwebblock and only if the browser is actually resized.

and stuff the width in a session-variable!