Client-side JavaScript in IWP!

[jaboda]

Whilst trying to find out how to detect mobile browsers (see this thread) I came across a feature which might be very useful in increasing the power of IWP.

When clicking any button within IWP it seems it fires a JavaScript function in the form of top.iwp.[command]. This function then carries out the event/command.

Therefore it's possible to look in the Frame Source for the IWP layout in question and find the command for a button, such as top.iwp.executebuttonscript(2,0,0). This can then be inserted into JavaScript within a Web Viewer.

As far as I can tell once a button is inserted on a layout the button number doesn't change.

Some examples of where this might be useful:

• Detecting client User Agent (such as for mobile browser detection).
  
• Automatic Refresh.
  
• Intro animation - switch layout on completion.
  
• Timed layout display.
  

I have attached an example.

In the example I use an external html file in the web viewer. It should be possible to use a data URI as well, which would make it even more powerful.

Unfortunately I couldn't get it to work for some reason (any ideas?), and it doesn't work in IE 6-8 anyway.

The example is designed to be used with FileMaker Pro/Advanced running on localhost.

To use it open the zip and copy timer.html into /web in the FileMaker folder. Then open the database and enable IWP.

In normal use the button and web viewer could probably be hidden underneath an image/field. For the purposes of the example I've left them visible.

Please let me know what you think.

IWP On Timer Example.zip

[jerome manin]

[Please forgive my english from France]

This is a very powerfull feature for IWP and it will help in many cases. So, first af all : a big THANK YOU !

I just wonder the way to get the button number on a layout. It could be a vaste entreprise to redrawn all the layout after the first button with an known number.

This number does not seem to appear in the log file...

jérôme

[jerome manin]

We can get the "button number"

The function executebuttonscript get 3 parameter ( index, parentrecid, childrecid )

Submit a button on a layout write, in the access.log file, a line : "/fmi/iwp/cgi?-index=77&-recid=56&-relatedrecid=56&-buttonscript="

Copy de parameter in the "timer.html" file as following

<script type="text/javascript">

<!-- setTimeout("top.iwp.executebuttonscript(77,56,56)",5000); // -->

</script>

Then the script attached to the button is executed.

Once again, thank you Jaboda :-)

[jaboda]

The function executebuttonscript get 3 parameter ( index, parentrecid, childrecid )

Submit a button on a layout write, in the access.log file, a line : "/fmi/iwp/cgi?-index=77&-recid=56&-relatedrecid=56&-buttonscript="

Hi Jerome,

That's an interesting technique, and thanks for the information, but quite a different method to the one I used.

Basically to get the command required I see what IWP itself does. To do that simply 'view source' on the HTML IWP generates:

1. Add the button to your IWP layout. I think it can be hidden if needed.
   
2. Open the site in your web browser
   
3. Right-click the button and select 'This Frame | View Frame Source' (Firefox) or 'View Frame Source' (Safari)
   
4. Find the executebutton command required and copy the javascript code into your HTML
   
5. Ensure your HTML is loaded in the web viewer on that layout
   

This is also easier than scanning the log files .

Enjoy.

[jerome manin]

Your way is easier :-)

I use your technique to answer the question of waiting while a "server" print a PDF. Explain :

My database is hosted outside.

- Somewhere, a FileMaker client run a tempo script that check a flag field and if necessary make a PDF and insert it in a container.

- The IWP user, flag a field to announce that he needs a PDF and switches to a "waiting layout" with your timer.html javascript solution, then go "automatically" to a layout where his PDF is ready to serve in a container, and can be download and print.

Notes :

This solution needs a Filemaker application connected...

The IWP timer delay is just a bit longer than the FileMaker tempo script.

What is doing with the PDF can be done with other difficulties of the IWP like send html e-mail etc...

[jerome manin]

An other job for Jaboda's timer in IWP

The button concern by the timer quit the application (stop the IWP session)

An other button "QUIT" attached to a script :

- Open an URL in a new browser window

- Define a webviewer as "timer.html"

The user get a front window with the desired URL and the back browser window go to the iwp_home.html page.

That can be a solution for a multiuser hosted server.

