Log in
Hot & Trending on FMT

FileMaker WebViewerEditor - Get it on GitHub

 FMT Staff Choice Tool...The WebViewer Editor from osamunoda is a self-learning tool for FileMaker web viewer coding. This is a live editor built on FileMaker. When you type something, the web viewer reflects the changes immediately.You can test the CSS property / JS snippets quickly in handy way. In this way, so-called "save"(text editor) - reload (web browser) dance" is not necessary. It's just a FileMaker file, so testing code becomes a record.Your learning process becomes your own coding database. 

Tap or Click here to download https://github.com/osamunoda/WebViewerEditor.

Got FileMaker Questions - Get Answers for any version on the ORIGINAL FileMaker Forum

 

--

Communicating with a Web Viewer in FileMaker

Beezwax has always been active in the community regarding advanced use of web viewers in FileMaker.  Check out the previous postings if you’d like to learn more.

  1. Native Web 2.0 Controls in FileMaker 12 Layouts
  2. Go, JavaScript Go!
  3. Enable WebKit debugger in FileMaker Web Viewer

When the Web Viewer was introduced in FileMaker v8.5, it was designed to display websites such as a Google Maps which included the address of the current record.  It accomplished this by inserting record data into the url as an HTTP GET request. However, it didn’t take long for developers to take advantage of html’s data URI syntax to insert html directly into the Web Address box.  This seems to be the most popular method currently to display a local web page inside of a web viewer.  The main advantage here is that you can include field references directly in the code as a way to pass data into a Web Viewer.

You can think this of this method as analogous to a php server inserting data from a database before rendering the html to be delivered to the browser.  Similarly, when new data needs to be injected, the entire page is re-rendered.  However, we are moving towards a more  asynchronous world were only the data is transferred and the state of the web page is not reset.  This is generally done with ajax calls to a server, but in our web viewer, there is no server.

 

Treat the Web Address box as the url

If you use the web address box as intended, then you’ll gain the advantage of some html features such as GET parameters and hash values.  However, the Web Viewer will need to locate a resource, so where should we point it?

Export web files to the temporary directory

Using local files instead of inline html has some advantages such as faster load times, use of browser caching, and easier editing of the files.  It is also necessary in order to use the url features mentioned above.  Now that we’re loading static pages which don’t have inline field references, we’ll have to figure out a better way to get data into the Web Viewer.

Talking to the web viewer

As mentioned above, we can pass data to the Web Viewer by adding values to the url as get parameters at the time of page load.

file://.../S10/index.html?foo=bar&company=beezwax

You can grab the GET parameters from the url via the window.location.search object or you can use the URI.js javascript library to make things easier.  The drawback here is that you can only send data on page load.  Luckily the hash property of the url is not so limited.

onhashchange

When the value of of the hash changes, a javascript event called “hashchange” is triggered on the window.

file://.../S10/index.html#here_is_the_hash

You can change the value of this in the Web Viewer web address box from FileMaker, and the event will be triggered in the javascript of the Web Viewer!  You can then retrieve the hash value with window.location.hash.  A simple example of adding an event listener would be the following:

This is perfect for passing smaller amounts of data to a Web Viewer, but it has a couple of problems. First, the data must be encoded to be url safe, which can cause a bit of a slowdown on large data.  Secondly is that Internet Explorer has a url character limit of 2,083 characters.  Hopefully, one day this will be expanded, but until then, we’ll have to work around the limit.  A file would have no length limit, and wouldn’t need to be url safe, so let’s use hashchange to alert the Web Viewer that it should go get a file of data that FileMaker just exported to the temp directory.  I’ll use jQuery in the example below for brevity.

As the web has matured, we’ve grown more accustomed to asynchronous requests for data which return only the needed data while not reloading the entire page and losing the user’s state.  This is commonly known as ajax and has become a staple of modern web development.  However, ajax relies on a server  to return the data, and in our humble web viewer environment, there is no server.  You can kinda make ajax requests to local files, but this is problematic.

Cross-Origin Resource Sharing

For security reasons, ajax calls can only be made to the same domain as the page that requested it (i.e. the “origin” server).  This means that a page hosted on beezwax.net could not load data from filemaker.com through ajax unless filemaker.com explicitly allows it by configuring their server to set the response headers to allow it.  You may be wondering what this has to do with a Web Viewer because there’s no server, per se, and therefore no origin are involved.  Different browsers treat local files differently.  For example, Firefox allows ajax calls to local files, Chrome allows with with an option setting, Safari allows it with a developer preference change, and Internet Explorer doesn’t allow it at all.  Interestingly, a Web Viewer on OS X still allows it, but I suspect that this could change at any moment.

<script> and JSONP

Loading a javascript file does not run into the same security concerns as a data file.  Think about how for example jQuery is loaded from a cdn with no regard to cross-origin issues.  Because the data is loaded as javascript, it is executed rather than loaded as data.  The loaded file must have a variable assignment or function call in order to pass the data to the scope of the web viewer.  This is the idea behind JSONP and a couple of examples are below.

First, a script tag is added to the dom:

The contents of data.js could be:

When the script tag is added to the dom, the data.js file is loaded and executed, meaning the function “receiveData” is called with the data as an argument.  “receiveData” would be a function that you would write to handle the data.  The idea of wrapping data in a function call or variable assignment in order to get around CORS restrictions is called JSONP.  The P in this instance stands for “padding,” meaning that the data is padded with a function call.

Talking to Filemaker

The fmp:// url scheme has been widely discussed, so there’s no need to go into it too deeply here, but it’s worth a quick recap.

For fmp:// url,

  • the use is to call a particular script in a particular database
  • format is  fmp://account:password@netaddress/databasename?script=scriptname&param=scriptparameter&$var1=value&$var2=value
  • account, password, param, & variables are optional
  • “$” works as the netaddress for local files
  • support for local files was added in FileMaker 13.0v2

In order to call the script from javascript, you could do either of the following:

Although the second example is more complicated, I’ve had problems with the first one causing FileMaker to respond unexpectedly. A serious limitation of sending data from a Web Viewer to FileMaker is the same IE url character limit that we mentioned above.  Seedcode has a “hacktackular” workaround involving setting the Windows clipboard via javascript, but they also caution that “using the clip board is not ideal,” plus there’s the risk this may fail in a future version of IE or Spartan.  I don’t have any other workaround other than just avoiding that type of data transfer or not relying on Windows.

The Greatest FileMaker Tip Ever Told

Maybe there’s a touch of hyperbole in that title. More apt might be “(One of) The Greatest (FileMaker Pro Advanced) Tip(s) Ever Told.” It’s not the kind of tip that will help you corner the rice market or find eternal happiness, but if you use FileMaker Pro Advanced (FMPA), it will make development and debugging a but less...

Subscribe to this RSS feed