This site uses tracking cookies. By using this site, you agree to our Privacy Policy. If you don't opt in, some parts of the site might not function.
Blog
Home / Blog / FileMaker / Getting Started with Javascript and FileMaker
13Apr 2014

Getting Started with Javascript and FileMaker

About the Author

Mike Duncan Mike Duncan

Mike is an AWS Certified Solutions Architect as well as a certified FileMaker Developer. In addition to his work, Mike also enjoys pursuing his art, freelance writing, traveling, and spending time with his family.

Comments (31)

Chris Andersson - August 1, 2014

I am hoping you may have a solution to a problem I am having. Using your instructions above (and other resources) I have created a layout that is meant to run on filemakerGo. It consists of a small web viewer that is running an elapsed time timer built in javascript. There is a start/stop button and a reset button and when the timer is stopped it passes the elapsed time into a script. It all works beautifully….except….I also have several pop-overs on this layout that each contain a web viewer. Once I have opened and closed a few of these web viewers the timer stops and resets.

I assume it is when I have exceeded my 5 or 6 web-viewers on a layout. I have tried programming various script steps to ‘go back’ to the timer once a pop-over is closed to try to make it the active one again but to no avail.

Any ideas?

Chris Andersson

Reply
Mike Duncan
Mike Duncan - August 4, 2014

Hi Chris, you may be running into a limitation of having too many web viewers. According to the documentation, this is dependent on the memory available in your device, with a max of 4.

Reply
Ernst Südmeyer - August 5, 2014

Thanks for this little demo! Checked it out and it works like a charm on a mac. On Windows it won’t work. Interesting though: Using the complete string and adding it in the address field of ie11 while fmp is running returns the fmp screen with the script doing what it is supposed to … meaning it calls the script within fmp

Any ideas?

Reply
Mike Duncan
Mike Duncan - August 5, 2014

Hi Ernst,

I tested this in windows 7, and it worked fine for me. You might want to check that there are no other instances of filemaker running, that can possibly cause a conflict. Also that you are running the latest version of FMP. 

Reply
PMorris - August 17, 2014

I tried your first example in Filemaker Pro 13 Advanced using Windows 7, but what I get back is a pop-up window saying:

The file “Test1” could not be opened. Either the host is not availble, or the file is not available on that host.

Any suggestions?

Reply
Michael - October 9, 2014

Thanks for your article.

I have one instance each of Filemaker 12 Pro Advanced and 13 Pro Advanced.

I discovered that when I open the v12 instances before opening the v13, the javascript callback from the web viewer to fIlemaker doesn’t work on v13. It appears to be “talking” to the v12 instance because it comes in front of the window stack.

However, when I close the v12 or open the v12 after v13, it works.

Is there a way to make sure it works all the time?

Reply
Mike Duncan
Mike Duncan - October 10, 2014

Michael,

Having two versions of filemaker is likely to be a issue only if you are a developer, especially with Pro Advanced versions. The simplest answer is to be aware and launch FileMaker Pro 13 (any version) first. 

URL Schemes are handled by the OS, which will use the application registered to handle the URL… http opens in web browsers, mailto opens in email clients, etc..

Reply
Mike Davis - October 16, 2014

Hi Mike,

Wonderful article, thanks for writing it.

One question – what type of information can be passed to filemaker as a parameter? For example, I would like to pass an image from my Javascript code to a filemaker container field.

I am trying to set a variable in my code = to the toImage() function in javascript, and then using the fmp:// url, adding on my variable as a parameter as you laid out in your example – but when it comes accross it just shows up in my container as “undefined”.

I thought maybe I could pass it as encoded text maybe.

What are your thoughts?

Thanks again!

Reply
Darren S - October 20, 2014

Great file to get me started…. You don’t by chance have an example of using Javascript to open a filemaker image in a JS enable image editor which then returns edited image back to FM ??

Reply
Giuseppe Roccasanta - November 3, 2014

Hello Mr. Duncan, do you know if is it possible to use this technique in a Runtime? Because I tried with no success… Thank you

Reply
Mike Duncan
Mike Duncan - November 4, 2014

Giuseppe,

This won't work with runtimes, since the application registers itself with the OS as the handler for url schemes. The fmp protocol is specific to FileMaker Pro, either regular or advanced.

Reply
Naomi Fujimoto - January 26, 2015

