How to setup Webviewer in Filemaker to use JavaScript

How to setup Webviewer in Filemaker to use JavaScript

This tutorial will guide you through the process of setting up a Web Viewer in FileMaker to use JavaScript, allowing for more interactive and dynamic web content within your FileMaker solution.

Step-by-Step Guide

Step 1: Create a New FileMaker File

  1. Open FileMaker Pro.
  2. Go to File > New Solution.
    3. Create a New FileMaker File
  3. Name your file (e.g., WebViewerJS) and choose a location to save it.
  4. Click Save. The database window will pop up.
    5. Create an HTML Field

Step 2: Create an HTML Field

  1. In the database window, go to File > Manage > Database.
  2. In the Fields tab, create a new text field named HTMLContent.
    3. Create an HTML Field
  3. Click OK to save the field.

Step 3: Add the HTML Template to the HTML Field

  1. In Browse mode, select the layout that was automatically created (e.g., Main Layout).
  2. Enter data mode (click on the pencil icon in the status toolbar).
  3. Click into the HTMLContent field and enter the following HTML template with embedded JavaScript:
<html>
            <head>
                <title>FileMaker Web Viewer</title>
                <script>
                    function sendToFM() {
                        FileMaker.PerformScript("ReceiveFromJS", "Hello from JavaScript!");
                    }
                    function receiveFromFM(message) {
                        document.getElementById('message').innerText = message;
                    }
                </script>
            </head>
            <body>
                <h1>FileMaker Web Viewer with JavaScript</h1>
                <button onclick="sendToFM()">Click Me</button>
                <p id="message"></p>
            </body>
            </html>
Add the HTML Template to the HTML Field

Step 4: Add a Web Viewer to the Layout

  1. Switch to Layout mode.
  2. Select the Web Viewer tool from the toolbar.
  3. Draw a rectangle on the layout where you want the Web Viewer to appear.
  4. The Web Viewer Setup dialog will appear.
Add a Web Viewer to the Layout

Step 5: Configure the Web Viewer to Use the HTML Field

  1. In the Web Viewer Setup dialog, choose Specify Custom Web Address.
  2. Enter the following formula to reference the HTMLContent field: 
    "data:text/html," & YourTable::HTMLContent
  3. Ensure that Allow JavaScript to perform FileMaker scripts is enabled in the same window.
  4. Name the Web Viewer object WebViewer in the Object Name field.
  5. Click OK to close the dialog.
Configure the Web Viewer to Use the HTML Field

Step 6: Create a Script to Handle JavaScript Calls

  1. Go to Scripts > Script Workspace.
  2. Create a new script named ReceiveFromJS.
  3. Add the following steps to the script: 
    Show Custom Dialog ["Message from JavaScript"; Get(ScriptParameter)]
  4. Save and close the script.
Create a Script to Handle JavaScript Calls

Step 7: Test the Integration

  1. Switch to Browse mode.
  2. Click the button in the Web Viewer.
  3. You should see a dialog box with the message "Hello from JavaScript!".
Test the Integration

Step 8: Additional Enhancements

Passing Data from FileMaker to JavaScript

  1. Create a field (e.g., Message) and place it on the layout.
  2. Modify the HTML template in the HTMLContent field to include the field data: 
    <html>
                    <head>
                        <title>FileMaker Web Viewer</title>
                        <script>
                            function sendToFM() {
                                FileMaker.PerformScript("ReceiveFromJS", "Hello from JavaScript!");
                            }
                            function receiveFromFM(message) {
                                document.getElementById('message').innerText = message;
                            }
                        </script>
                    </head>
                    <body>
                        <h1>FileMaker Web Viewer with JavaScript</h1>
                        <button onclick="sendToFM()">Click Me</button>
                        <p id="message"></p>
                    </body>
                    </html>
  3. Add a new script in FileMaker to call the receiveFromFM function in JavaScript: 
    Perform JavaScript in Web Viewer [ Object Name: "WebViewer"; Function Name: "receiveFromFM"; Parameters: YourTable::Message ]
  4. Trigger this script whenever you want to pass data from FileMaker to the Web Viewer.
Passing Data from FileMaker to JavaScript

By following these steps, you will set up a new FileMaker file that can communicate with JavaScript in a Web Viewer, allowing for more interactive and dynamic web content within your FileMaker solution.