Scripterstellung mit JavaScript in Web Viewern

Sie können JavaScript verwenden, um Aktionen innerhalb eines Web Viewer auszuführen – z. B. zum Erstellen eigener Steuerelemente für die Benutzeroberfläche oder zur Verwendung von JavaScript-Bibliotheken von Drittanbietern, um interaktive Kalender anzuzeigen oder Diagramme darzustellen. Sie können auch JavaScript in einem Web Viewer und FileMaker-Scripts verwenden, um sie gegenseitig aufzurufen und Informationen zwischen ihnen zu übermitteln. Wenn ein Benutzer z. B. Ereignisse in einem interaktiven Kalender in einem Web Viewer erstellt, kann JavaScript ein FileMaker-Script aufrufen, um einen Datensatz für jedes Ereignis zu erstellen.

Von JavaScript in einem Web Viewer zu einem FileMaker-Script

Nachdem die Webseite in einem Web Viewer fertig geladen wurde, kann JavaScript eine der folgenden Funktionen aufrufen, um ein FileMaker-Script in der aktuellen Datei auszuführen:

Kopieren 
FileMaker.PerformScriptWithOption ( Script, Parameter, Option );

// Das Verhalten ist dasselbe wie oben, wenn Option = „0“.
FileMaker.PerformScript ( Script, Parameter );

wobei

Eine JavaScript-Funktion zum Aufrufen eines FileMaker-Scripts sieht z. B. wie folgt aus:

Kopieren 
function performFileMakerScript() {
    FileMaker.PerformScriptWithOption ( "FileMaker Scriptname", "Optionaler Parameter", "3" );
}

Die FileMaker.PerformScriptWithOption()-Funktion arbeitet asynchron, weil sie nicht auf das Ende des FileMaker-Scripts wartet. Daher gibt das FileMaker-Script keinen Wert an die Funktion FileMaker.PerformScriptWithOption() zurück, die es aufgerufen hat.

Zum Zeitpunkt der Ausführung der Funktion FileMaker.PerformScriptWithOption() läuft das FileMaker-Script im aktuellen Kontext. Wenn sich daher der Kontext nach dem Start der JavaScript-Ausführung, aber vor dem Aufruf der Funktion FileMaker.PerformScriptWithOption() ändert, wird das FileMaker-Script in einem neuen Kontext ausgeführt. Beispielsweise könnte der Benutzer oder ein Script in manchen Situationen zwischenzeitlich in ein anderes Layout oder einen anderen Datensatz navigieren. Um diese Möglichkeit abzufangen, kann die Funktion FileMaker.PerformScriptWithOption() den optionalen Parameter verwenden, um Kontextinformationen wie das Layout und die DatensatzID oder den Primärschlüssel des Datensatzes, auf den das FileMaker-Script reagieren soll, zu übergeben.

Von einem FileMaker-Script zu JavaScript in einem Web Viewer

In einem FileMaker-Script kann der Scriptschritt „JavaScript in Web Viewer ausführen“ eine JavaScript-Funktion aufrufen und ihr optionale Parameter übergeben. Weitere Informationen finden Sie unter Scriptschritt „JavaScript in Web Viewer ausführen“.

Beispiel:

