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.

  1. 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.

  2. 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.

  3. 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.

  4. Växla till bearbetningsläge och lägg till en post.

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

  5. 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.

  6. 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.

  7. 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.

  8. 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().