Använda script med JavaScript i webbvisare

Du kan använda JavaScript för att utföra åtgärder i en webbvisare. Till exempel kan du skapa dina egna användargränssnittskontroller eller använda tredje parts JavaScript-bibliotek för att visa interaktiva kalendrar eller rita diagram. Du kan även använda JavaScript i en webbvisare och FileMaker-script för att anropa varandra och överföra information mellan dem. När en användare till exempel skapar en händelse i en interaktiv kalender i en webbvisare kan JavaScript anropa ett FileMaker-script för att skapa en post för varje händelse.

Från JavaScript i en webbvisare till ett FileMaker-script

När webbsidan har lästs in i en webbvisare kan JavaScript anropa någon av följande funktioner för att köra ett FileMaker-script i den aktuella filen:

Kopiera

FileMaker.PerformScriptWithOption ( script, parameter, alternativ );

// Beteendet är detsamma som ovan när alternativ = "0".
FileMaker.PerformScript ( script, parameter );

där

script är en sträng som innehåller namnet på ett FileMaker-script (namnet är inte skiftlägeskänsligt)
parameter är en icke-obligatorisk sträng som JavaScript kan skicka till ett FileMaker-script, som kan hämta strängen med hjälp av Funktionen Get ( Scriptparameter )
alternativ är en icke-obligatorisk parameter i funktionen FileMaker.PerformScriptWithOption() som styr hur ett FileMaker-script som för närvarande körs ska hanteras (mer information finns i Alternativ för att hantera pågående script när nya script startas)

En JavaScript-funktion för att anropa ett FileMaker-script kan till exempel se ut så här:

Kopiera

function performFileMakerScript() {
    FileMaker.PerformScriptWithOption ( "FileMaker-scriptnamn", "Valfri parameter", "3" );
}

Funktionen FileMaker.PerformScriptWithOption() sägs fungera asynkront eftersom den inte väntar tills FileMaker-scriptet har slutförts. FileMaker-scriptet returnerar därför inget värde till den anropande funktionen FileMaker.PerformScriptWithOption().

När funktionen FileMaker.PerformScriptWithOption() utförs körs FileMaker-scriptet i den aktuella kontexten. Om kontexten ändras efter det att JavaScript-exekveringen inleds men innan funktionen FileMaker.PerformScriptWithOption() anropas, körs därför FileMaker-scriptet i en ny kontext. I vissa situationer kan till exempel användaren eller ett script hinna navigera till en annan layout eller post. För att hantera den här möjligheten kan funktionen FileMaker.PerformScriptWithOption() använda den icke-obligatoriska parametern för att skicka kontextinformation, till exempel layout och post-ID eller primärnyckel för den post där FileMaker-scriptet ska utföra åtgärden.

Från ett FileMaker-script till JavaScript i ett webbvisare

I ett FileMaker-script kan scriptsteget Utför JavaScript i webbvisaren anropa en JavaScript-funktion och skicka icke-obligatoriska parametrar. Mer information finns i Scriptsteget Utför JavaScript i webbvisaren.

Exempel

Det här exemplet visar hur du kan skapa enkla element i en webbvisares användargränssnitt, ange deras värden till dem som lagrats i en FileMaker-tabell, tillåta att användaren ändrar värdena i webbvisaren och skicka tillbaka de nya värdena till FileMaker-tabellen.

Skapa en tabell med namnet Webbformulär och följande textfält:

WebbvisareKälla (med global lagring)
Namn
Betyg
Färg

Mer information finns i Definiera databastabeller och Definiera och ändra fält.

I en layout som baseras på Webbformulär lägger du till en webbvisare enligt följande:

webbadressen Webbformulär::WebbvisareKälla
Tillåt samspel med innehållet i webbvisaren markerat
Tillåt JavaScript att utföra FileMaker-script markerat
objektnamnet Webbvisare

Mer information finns i Arbeta med webbvisare i layouter och Namnge objekt.

I samma layout lägger du till ett fältobjekt för varje fält i steg 1.

Mer information finns i Placera och radera fält i en layout.
Växla till bearbetningsläge och lägg till en post.

Mer information finns i Lägga till, duplicera och radera poster.

Ange följande data-URL i fältet Webbformulär::WebbvisareKälla:

Kopiera

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>

Denna data-URL tillhandahåller HTML och JavaScript som webbvisaren läser in när den visas. Webbsidan visar ett enkelt formulär med ett namn i ett textfält, ett betyg från 0 till 10 som väljs med ett skjutreglage, en färg som väljs på en popup-väljare samt knappen Submit.

Gå till scriptfönstret och skapa ett script med namnet Ange användardata i webbvisare:
Kopiera
```
Paus/fortsätt script [ Varaktighet (sekunder): ,001 ]
Utför JavaScript i webbvisaren [ Objektnamn: "Webbvisare" ; 
    Funktionsnamn: "setUserData" ; 
    Parametrar: Webbformulär::Namn, Webbformulär::Betyg, Webbformulär::Färg ]
```
Mer information finns i Skapa och redigera script.

I FileMaker WebDirect innebär en kort paus att webbvisaren hinner läsa in webbsidan helt innan JavaScript-funktionen setUserData anropas i webbvisaren. Du kan dölja meddelandet om att scriptet har pausats i statusverktygsfältet med hjälp av scriptsteget Visa/dölj verktygsfält.

Skapa ett script med namnet Lagra data från webbformulär:

Kopiera

Ange variabel [ $jsParametrar ; Värde: Get ( Scriptparameter ) ]
Tilldela fält [ Webbformulär::Namn ; GetValue ( $jsParametrar ; 1 ) ]
Tilldela fält [ Webbformulär::Betyg ; GetValue ( $jsParametrar ; 2 ) ]
Tilldela fält [ Webbformulär::Färg ; GetValue ( $jsParametrar ; 3 ) ]

När användaren klickar på knappen Submit i webbvisaren lagras de värden som angetts i webbformuläret i tabellen Webbformulär.

Gå till Layoutläge och lägg till scripttriggern VidPostLäsIn och VidSparaPost som kör scriptet Ange användardata i webbvisaren i steg 6 för att uppdatera webbvisaren när fältdata ändras.

Mer information finns i Definiera eller ändra en knapp och Konfigurera scripttriggers för layouter.

Gå till bearbetningsläge och testa exemplet genom att ange värdena i webbformuläret och klicka på Submit. Värdena i fälten Namn, Betyg och Färg ska nu överensstämma med det du angav i webbformuläret. Ändringar av fältdata kan också visas i webbvisaren när posten verkställs.

Kommentarer

När du anger att en webbvisare ska utföra FileMaker-script måste du markera tillvalet Tillåt JavaScript att utföra FileMaker-script. Mer information finns i Arbeta med webbvisare i layouter. Om det här tillvalet inte har markerats händer av säkerhetsskäl ingenting när funktionen FileMaker.PerformScriptWithOption() anropas.
Eftersom principen om samma ursprung gäller för FileMaker WebDirect i webbläsare av säkerhetsskäl kan JavaScript i en webbvisare och FileMaker-script endast anropa varandra om webbvisarens webbsida har samma ursprung som FileMaker WebDirect-webbsidan. (En webbsidas ursprung är dess URL-schema, värdnamn och port.)
I FileMaker WebDirect måste den HTML som anges för webbvisaren börja med "data:text/html," som i exemplet ovan. Annars misslyckas anropet av funktionen FileMaker.PerformScriptWithOption().