Thank you for delivering a valuable information.
Can I translate this article into Japanese and put it on my blog?

Reply
Crispin Hoggarth - January 29, 2015

I see a possible issue with filemaker web view using IE on windows platforms. Under most normal security settings Internet Explorer restricts scripts (over a certain size it seems) from running. I think in most cases it is not possible to change the IE security settings for all users running the DB. This very much restricts filemaker from taking advantage of fun javascripting! Perhaps someone has come up with a workaround for this?

Reply
Josh - February 28, 2015

Question on this technique. I am new to filemaker, but I have been a web programmer for years, so this all makes pretty good sense to me. But one question I have. If I run a callback/ajax request to a filemaker script, how do I retrieve data from the script. Your examples show how to sent a parameter to the script. I am wondering how to get the script to pass data back to the web viewer in the same call.

Reply
Mike Duncan
Mike Duncan - March 2, 2015

Josh,

From FileMaker, you can set the html used in the webviewer to whatever you like, so you can reset with new content after getting a response back from the callback in javascript. It wouldn't necessarilly be in the same call, but could be part of the same script routine in FM. Would that work for you?

Reply
Lloyd - May 11, 2015

Hi There,

I am using the Google Maps JavaScript API v3 to bring up a custom map for routing between jobs.

On the map I have an info window that is populated via variables with client report and site information. What I would like to do is have a button in the infoWindow section of the map that takes me to the record relating to the data displayed in the infoWindow

Is this able to be achieved?

Reply
    Russell Turner - November 6, 2015

    Hi Lloyd – did you resolve this? I’ve been researching the same as whilst it’s definitely possible (see examples below). I’m having issues getting this to work on my own Google Cluster Map. See examples below though.

    http://timdietrich.me/fmeasymaps/
    -http://hbase.net/2012/02/17/creating-google-cluster-maps-from-filemaker/

binualexander - October 21, 2015

Hi! Maybe I am missing something … but I am not able to see where you have reference the external jqeury colorpicker in the demo that you have provided. Could u please tell me where the reference is placed inside the demo … I want to use other jquery tools and not sure where to reference them in the filemaker file ….

Thanks

Reply
    Mike Duncan
    Mike Duncan - October 23, 2015

    In this case, the HTML used is stored in a field. If you look at the field named “html1” in the Resources table/layout, you will see the references there to both Jquery and the picker. Thanks

Hua Gao - April 12, 2016

Hi Mike, I have a piece of code works well with IE 9, but stopped working with IE 11. Could you tell why? Seems the saving function is not working:

“data:text/html,” &

#div2 {
width: 100%;
height: 100%;
}

Edit Target

Edit Target ” & Targets::Target Number & ” below

Save Changes

var currentFileName = ‘” &Get ( FileName) & Case ( fnGetFMMajorVersionNumber <= 13 ;".fmp12") & "';

$(function () {
jsdraw = createEmptyJSDraw(‘div2’);
var v = [];
$(‘#search-button’).on(‘click’, function () {
v.push(“& Targets::Target Number &”);
v.push(jsdraw.getSmiles());
v.push(jsdraw.getMolfile().replace(/[\n\r]/g, ‘|’));
hashcodeGetter(jsdraw.getSmiles(), function (d) {
v.push(d.hashcode);
var status = currentFileName+’:EditTarget:’+v.join(‘\r’);

window.status = status;
alert(window.status);
v = [];
});
});
});

Reply
    Mike Duncan
    Mike Duncan - April 12, 2016

    Hi Hua,

    The code you show here seems like it may be incomplete, if it came through ok. Some may have gotten lost when posting it.
    It looks like it references some other javascript library that I do not see reference to. I any case, I often get the necessary code working in a standalone html file and debug in a browser, then get the working code back into FM.

    Also, I think the web viewer may be more strict than general web browsers with well formed HTML with doctype definitions, so you might look at that as well.

    Mike

Howard Callender - June 2, 2016

Thank you for sharing! Keep up the great work!

Reply
Ed Scott - July 5, 2016

Mike,

Based on the clever ideas and guidance you provided above, I have implemented a web viewer-based calendar solution for my personal use.

The solution feeds a calculated field full of CSS and HTML to a web viewer to see a monthly view for a selected month. For the monthly grid, the calculated code uses absolutely placed html div’s, and the events inside the div for a given day use FMP protocol based links to do things like bring the days events up for edit in a pop-over on the same layout as the calendar web viewer. This all works nicely in FileMaker – in fact its pretty awesome.

