The Original FileMaker Community
Business Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Getting Started with Javascript and FileMaker – FileMaker Today

Get real time updates directly on you device, subscribe now.

[yee_row ex_class=””][yee_column width=”1/1″ ex_class=””][yee_text_block css_animation=”no” ex_class=”” widget_padding=”eyJwYWRkaW5nLXRvcCI6IjAiLCJwYWRkaW5nLXJpZ2h0IjoiMCIsInBhZGRpbmctYm90dG9tIjoiMCIsInBhZGRpbmctbGVmdCI6IjAifQ==” widget_margin=”eyJtYXJnaW4tdG9wIjoiMCIsIm1hcmdpbi1yaWdodCI6IjAiLCJtYXJnaW4tYm90dG9tIjoiMzAiLCJtYXJnaW4tbGVmdCI6IjAifQ==”]


Getting Started with Javascript and FileMaker

FileMaker Inc. has released an update for FileMaker Pro 13 (see the release notes here). Among the list of improvements to FileMaker Pro and FileMaker Pro Advanced is the extended functionality of the FMP URL protocol to include support for calling a script to run in FileMaker from within a web viewer.


This is a big deal

Working with the web viewer is now a two way street. You set the web veiwer from FileMaker, and now you get data back from what is going on inside the web viewer.

Previously this capability was only available in FM Go or if you happened to be running FileMaker Pro with a file hosted on FileMaker Server. By removing that constraint, this opens up a lot of possibilities for developers to extend and improve the solutions we build.

In this article, we will show why being able to comminucate with a web viewer is a big deal.


The Challenge: Getting data out of the web viewer

With the web viewer, it has been possible to display some nice, javascript enabled stuff and have it sit side by side with our native FileMaker interface. The problem is that whatever you did in a web viewer remained sequestered in that web viewer, and there was no way for FileMaker to know anything about it.

Until now, the ability to get information out of a web viewer and back into FileMaker has been a limiting factor. Now that you can utilize this functionality across the board, it’s much easier to invest time into learning how it works and how to use it in your solutions.


Hello World Example

We will begin with a simple script that shows a message displaying “Hello World” in a dialog. You can start with a new file or an existing file. Open scriptmaker by going to Scripts->Manage Scripts…

Create a new script and name it “Hello”. Add the script step Show Custom Dialog and specify the Title as “Hello” and the Message as “Hello World”. You can remove the cancel button and click “OK” and then save your script.

Now place a web viewer on the layout. We will simply display a link to click on. That’s it! Set the web viewer’s Web Address to the following:

“data:text/html,<html><body><a href=”fmp://$/” & Get ( FileName ) & “?script=Hello”>” & “Hello World” & “</a></body></html>”

This is a data URL that displays all the html right inside the web viewer.

Save by clicking “OK” in the web viewer setup, then save your layout and enter Browse mode to test it out. Click the text that appears in the web viewer. You should see a dialog pop up displaying our message.

Getting Started with Javascript and FileMaker

Let us break down what is happening. The URL you click on uses the fmp protocol. When you install FileMaker, the application registers this protocol with the operating system, telling it that when you launch a url beginning with “fmp://” to hand it over to FileMaker to handle it.

The next part of that URL is a dollar sign ($) which is a way of referencing a file that is currently open by the application. We use this because we are running the script from a currently open file via it’s own web viewer, which we are able to get with the function Get ( FileName ) in FileMaker. That way, it will always reference the currently open file we are in.

The rest of the URL (“?script=Hello”) tells FileMaker which script to run. You can also have a “param” value in your url to also hand off a script parameter.

When you click that link, you are launching FileMaker and telling it to run the script named “Hello” in the file you tell it to, that is currently open. We know the file is open because we were in that file when we clicked the link.


What else can we do with this? Adding a script parameter…

One example might be to collect input from an HTML form displayed in a web viewer. This is just one example and meant to open your mind to what is possible by extending your solutions in this way.

In FileMaker, there isn’t a native way to have a password type input field unless you present the user with a custom dialog. If you want to have your password input field on a layout, you are limited in your options, or have to resort to script triggers and such.

In this example, we will use a web viewer to display an HTML form with our password type field, since HTML has native support for this type of field, and when the form is submitted, hand off the value of that field to a FileMaker script as a parameter.

Create a script and name it “Password” and give it the message: “You entered the Password: “ & Get ( ScriptParameter )

