Création d'un script à l'aide de JavaScript dans les Web Viewers

Vous pouvez utiliser JavaScript pour exécuter des actions dans un Web Viewer, par exemple, pour créer vos propres commandes d'interface utilisateur, ou utiliser des bibliothèques JavaScript tierces pour afficher des calendriers interactifs ou tracer des graphiques. Vous pouvez également utiliser JavaScript dans un Web Viewer et des scripts FileMaker pour qu'ils s'appellent et se transmettent des informations. Par exemple, lorsqu'un utilisateur crée des événements dans un calendrier interactif dans un Web Viewer, JavaScript peut appeler un script pour créer un enregistrement de chaque événement.

De JavaScript dans un Web Viewer à un script FileMaker

Une fois la page Web chargée dans un Web Viewer, JavaScript peut appeler l'une des fonctions suivantes pour exécuter un script FileMaker dans le fichier actif :

Copier 
FileMaker.PerformScriptWithOption ( script, paramètre, option ); 

// Le comportement est identique à celui ci-dessus lorsque option = "0".
FileMaker.PerformScript ( script, paramètre );

où

Par exemple, une fonction JavaScript pour appeler un script FileMaker a l'aspect suivant :

Copier 
function performFileMakerScript() { 
     FileMaker.PerformScriptWithOption ( "Nom du script FileMaker", "Paramètre facultatif", "3" );
}

La fonction FileMaker.PerformScriptWithOption() fonctionne de façon asynchrone, car elle n'attend pas la fin du script FileMaker. Par conséquent, le script FileMaker ne renvoie aucune valeur à la fonction FileMaker.PerformScriptWithOption() qui l'a appelé.

Au moment où la fonction FileMaker.PerformScriptWithOption() est exécutée, le script FileMaker s'exécute dans le contexte actif. Par conséquent, si le contexte change après le début de l'exécution JavaScript mais avant que l'appel de la fonction FileMaker.PerformScriptWithOption(), le script FileMaker s'exécute dans un nouveau contexte. Par exemple, dans certaines situations, l'utilisateur ou un script peuvent accéder à un autre modèle ou un enregistrement pendant ce temps-là. Pour prendre en compte cette possibilité, la fonction FileMaker.PerformScriptWithOption() peut utiliser le paramètre facultatif pour transmettre des informations contextuelles, telles que le modèle et l'ID d'enregistrement ou la clé primaire de l'enregistrement sur lequel le script FileMaker doit agir.

D'un script FileMaker à JavaScript dans un Web Viewer

Dans un script FileMaker, l'action de script Exécuter JavaScript dans Web Viewer peut appeler une fonction JavaScript et lui transmettre des paramètres facultatifs. Consultez la section action de script Exécuter JavaScript dans Web Viewer.

Exemple