[jaboda]

Please note that this technique is not limited to a timer script, though that's the most obvious.

For example the reason I worked this out is because I wanted a mobile browser detection method.

If you want a function which is on the toolbar you can simply use that code - for instance logout is top.iwp.logOut().

In your example I'm not sure you'd need this timer workaround at all. Could you not have a 'Quit' button which runs a script with Open URL followed by Exit Application?

An other job for Jaboda's timer in IWP

The button concern by the timer quit the application (stop the IWP session)

An other button "QUIT" attached to a script :

- Open an URL in a new browser window

- Define a webviewer as "timer.html"

The user get a front window with the desired URL and the back browser window go to the iwp_home.html page.

That can be a solution for a multiuser hosted server.

[jerome manin]

The top.iwp.logOut() function seems to "exit the application" only il the IWP tools bar is visible...

Is it possible to get a list of the top.iwp.[command] ?

[jaboda]

The top.iwp.logOut() function seems to "exit the application" only il the IWP tools bar is visible...

You're quite right - when I tested it before I'm sure it worked, but I must've been mistaken.

This is good as otherwise it's a security risk.

Is it possible to get a list of the top.iwp.[command] ?

View frame source on the toolbar frame.

[Charles Delfs]

Great tip! Could this be used to trigger a custom exit page?

- user clicks a java button trigger and that causes the session to be destroyed and the page redirected to what ever exit page we want.

This sounds possible. Event if there is no actual log out, as long as the user can be left on any given web page, for most that would be good enough.

What is everyone's thoughts?

Charles

[macamaca]

Great tip! Could this be used to trigger a custom exit page?

- user clicks a java button trigger and that causes the session to be destroyed and the page redirected to what ever exit page we want.

This sounds possible. Event if there is no actual log out, as long as the user can be left on any given web page, for most that would be good enough.

What is everyone's thoughts?

Charles

I have a Submit button (with an an exit application step), and

I modified the iwp_home page to just have a javascript onload.redirect countdown timer that actions on 0.

[Charles Delfs]

I was thinking about people who have hosted files and the host provider does not have support for custom logout pages, a custom login page is easy enough, but the exit page would be the key thing here in this application.

Could you post you exit application java button?

C.

I have a Submit button (with an an exit application step), and

I modified the iwp_home page to just have a javascript onload.redirect countdown timer that actions on 0.

[jaboda]

I use a custom iwp_home.html which basically has the following in the page header:

<meta HTTP-EQUIV="REFRESH" content="0; url=/fmi/iwp/cgi?-db=[db name]&-startsession">

Apart from that the page is basically a 'thank you for visiting' page.

Seems to work quite well!

[Charles Delfs]

Hey i just tested this solution for people that are abe to get access to the IWP exit pages.

In the web viewer i simple pointed to a page that has the following link on it.

<body>

<p>This is a test file </p>

<p>Click <a href="http://www.myexitpage.om" target="_top">here</a> to redirect</p>

</body>

</html>

This breaks out of the IWP frame. it does not logout the session, but typically two things happen, the IWP session times out, or the browser is closed and the session is killed anyway.

This is really powerful. I am sure with a bit of Java the session could be killed first then the redirect. Since the IWP logout routine has its own redirect this would possibly prevent the subsequent redirect, I would say some Java that would open a new window, perform an IWP logout, then close that window. This would also kill the current windows session. Then the redirect could take place.

I really hope this helps others that have hosted files with no custom logout options.

Charles

[jaboda]

Hey i just tested this solution for people that are abe to get access to the IWP exit pages.

In the web viewer i simple pointed to a page that has the following link on it.

<body>

<p>This is a test file </p>

<p>Click <a href="http://www.myexitpage.om" target="_top">here</a> to redirect</p>

</body>

</html>

This breaks out of the IWP frame. it does not logout the session, but typically two things happen, the IWP session times out, or the browser is closed and the session is killed anyway.

This is really powerful. I am sure with a bit of Java the session could be killed first then the redirect. Since the IWP logout routine has its own redirect this would possibly prevent the subsequent redirect, I would say some Java that would open a new window, perform an IWP logout, then close that window. This would also kill the current windows session. Then the redirect could take place.