I am wondering about a way to make the calendar work in Web Direct (without a complete re-architecture not based on web viewers). As implemented, the solution doesn’t work in Web Direct since the FMP protocol links clicked inside the web viewer don’t have the desired affect inside the web direct session (in fact, they pull up FileMaker on my client computer and perform the linked script therein). I can see how I might use a logical switch to alternatively calculate FMP vs. HTML links on events – based on which platform the solution is being viewed in (FM vs. WD). I can’t figure out how to code the alternate link to trigger a series of events that would for instance, open a pop-over in the web direct session (as happens in FileMaker when using FMP protocol links). Does this make any sense? Any ideas?

To restate in less words: A data-statement link inside a web viewer inside a web direct session that can open a popover on the same layout that the web viewer is on (or similar).

Regards,
Ed

Reply
    Mike Duncan
    Mike Duncan - July 5, 2016

    Hi Ed,

    You are right that the FMP protocol only works for FM Pro or Go apps. There is a workaround for WebDirect, but involves several more moving pieces, but it is possible.

    For WebDirect, instead of calling the FMP protocol, you can invoke some CWP that will get the information to FM Server. Getting the script to fire on the WebDirect users session is possible if you use the onRecordLoad script trigger to fire in another window by deleting a session record out from under the users session. I do this with a “session” record for each logged in user, and hiding that window so they do not see it. As long as the virtual window is open, the script trigger will still fire, and then you can perform a script that activates a popup, if that is what you want.

    Mike

Cornelis F Boekhouder - July 14, 2016

Is there a way to put a browser in full screen mode? New webdirect users often do not click the correct buttons in a filemaker solutions and do not log out properly. They often close the browser or use the back button of the browser. Putting the browser in full screen mode and disabling the F11 key may be a solution for this. The key is thus to put the browser in full screen mode using some script. (filemaker script, or javascript or a combination of the two.)

Reply
    Mike Duncan
    Mike Duncan - July 14, 2016

    I do not think there is a reliable way of doing that, especially across all platforms. I would not recommend it anyway, as it could cause more confusion that it solves and disrupt other tabs they may have open. You could always show a tip screen for new users with additional instructions, and allow them to not show it again if they choose.

Cornelis Boekhouder - July 14, 2016

It is possible to open the chrome browser in full screen mode and go to a specific URL. But for this to work you need to have a shortcut file on the desktop that contains the instructions. The F11 key is disabled and it is only possible to close the chrome broser with alt F4. This is not an ideal solution, but the best one I found up to this moment. A script that can put the chrome browser in full screen mode would be a better solution. Webdirect should somehow put the chrome browser into full screen mode. The desktop shortcut does not work well if chrome is already open. Could it be possible to run some javascript code in a filemaker webviewer that puts chrome into full screen mode?

Reply
    Mike Duncan
    Mike Duncan - July 26, 2016

    Not that I know of, javascript doesn’t target a specific application that way.

acohensitt - July 21, 2017

I know this thread is over a year old, but perhaps someone here can help me.
I have a similar situation in that:

I am bundling a FileMaker app in FIAS (iOS-SDK).
I use the web viewer to drag and drop images (records in FileMaker).
On FileMaker desktop (FM16) and in FileMaker Go on the iPad and iPhone, this works perfectly.
You can drag an image and it triggers a script in FileMaker to resort the records. But when I bundle the app in Xcode and attempt to drag an image in the web viewer — as an iOS bundled app — although the drag moves, it does not WRITE the change (sort number) back to FileMaker. 


The error in Xcode is: 

Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service

The Web Viewer content is:

“file:/” & If(Get(SystemPlatform)=1;”volumes”;””)  & Get(TemporaryPath) & “sortByDrag.html”


I know this is stretch, using FIAS to do this, but it works just fine in FM Go.
Perhaps something to do with the URL Scheme definition in Xcode??

Any help would be appreciated,

Aaton

Reply
    Mike Duncan
    Mike Duncan - July 21, 2017

    Unfortunately this will not work when using the iOS SDK to bundle an app. The fmp url will try to launch FileMaker, not your bundled app. And there is no way to register your app with the OS with a url prefix like “fmp:/” or anything else, so it is just not supported.

Leave a Reply