Automating tasks with scripts > Scripting with JavaScript in web viewers
 

Scripting with JavaScript in web viewers

You can use JavaScript to perform actions within a web viewer—for example, to create your own user interface controls, or use third-party JavaScript libraries to display interactive calendars or draw charts. You can also use JavaScript in a web viewer and FileMaker scripts to call each other and pass information between them. For example, when a user creates events in an interactive calendar in a web viewer, JavaScript can call a FileMaker script to create a record for each event.

From JavaScript in a web viewer to a FileMaker script

After the webpage has finished loading in a web viewer, JavaScript can call this function to run a FileMaker script in the current file:

FileMaker.PerformScript ( script, parameter );

where

script is a string containing the name of a FileMaker script (the name is not case-sensitive)

parameter is an optional string that JavaScript can pass to a FileMaker script, which can obtain the string by using the Get(ScriptParameter) function

For example, a JavaScript function to call a FileMaker script looks like this:

function performFileMakerScript() {
FileMaker.PerformScript ( "FileMaker Script Name", "Optional Parameter" );
}

The FileMaker.PerformScript() function is said to operate asynchronously because it doesn’t wait for the FileMaker script to finish. Therefore, the FileMaker script doesn’t return a value to the FileMaker.PerformScript() function that called it.

At the time the FileMaker.PerformScript() function is executed, the FileMaker script runs in the current context. Therefore, if the context changes after the start of JavaScript execution but before the FileMaker.PerformScript() function is called, the FileMaker script will run in a new context. For example, in some situations, the user or a script could navigate to a different layout or record in the meantime. To deal with this possibility, the FileMaker.PerformScript() function can use the optional parameter to pass in context information, such as the layout and the record ID or primary key of the record that the FileMaker script should act on.

From a FileMaker script to JavaScript in a web viewer

In a FileMaker script, the Perform JavaScript in Web Viewer script step can call a JavaScript function and pass it optional parameters. See Perform JavaScript in Web Viewer script step.

Example

This example shows how to create simple user interface elements in a web viewer, set their values to those stored in a FileMaker table, allow the user to change the values in the web viewer, and submit the new values back to the FileMaker table.

1. Create a table named WebForm with these text fields:

WebViewerSource (with global storage)

Name

Rating

Color

See Defining database tables and Defining and changing fields.

2. In a layout based on WebForm, add a web viewer with:

the web address WebForm::WebViewerSource

Allow interaction with web viewer content selected

Allow JavaScript to perform FileMaker scripts selected

the object name WebViewer

See Working with web viewers on layouts and Naming objects.

3. On the same layout, add a field object for each field in step 1.

See Placing and removing fields on a layout.

4. In Browse mode, add a record.

See Adding, duplicating, and deleting records.

5. In the WebForm::WebViewerSource field, enter the following data URL:

data:text/html,
<html>
<head>
<style>
div { padding-bottom: 0.5em; }
</style>
</head>

<body>
<div>
<label for="name">Name:<br></label>
<input id="name" type="text" value="default">
</div>
<div>
<label for="rating">Rating:<br></label>
0 <input id="rating" type="range" min="0" max="10"> 10
</div>
<div>
<label for="color">Favorite color:<br></label>
<input id="color" type="color">
</div>
<button onclick="submitForm()">Submit</button>
</body>

<script>
function submitForm() {
var name = document.getElementById("name").value;
var rating = document.getElementById("rating").value;
var color = document.getElementById("color").value;
var param = name + '\n' + rating + '\n' + color;
FileMaker.PerformScript("Store Data from Web Form", param);
}

function setUserData(name, rating, color) {
document.getElementById("name").value = name;
document.getElementById("rating").value = rating;
document.getElementById("color").value = color;
}
</script>
</html>

This data URL provides the HTML and JavaScript that the web viewer loads whenever it is displayed. The webpage displays a simple form with a name in a text field, a rating from 0 to 10 selected with a slider, a color selected with a pop-up color chooser, and a submit button.

6. In the Script Workspace, create a script named Set User Data in Web Viewer:

Pause/Resume Script [ Duration (seconds): .001 ]
Perform JavaScript in Web Viewer [ Object Name: "WebViewer" ;
Function Name: "setUserData" ;
Parameters: WebForm::Name, WebForm::Rating, WebForm::Color ]

See Creating and editing scripts.

In FileMaker WebDirect, a short pause gives the web viewer time to finish loading the webpage before calling the setUserData JavaScript function in the web viewer. To hide the "Script is Paused" message in the status toolbar, you can use the Show/Hide Toolbars script step.

7. Create a script named Store Data from Web Form:

Set Variable [ $jsParameters ; Value: Get ( ScriptParameter ) ]
Set Field [ WebForm:Name ; GetValue ( $jsParameters ; 1 ) ]
Set Field [ WebForm:Rating ; GetValue ( $jsParameters ; 2 ) ]
Set Field [ WebForm:Color ; GetValue ( $jsParameters ; 3 ) ]

When the user clicks the Submit button in the web viewer, the values set in the web form are stored in fields in the WebForm table.

8. In Layout mode, add OnRecordLoad and OnRecordCommit script triggers that run the Set User Data in Web Viewer script in step 6 to update the web viewer when field data changes.

See Defining or changing a button and Setting script triggers for layouts.

In Browse mode, try the example by setting values in the web form and clicking Submit. The values in the Name, Rating, and Color fields should now match what you set in the web form. Alternatively, changes to the field data are shown in the web viewer when the record is committed.

Notes 

When you set up a web viewer to perform FileMaker scripts, you must select the Allow JavaScript to perform FileMaker scripts option. See Working with web viewers on layouts. For security, when this option is not selected, calling the FileMaker.PerformScript() function does nothing.

Because FileMaker WebDirect is subject to a same-origin policy in web browsers for security, JavaScript in a web viewer and FileMaker scripts can call each other only if the web viewer’s webpage has the same origin as the FileMaker WebDirect webpage. (A webpage’s origin is its URL scheme, host name, and port.)

In FileMaker WebDirect, the HTML specified for the web viewer must begin with "data:text/html," as shown in the example above. Otherwise, the call to the FileMaker.PerformScript() function fails.