Save your script and create a web viewer with the following web address:

“data:text/html,” & “<html><body style=”margin:4px; border:0; font: 10pt normal arial, sans-serif;”>
</p>

<p>
Password:<br />
<form onsubmit=”return submitForm()”>
<input id=”pass” type=”password” /><br />
<input type=”submit” value=”OK” />
</form>
</p>

<p>
<script>
function submitForm() {
theParam = document.getElementById(“pass”).value;
theURL = “fmp://$/” & Get ( FileName ) & “?script=Password&param=” + theParam;
window.location = theURL ;
document.getElementById(“pass”).value = “”;
return false;
} </script>
</p>

<p>
</body></html>”

Note that all the quote marks in the html have been quoted with a backslash so FileMaker doesn’t stop there, and renders them in the HTML.

If you are familiar with HTML and javascript, you can see that we have a simple form that runs a javascript when it is submitted. The javascript references the input field via the ID we have given it and gets it’s value.

Then it builds the URL back to our FileMaker file, calling the script we just created with the script parameter set to whatever we enter in our form.

Save it and go to browse mode. Enter some text in the password field and you will see it automatically bullets the entry. Hit return or click the “OK” button and it will run our FileMaker script and show us what we entered.

Of course, we wouldn’t normally show someone their password. This is only meant to show how passing parameters can work.


Now something fancier

Now let’s have some fun. Javascript can do much more, and there are plenty of great libraries and resources out there to explore. Jquery is one of my favorite and is pretty easy to work with.

One of the resources I found was for a color picker. You can find it here: (http://bgrins.github.io/spectrum/) and it is freely available. So what if we want to have a color picker in our FileMaker layout that can set the color of our field to whatever color we pick?

For this example, I created a couple of fields to make it easier to type html and javascript. This means we won’t have to put a backslash in front of all the quote marks since FileMaker won’t be evaluating this as part of its calculation, and only including the text from our fields.

 

Getting Started with Javascript and FileMaker

I have broken it up into two parts in order to include the part where FileMaker evaluates the file name of the current file, and put all the pieces together to display my html in a web viewer.

“data:text/html,” & resources::html1 & “fmp://$/” & Get ( FileName ) & “?script=SetRGB&param=” + getRGB + “” & resources::html2

All the resources to drive this are referenced externally, so it loads in jquery along with the color picker javascript and css. This lightens the load of stuff that you have to build into FileMaker, but the could also be loaded locally, if you want to take the time to do that. You might do that in order to run this example without an internet connection, but for this example, one is required, just like loading a web page.

In this example, we have added the fmp url to the callback function in jquery that gets run when a user selects a color. This hands off the RGB parameter that was selected and stores it in a field in FileMaker.

Now we are back in FileMaker land and can work with data that we have in our fields. An auto enter on the fields we want to change color, and we can parse out the RGB values we got back from the web viewer. We set its field definitions for auto enter like this:

Let ([

myField = Self;
values = Substitute ( RGB ; [“rgb(“; “”] ; [“)”; “”] ; [“,”; “¶”] );
red = GetValue ( values ; 1 );
green = GetValue ( values ; 2 );
blue = GetValue ( values ; 3 );

end = “” ] ;

Case (
IsEmpty (RGB); TextColorRemove ( myField ) ;

TextColor ( myField ; RGB ( red ; green ; blue ) )
)
)

Now untick the box that says “Do not replace existing value of field (if any)” so it will always update when we get a new value. When we select a new value from our color picker, the value is set to our field in FileMaker via the script passing a parameter from javascript. Once we set the field in FileMaker to store the value, our auto-enter fields update to the color we selected. Cool!

To check this and the other demos mentioned above, download the sample file below. I have attempted to keep it simple and easy to understand. I know there is more that could be done to clean up interface in these examples, but have left it very bare bones in order for you to examine.

Javascript_Example.zip

Some other things to keep in mind when using web viewers:


  1. Your context is the current record. A web viewer loads for each record that you are on.

  2. In FM Go, you are limited to the number of web viewers on a layout.

  3. You should only have one copy/version of FileMaker (mostly for developers).

Of course we are just scratching the surface of what you can do. Javascript is a great resource to add to your FileMaker tool belt, and now is a great time to add it!


References


  1. W3 Schools Javascript Tutorial http://www.w3schools.com/js/default.asp

  2. jQuery http://jquery.com/

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More