JavaScript is our web browser's scripting language, and any object that uses the operating system's web browser engine inherits its capabilities, including FileMaker's web viewer. We can use JavaScript just like we use a FileMaker script. JavaScript can execute various functions such as:
- Run workflows
- Distribute invoices to select customers
- Save data to a database or variable
- Display a notification to a user, like an alert that inventory is low for a particular product
One of the best properties of JavaScript is that we can use it to extend FileMaker far beyond its native capabilities. By leveraging hundreds of free JavaScript libraries available across the Internet, we can do almost anything we need, including customizing calendars. Let's explore how JavaScript and FileMaker scripting are similar and how they differ.
Defining Variables
Let's start by looking at variables and how each platform handles them. By way of a quick reminder, variables provide a way for both JavaScript and FileMaker to store data temporarily so that we can use it later in operations and calculations within the application. In FileMaker, we typically create a scripted variable and its initial value in the same process. In JavaScript, we can also define a variable and a value in one fell swoop, so not too different from FileMaker.
FileMaker:
Set Variable [ $testVaiable ; Value: 1 + 2 ]
JavaScript:
var testVariable = 1 + 2;
We might also see this:
var testVariable;
testVariable = 1 + 2;
JavaScript can create multiple variables at once as well as assign values:
var firstNum = 1, secondNum = 2;
var thirdNum = firstNum + secondNum;
FileMaker dynamically assigns the data type of the variables based on the data that is placed in them. So, for example, if we put just numbers into the variable, they will be treated as numbers. And text entries will be treated as text. JavaScript processes variables similarly; however, we can use single or double quotes to define text variables as long as we use the quotation marks consistently.
A number in FileMaker:
Set Variable [ $testVariable ; Value: 100 ]
Text in FileMaker:
Set Variable [ $testVariable ; Value: "100" ]
A number in JavaScript:
var testVariable = 100;
Text in JavaScript:
var testVariable = '100';
Both platforms require us to escape double quotes if they're intended to be part of the variable's value.
FileMaker:
Set Variable [ $testVariable ; Value: "Sally \"The Seashell Queen\" Jones" ]
JavaScript:
var testVariable = 'Sally \"The Seashell Queen\" Jones';
Naming Variables
The two platforms have different specifications for variable naming conventions. In FileMaker, script-based variables require either a single dollar sign ($) or double dollar signs ($$) to precede the name, i.e. $variableName. FileMaker uses the dollar signs to determine if the variable is global to the file or local to the script.
$ = local FileMaker variable
$$ = global FileMaker variable
JavaScript doesn't have the same requirements. Not only can we use dollar signs, but other characters as well. However, JavaScript restricts the use of numerals at the beginning of the variable name. And, dashes or periods in the middle of the name are also not permitted. So, names like "1varName" or "var.Name" would be invalid. Please note, JavaScript variable names are case-sensitive, so the following function would not work:
var = firstNum = 1, secondNum = 2;
var =thirdNum = FIRSTNUM + secondNum;
Arrays
Both JavaScript and FileMaker can use variables as arrays. Arrays are lists of data that can be numbers, text, dates, or a combination thereof. They are helpful because they store a lot of information in one object (the variable in this case) in a predictable and indexed form, making it easy to access. FileMaker simulates the behavior of arrays with its repeating fields function, and JavaScript utilizes something comparable but slightly different. FileMaker uses the notation similar to JavaScript, but its index starts at 1, not 0.
FileMaker
Set Variable [ $testArray ; Value: 100 ]
Set Variable [ $testArray[2] ; Value: 100 ]
Set Variable [ $testTotal ; Value: $testArray + $testArray[2] ]
JavaScript
var testArray = [ 100, 100 ];
var testTotal = testArray[0]+ testArray[1];
Other Variable Functions
As we close out our discussion of how JavaScript and FileMaker work with variables, we would like to chat briefly about a few things not related to just variables but will likely affect them on either platform.
Concatenation
FileMaker
Set Variable [ $fullName ; Value: "Sally " & "Jones" ]
JavaScript
var fullName = 'Sally ' + 'Jones';
Logical operators
FileMaker
OR: Set Variable [ $thisisTrue ; Value: (2>1) or (3>2) ]
AND: Set Variable [ $thisisTrue ; Value: (2>1) and (3>2) ]
JavaScript
OR: var thisisTrue = (2>1) || (3>2) ]
AND: var thisisTrue = (2>1) && (3>2) ]
And there you have it! This pretty much summarizes how JavaScript and FileMaker handle variables. You can see that they aren't all that different, so don't be afraid to jump into the JavaScript pool; it's nice and warm.
Next, we discuss how to use JavaScript in FileMaker, specifically functions, to extend the capabilities of your custom applications. Also, be sure to check out our article on how to debug JavaScript code to help you resolve any semantic issues.
Join our mailing list to keep up with the new features and latest information about FileMaker and other custom application development platforms.
This article is also published on FileMakerProGurus.com.