Dieses Beispiel zeigt, wie Sie einfache Benutzeroberflächenelemente in einem Web Viewer erstellen, ihre Werte auf die in einer FileMaker-Tabelle gespeicherten Werte setzen, dem Benutzer gestatten, die Werte im Web Viewer zu ändern, und die neuen Werte an die FileMaker-Tabelle zurücksenden.

  1. Erstellen Sie eine Tabelle namens WebForm mit diesen Textfeldern:

    • WebViewerQuelle (mit globaler Speicherung)

    • Name

    • Bewertung

    • Farbe

    Weitere Informationen finden Sie unter Definieren von Datenbanktabellen und Definieren und Ändern von Feldern.

  2. Fügen Sie in einem Layout, das auf WebForm basiert, einen Web Viewer hinzu mit:

    • der Webadresse WebForm::WebViewerQuelle

    • Interaktion mit Web Viewer-Inhalt zulassen ausgewählt

    • JavaScript darf FileMaker-Scripts ausführen ausgewählt

    • dem Objektnamen WebViewer

    Weitere Informationen finden Sie unter Arbeiten mit Web Viewern in Layouts und Benennen von Objekten.

  3. Fügen Sie im gleichen Layout für jedes Feld im Schritt 1 ein Feldobjekt hinzu.

    Weitere Informationen finden Sie unter Platzieren und Entfernen von Feldern in einem Layout.

  4. Fügen Sie im Blätternmodus einen Datensatz hinzu.

    Weitere Informationen finden Sie unter Hinzufügen, Duplizieren und Löschen von Datensätzen.

  5. Geben Sie in das Feld WebForm::WebViewerQuelle die folgende Daten-URL ein:

    Kopieren 
    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">Bewertung:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Lieblingsfarbe:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">Senden</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(
                    "Daten aus Web-Formular speichern", param, "0"
                ); 
            }

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

    Diese Daten-URL stellt das HTML und JavaScript zur Verfügung, das der Web Viewer bei jeder Anzeige lädt. Die Webseite zeigt ein einfaches Formular mit einem Namen in einem Textfeld, einer Bewertung von 0 bis 10, die mit einem Schieberegler ausgewählt wird, einer Farbe, die mit einem Popup-Farbwähler ausgewählt wird, und einer Schaltfläche zum Senden.

  6. Erstellen Sie im Scriptarbeitsbereich ein Script mit dem Namen „Benutzerdaten im Web Viewer festlegen“:

    Kopieren 
    Scriptpause setzen [ Dauer (Sekunden): ,001 ]
    JavaScript in Web Viewer ausführen [ Objektname: "WebViewer" ; 
        Funktionsname: "setUserData" ; 
        Parameter: WebForm::Name, WebForm::Bewertung, WebForm::Farbe ]

    Weitere Informationen finden Sie unter Erstellen und Bearbeiten von Scripts.

    In FileMaker WebDirect gibt eine kurze Pause dem Web Viewer Zeit, um das Laden der Webseite zu beenden, bevor die JavaScript-Funktion setUserData im Web Viewer aufgerufen wird. Um die Meldung „Script ist angehalten“ in der Statussymbolleiste auszublenden, können Sie den Scriptschritt „Symbolleisten ein-/ausblenden“ verwenden.

  7. Erstellen Sie ein Script mit dem Namen „Daten aus WebForm speichern“:

    Kopieren 
    Variable setzen [ $jsParameter ; Wert: Hole ( ScriptParameter ) ]
    Feldwert setzen [ WebForm::Name ; HoleWert ( $jsParameter ; 1 ) ]
    Feldwert setzen [ WebForm::Bewertung ; HoleWert ( $jsParameter ; 2 ) ]
    Feldwert setzen [ WebForm::Farbe ; HoleWert ( $jsParameter ; 3 ) ]

    Wenn der Benutzer auf die Schaltfläche Senden im Web Viewer klickt, werden die im Webformular eingestellten Werte in Feldern der WebForm-Tabelle gespeichert.

  8. Im Layoutmodus fügen Sie die Script-Trigger BeiDatensatzLaden und BeiDatensatzSpeichern hinzu, die das Script „Benutzerdaten im Web Viewer festlegen“ aus Schritt 6 ausführen, um den Web Viewer zu aktualisieren, wenn sich Felddaten ändern.

    Weitere Informationen finden Sie unter Definieren oder Ändern einer Taste und Festlegen von Script-Triggern für Layouts.

Probieren Sie im Blätternmodus das Beispiel aus, indem Sie im Webformular Werte einstellen und auf Senden klicken. Die Werte in den Feldern „Name“, „Bewertung“ und „Farbe“ sollten jetzt mit den Einstellungen im Webformular übereinstimmen. Alternativ werden Änderungen an den Felddaten im Web Viewer angezeigt, wenn der Datensatz bestätigt wird.

Hinweise 

  • Wenn Sie einen Web Viewer für die Ausführung von FileMaker-Scripts einrichten, müssen Sie die Option JavaScript darf FileMaker-Scripts ausführen aktivieren. Weitere Informationen finden Sie unter Arbeiten mit Web Viewern in Layouts. Wenn diese Option nicht aktiviert ist, bewirkt der Aufruf der Funktion FileMaker.PerformScriptWithOption() aus Sicherheitsgründen nichts.

  • Da FileMaker WebDirect in Webbrowsern aus Sicherheitsgründen einer Richtlinie desselben Ursprungs unterliegt, können JavaScript in einem Web Viewer und FileMaker-Scripts einander nur dann aufrufen, wenn die Webseite des Web Viewers denselben Ursprung wie die FileMaker WebDirect-Webseite hat. (Ursprung einer Webseite sind ihr URL-Schema, ihr Hostname und ihr Port.)

  • In FileMaker WebDirect muss das für den Web Viewer angegebene HTML mit „data:text/html,“ beginnen, wie im obigen Beispiel gezeigt. Andernfalls schlägt der Aufruf der Funktion FileMaker.PerformScriptWithOption() fehl.