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 one of the following functions to run a FileMaker script in the current file:

Copy

FileMaker.PerformScriptWithOption ( script, parameter, option );

// Behavior is the same as above when option = "0".
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
option is an optional parameter in the FileMaker.PerformScriptWithOption() function that controls how a currently running FileMaker script is handled (see Options for handling the current script when starting new scripts)

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

Copy

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

The FileMaker.PerformScriptWithOption() 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.PerformScriptWithOption() function that called it.

At the time the FileMaker.PerformScriptWithOption() 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.PerformScriptWithOption() 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.PerformScriptWithOption() 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.

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.

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.

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

See Placing and removing fields on a layout.
In Browse mode, add a record.

See Adding, duplicating, and deleting records.

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

Copy

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.PerformScriptWithOption(
                "Store Data from Web Form", param, "0"
            ); 
        }

        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.

In the Script Workspace, create a script named Set User Data in Web Viewer:
Copy
```
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.

Create a script named Store Data from Web Form:

Copy

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.

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.PerformScriptWithOption() 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.PerformScriptWithOption() function fails.