I really hope this helps others that have hosted files with no custom logout options.



Charles

That's a good solution. An important point is if you close the browser the session is not killed but still needs to time out - an issue if you have a limited number of connections. A solution may be to include on your custom exit page an iFrame to logout the database. The logout URL is:

HTH

http://[iWP server]/fmi/iwp/cgi?-db=[DB name]&-close

[ant-one]

Hello, first post here.

I wanted to thank jaboda for his extremely useful tip!

The reason I needed something like this was to be able to "auto-submit" data at specified intervals, to avoid the possibility of users timing-out while editing a large form.

The top.iwp.executebuttonscript command can be useful, but it's limited because it's tied to a specific button in a specific layout and record.

Digging into the fmp_iwp.js file, you can find all available javascript commands that can be called using jaboda's tip (always add "top.iwp." before the command name).

I tried the top.iwp.editsubmit command that is tied to the submit button, but it only worked when the toolbar was visible. I found in the fmp_iwp.js file that the editsubmit command would check if the submit button was there and then call another command (submitAndContinue()) if it was the case.

So here's a timer script that will auto-submit every 15 minutes. Follow jaboda's instructions and put the following in the timer.html document:

<script type="text/javascript"><!--setTimeout("top.iwp.submitAndContinue();",900000);// --></script>

BTW I'm not sure exactly where the fmp_iwp.js file is on the server, I got it by saving an IWP page with Google Chrome and including all assets.

[dataclip]

I wanted to share with you that this technique also works with FM server.

Store the timer file in the web folder on the server. For example for IIS I use:

C:InetpubwwwrootFileMaker

 

I use this technique to prevent users from being timed out on IWP.

I use the script trigger below. Note that refering to button (0,0,0,) does not actually trigger a script, but refreshes the page.

Therefore it can be used across different layouts and records. It also works when the IWP toolbar is hidden.

 

<script type="text/javascript">
<!--
setTimeout("top.iwp.executebuttonscript(0,0,0)",999000);
// -->
</script>

 

[Dudematters]

I am searching for a way to auto-refresh a IWP page and this seems to be very close to do it.

 

My page contains a menu (food), every x seconds I want to refresh it with a new image. It would also be great to keep my IWP session alive (this is shown in a fast-food restaurant on a SmartTV). 

 

I just can't figure out how I can activate this on the browser of the SmartTV, it is directly pointed to the local (mac mini) server running FM12 Server. Can you please help me out? Thanks in advance.

[Hare]

On behalf of m'colleague Dudematters I can tell you we figured this out, the location of the web server for Mac OSX server is

http: slash slash some.ip.adress/Filemaker/timer.html. So that should be the URL for the webviewer.

In conjunction with a server side script that sets the images every minute this works satisfactorily. Pizza, anyone?

[JDW]

My FMP 11 IWP DB is hosted on a shared server.  The problem is that the DB content displays too small on mobile (e.g., Mobile Safari on iOS8.x).  The solution should be to add a Viewport, but I do not see how to accomplish that even after reading through this thread.  Note that because the DB is on a shared server using IWP, I am not allowed to edit the home page (iwp_home.html) or the login page (iwp_auth.html) or the exit page.  Any thoughts?

Thank you.

[webko]

If you don't have access to edit the controlling files, then there's not a lot you can do...

IWP was always a compromise solution - between ease of getting information onto the web (very easy) and being able to finely control what is viewed and how (not easy).

Personally, I always found this compromise made my solutions not work the way I wanted on the web - I used CWP instead from very early on, so I could completely control the web experience.

Cheers

Webko

[JDW]

Thank you for the advice, Webko.

Actually, Josh recently suggested I investigate a new CWP solution called "FMEasyWeb."  I'm not a true PHP programmer (still learning) but I understand the basics.  Even so, I am finding FMEasyWeb to be not so easy to setup.  I would love hearing your thoughts on that.  Here's my post:

http://fmforums.com/forums/topic/97156-fmeasyweb-is-now-available/?do=findComment&comment=442408

Thanks!