Scripts maken met JavaScript in Web Viewers

U kunt JavaScript gebruiken voor het uitvoeren van acties in een Web Viewer, bijvoorbeeld om uw eigen besturingselementen voor de gebruikersinterface te maken of om JavaScript-bibliotheken van derden te gebruiken voor het weergeven van interactieve kalenders of het tekenen van grafieken. U kunt JavaScript ook gebruiken in een Web Viewer en FileMaker-scripts om elkaar aan te roepen en gegevens door te geven. Als een gebruiker bijvoorbeeld gebeurtenissen maakt in een interactieve kalender in een Web Viewer, kan JavaScript een FileMaker-script aanroepen om voor elke gebeurtenis een record te maken.

Vanuit JavaScript in een Web Viewer naar een FileMaker-script

Als de webpagina is geladen in een Web Viewer, kan JavaScript een van de volgende functies aanroepen om een FileMaker-script in het huidige bestand uit te voeren:

Kopiëren 
FileMaker.PerformScriptWithOption (script, parameter, optie);

// Het gedrag is hetzelfde als hierboven wanneer optie = "0".
FileMaker.PerformScript (script, parameter);

waarbij

Een JavaScript-functie voor het aanroepen van een FileMaker-script ziet er bijvoorbeeld zo uit:

Kopiëren 
function performFileMakerScript() {
    FileMaker.PerformScriptWithOption ( "Naam van FileMaker-script", "Optionele parameter", "3" );
}

De functie FileMaker.PerformScriptWithOption() werkt asynchroon omdat er niet wordt gewacht totdat het FileMaker-script is voltooid. Het FileMaker-script retourneert dan ook geen waarde naar de functie FileMaker.PerformScriptWithOption() die het script heeft aangeroepen.

Op het moment dat de functie FileMaker.PerformScriptWithOption() wordt uitgevoerd, wordt het FileMaker-script uitgevoerd in de huidige context. Als de context verandert nadat de uitvoering van JavaScript is gestart maar voordat de functie FileMaker.PerformScriptWithOption() is aangeroepen, wordt het FileMaker-script dus uitgevoerd in een nieuwe context. In bepaalde situaties kan de gebruiker of een script bijvoorbeeld in de tussentijd naar een andere lay-out of record navigeren. Om rekening te houden met deze mogelijkheid, kan in de functie FileMaker.PerformScriptWithOption() de optionele parameter worden gebruikt om gegevens van de context door te geven, zoals de lay-out en de record-ID of primaire sleutel van de record waarop het FileMaker-script actie moet ondernemen.

Vanuit een FileMaker-script naar JavaScript in een Web Viewer

In een FileMaker-script kan de scriptstap JavaScript in Web Viewer uitvoeren een JavaScript-functie aanroepen en hier optionele parameters aan doorgeven. Raadpleeg JavaScript in Web Viewer uitvoeren scriptstap.

Voorbeeld