Cet exemple indique comment créer de simples éléments d'interface utilisateur dans un Web Viewer, définir leurs valeurs sur celles stockées dans une table FileMaker, permettre à l'utilisateur de modifier les valeurs dans le Web Viewer et renvoyer les nouvelles valeurs à la table FileMaker.

  1. Créez une table nommée FormulaireWeb contenant les rubriques Texte suivantes :

    • SourceWebViewer (avec stockage global)

    • Nom

    • Evaluation

    • Couleur

    Consultez les sections Définition des tables de base de données et Définition et modification de rubriques.

  2. Dans un modèle basé sur FormulaireWeb, ajoutez un Web Viewer avec les éléments suivants :

    • l'adresse Web FormulaireWeb::SourceWebViewer ;

    • l'option Autoriser l'interaction avec le contenu du Web Viewer sélectionnée ;

    • l'option Autoriser JavaScript à exécuter des scripts FileMaker sélectionnée ;

    • le nom d'objet WebViewer.

    Consultez les sections Utilisation des Web Viewers dans les modèles et Attribution d'un nom à un objet.

  3. Dans le même modèle, ajoutez un objet rubrique pour chaque rubrique de l'étape 1.

    Consultez la section Placement et suppression de rubriques dans un modèle.

  4. En mode utilisation, ajoutez un enregistrement.

    Consultez la section Ajout, duplication et suppression d'enregistrements.

  5. Dans la rubrique FormulaireWeb::SourceWebViewer, saisissez l'URL de données suivante :

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

        <body>
            <div>
                <label for="name">Nom :<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">Evaluation :<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Couleur favorite :<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">Envoyer</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(
                    "Stocker les données du formulaire Web", param, "0"
                ); 
            }

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

    Cette URL de données fournit le HTML et le JavaScript chargés par Web Viewer à chaque affichage. La page Web affiche un simple formulaire avec un nom dans une rubrique Texte, une évaluation de 0 à 10 sélectionnée à l'aide d'un curseur, une couleur sélectionnée à l'aide d'un sélecteur de couleur de fenêtre contextuelle et un bouton d'envoi.

  6. Dans l'Espace de travail de script, créez un script nommé Définir les données utilisateur dans le Web Viewer :

    Copier 
    Suspendre/reprendre script [ Durée (secondes): ,001 ]
    Exécuter JavaScript dans Web Viewer [ Nom d'objet: "WebViewer" ; 
        Nom de la fonction: "definirDonneesUtilisateur" ; 
        Paramètres: formulaireWeb::Nom, formulaireWeb::Evaluation, formulaireWeb::Couleur ]

    Consultez la section Création et modification de scripts.

    Dans FileMaker WebDirect, une brève pause permet au Web Viewer de terminer le chargement de la page Web avant d'appeler la fonction JavaScript definirDonneesUtilisateur. Pour masquer le message « Le script est suspendu » dans la barre d'outils, vous pouvez utiliser l'action de script Afficher/masq. barres d'outils.

  7. Créez un script nommé Stocker les données du formulaire Web :

    Copier 
    Définir variable [ $jsParameters ; Valeur: Obtenir ( ParamètreScript ) ]
    Définir rubrique [ formulaireWeb::Nom ; ObtenirValeur ( $jsParameters ; 1 ) ]
    Définir rubrique [ formulaireWeb::Evaluation ; ObtenirValeur ( $jsParameters ; 2 ) ]
    Définir rubrique [ formulaireWeb::Couleur ; ObtenirValeur ( $jsParameters ; 3 ) ]

    Lorsque l'utilisateur clique sur le bouton Envoyer dans le Web Viewer, les valeurs définies dans le formulaire Web sont stockées dans des rubriques dans la table FormulaireWeb.

  8. En mode Modèle, ajoutez les déclencheurs de script SurChargementEnregistrement et SurValidationEnregistrement qui exécutent le script Définir les données utilisateur dans le Web Viewer à l'étape 6 pour mettre à jour le Web Viewer lorsque des données de rubrique sont modifiées.

    Consultez les sections Définition ou modification d'un bouton et Définition des déclencheurs de scripts des modèles.

En mode Utilisation, définissez des valeurs dans le formulaire Web et cliquez sur Envoyer. Les valeurs des rubriques Nom, Evaluation et Couleur devraient désormais correspondre aux valeurs définies dans le formulaire Web. Sinon, les modifications apportées aux données de rubrique s'affichent dans le Web Viewer lorsque l'enregistrement est envoyé.

Remarques 

  • Lorsque vous configurez un Web Viewer pour exécuter des scripts FileMaker, vous devez sélectionner l'option Autoriser JavaScript à exécuter des scripts FileMaker. Consultez la section Utilisation des Web Viewers dans les modèles. Pour des raisons de sécurité, lorsque cette option n'est pas sélectionnée, l'appel de la fonction FileMaker.PerformScriptWithOption() ne renvoie aucun résultat.

  • Comme FileMaker WebDirect est soumis à la politique d'origine identique dans les navigateurs Web pour des raisons de sécurité, JavaScript dans un Web Viewer et les scripts FileMaker peuvent s'appeler uniquement si la page Web du Web Viewer a la même origine que la page Web de FileMaker WebDirect. (L'origine d'une page Web est son schéma d'URL, son nom d'hôte et son port.)

  • Dans FileMaker WebDirect, le HTML défini pour le Web Viewer doit commencer par « data:text/html, », tel qu'indiqué dans l'exemple ci-dessus. Sinon, l'appel de la fonction FileMaker.PerformScriptWithOption() échoue.