Dit voorbeeld laat zien hoe u eenvoudige elementen voor de gebruikersinterface maakt in een Web Viewer, hun waarden instelt op waarden die zijn opgeslagen in een FileMaker-tabel, de gebruiker in de gelegenheid stelt om de waarden in de Web Viewer te wijzigen en de nieuwe waarden vast te leggen in de FileMaker-tabel.

  1. Maak een tabel met de naam WebForm met deze tekstvelden:

    • WebViewerSource (met globale opslag)

    • Naam

    • Beoordeling

    • Kleur

    Raadpleeg Databasetabellen definiëren en Velden definiëren en wijzigen.

  2. Voeg in een lay-out gebaseerd op WebForm een Web Viewer toe met:

    • het webadres WebForm::WebViewerSource

    • Interactie met Web Viewer-inhoud toestaan geselecteerd

    • JavaScript toestaan om FileMaker-scripts uit te voeren geselecteerd

    • de objectnaam WebViewer

    Raadpleeg Werken met Web Viewers in lay-outs en Objecten benoemen.

  3. Voeg in dezelfde lay-out een veldobject toe voor elk veld in stap 1.

    Raadpleeg Velden in lay-outs plaatsen en verwijderen.

  4. Voeg in de modus Bladeren een record toe.

    Raadpleeg Records toevoegen, dupliceren en verwijderen.

  5. Voer in het veld WebForm::WebViewerSource de volgende gegevens-URL in:

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

        <body>
            <div>
                <label for="name">Naam:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">Beoordeling:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Favoriete kleur:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">Verzenden</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>

    Deze gegevens-URL levert de HTML en JavaScript die in de Web Viewer worden geladen wanneer deze wordt weergegeven. De webpagina bevat een eenvoudig formulier met een naam in een tekstveld, een beoordeling tussen 0 en 10 die is geselecteerd met een schuifregelaar, een kleur die is geselecteerd in een pop-up kleurkiezer en een knop Verzenden.

  6. Maak in de Scriptwerkruimte een script met de naam Gebruikersgegevens instellen in Web Viewer:

    Kopiëren 
    Script onderbreken/hervatten [ Duur (seconden): ,001 ]
    JavaScript in Web Viewer uitvoeren [ Objectnaam: "WebViewer" ; 
        Functienaam: "setUserData" ; 
        Parameters: WebForm::Name, WebForm::Rating, WebForm::Color ]

    Raadpleeg Scripts maken en bewerken.

    In FileMaker WebDirect geeft een korte pauze de Web Viewer de tijd om de webpagina helemaal te laden voordat de functie setUserData JavaScript wordt aangeroepen in de Web Viewer. Als u het bericht "Script is onderbroken" wilt verbergen op de statusbalk, kan dit met de scriptstap Werkbalken tonen/verbergen.

  7. Maak een script met de naam Gegevens uit webformulier opslaan:

    Kopiëren 
    Variabele instellen [ $jsParameters ; Waarde: Get (ScriptParameter) ]
    Veld instellen [ WebForm::Name ; GetValue ( $jsParameters ; 1 ) ]
    Veld instellen [ WebForm::Rating ; GetValue ( $jsParameters ; 2 ) ]
    Veld instellen [ WebForm::Color ; GetValue ( $jsParameters ; 3 ) ]

    Wanneer de gebruiker op de knop Verzenden klikt in de Web Viewer, worden de waarden die zijn ingesteld in het webformulier opgeslagen in velden in de tabel WebForm.

  8. Voeg in de modus Lay-out de scriptactiveringen BijLadenRecord en BijVastleggenRecord toe die het script Gebruikersgegevens instellen in Web Viewer uitvoeren in stap 6 om de Web Viewer bij te werken wanneer veldgegevens veranderen.

    Raadpleeg Een knop definiëren of wijzigen en Scriptactiveringen voor lay-outs instellen.

Probeer het voorbeeld in de modus Bladeren door waarden in te stellen in het webformulier en te klikken op Verzenden. De waarden in de velden Naam, Beoordeling en Kleur moeten nu overeenkomen met wat u hebt ingesteld in het webformulier. Omgekeerd worden wijzigingen van de veldgegevens weergegeven in de Web Viewer wanneer de record wordt vastgelegd.

Opmerkingen 

  • Wanneer u een Web Viewer instelt voor het uitvoeren van FileMaker-scripts, moet u de optie JavaScript toestaan om FileMaker-scripts uit te voeren selecteren. Raadpleeg Werken met Web Viewers in lay-outs. Uit veiligheidsoverwegingen heeft het aanroepen van de functie FileMaker.PerformScriptWithOption() geen effect wanneer deze functie niet is geselecteerd.

  • Omdat FileMaker WebDirect uit veiligheidsoogpunt onderhevig is aan een zelfde-herkomst-beleid in webbrowsers, kunnen JavaScript in een Web Viewer en FileMaker-scripts elkaar alleen aanroepen als de webpagina van de Web Viewer dezelfde herkomst heeft als de FileMaker WebDirect-webpagina. (De herkomst van een webpagina wordt gevormd door het URL-schema, de hostnaam en de poort.)

  • In FileMaker WebDirect moet de HTML die is opgegeven voor de Web Viewer beginnen met "data:text/html,", zoals in het bovenstaande voorbeeld. Anders mislukt de aanroep naar de functie FileMaker.PerformScriptWithOption().