Crear guiones con JavaScript en visualizadores Web

Puede utilizar JavaScript para llevar a cabo acciones en un visualizador Web; por ejemplo, crear sus propios controles de interfaz de usuario o utilizar bibliotecas de JavaScript de terceros para visualizar calendarios interactivos o dibujar gráficos. También puede utilizar JavaScript en un visualizador Web y guiones de FileMaker para que se llamen entre sí y transferir información entre ellos. Por ejemplo, cuando un usuario crea eventos en un calendario interactivo en un visualizador Web, JavaScript puede llamar a un guión de FileMaker para crear un registro para cada evento.

De JavaScript en un visualizador Web a un guión de FileMaker

Una vez que la página Web haya terminado de cargarse en un visualizador Web, JavaScript puede llamar a esta función para ejecutar un guión de FileMaker en el archivo actual:

Copiar 
FileMaker.PerformScriptWithOption ( guión, parámetro, opción ); 

// El comportamiento es igual al anterior cuando la opción es igual a "0".
FileMaker.PerformScript ( guión, parámetro );

donde

  • guión es una cadena que contiene el nombre de un guión de FileMaker (el nombre no distingue entre mayúsculas y minúsculas).

  • parámetro es una cadena opcional que JavaScript puede transferir a un guión de FileMaker, que puede obtener la cadena mediante la función Get ( ScriptParameter ).

  • option es un parámetro opcional de la función FileMaker.PerformScriptWithOption() que controla cómo se gestiona un guión de FileMaker en ejecución (consulte Opciones para gestionar el guión actual cuando se inician nuevos guiones).

Por ejemplo, una función de JavaScript para llamar a un guión de FileMaker presenta el siguiente aspecto:

Copiar 
function performFileMakerScript() {
     FileMaker.PerformScriptWithOption ( "Nombre del guión de FileMaker", "Parámetro opcional", "3" );
}

Se presupone que la función FileMaker.PerformScriptWithOption() se ejecuta de forma asíncrona porque no espera a que finalice el guión de FileMaker. Por lo tanto, el guión de FileMaker no devuelve un valor a la función FileMaker.PerformScriptWithOption() que lo llamó.

En el momento en que se ejecuta la función FileMaker.PerformScriptWithOption(), el guión de FileMaker se ejecuta en el contexto actual. Por lo tanto, si el contexto cambia después del inicio de la ejecución de JavaScript, pero antes de que se llame a la función FileMaker.PerformScriptWithOption(), el guión de FileMaker se ejecutará en un nuevo contexto. Por ejemplo, en algunas situaciones, mientras tanto, el usuario o un guión podrían desplazarse a una presentación o un registro diferentes. Para hacer frente a esta posibilidad, la función FileMaker.PerformScriptWithOption() puede utilizar el parámetro opcional para transferir información contextual, como la presentación y el ID de registro o la clave principal del registro en los que debe actuar el guión de FileMaker.

De un guión de FileMaker a JavaScript en un visualizador Web

En un guión de FileMaker, el paso de guión Ejecutar JavaScript en el visualizador Web puede llamar a una función de JavaScript y transferirle parámetros opcionales. Consulte paso de guión Ejecutar JavaScript en el visualizador Web.

Ejemplo

En este ejemplo, se muestra cómo crear elementos sencillos de la interfaz de usuario en un visualizador Web, establecer sus valores en aquellos almacenados en una tabla de FileMaker, y permitir que el usuario cambie los valores en el visualizador Web y devuelva los nuevos valores a la tabla de FileMaker.

  1. Cree una tabla denominada FormularioWeb con estos campos de texto:

    • FuenteVisualizadorWeb (con almacenamiento global)

    • Nombre

    • Clasificación

    • Color

    Consulte Definir tablas de base de datos y Definir y modificar campos.

  2. En una presentación basada en FormularioWeb, añada un visualizador Web con:

    • la dirección Web FormularioWeb::FuenteVisualizadorWeb.

    • la opción Permitir interacción con contenido del visualizador Web seleccionada.

    • la opción Permitir a JavaScript ejecutar guiones de FileMaker seleccionada.

    • el nombre de objeto VisualizadorWeb.

    Consulte Trabajar con visualizadores Web en presentaciones y Asignar nombres a objetos.

  3. En la misma presentación, añada un objeto de campo para cada campo en el paso 1.

    Consulte Insertar y eliminar campos en presentaciones.

  4. En el modo Visualizar, añada un registro.

    Consulte Añadir, duplicar y eliminar registros.

  5. En el campo Web FormularioWeb::FuenteVisualizadorWeb, introduzca la siguiente dirección URL de datos:

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

        <body>
            <div>
                <label for="name">Nombre:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">Calificación:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Color favorito:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">Enviar</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(
                    "Guardar datos del formulario Web", param, "0"
                ), 
            }

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

    Esta dirección URL de datos proporciona el contenido HTML y de JavaScript que el visualizador Web carga cada vez que se muestra. En la página Web, se muestran un formulario sencillo con un nombre en un campo de texto, una clasificación de 0 a 10 con un control deslizante y un color seleccionado con un selector de color emergente y un botón Enviar.

  6. En el Espacio de trabajo de guiones, cree un guión denominado Establecer datos de usuario en el visualizador Web:

    Copiar 
    Pausar/reanudar guión [ Duración (segundos): .001 ]
    Ejecutar JavaScript en el visualizador Web [ Nombre de objeto: "WebViewer" ; 
        Nombre de función: "setUserData" ; 
        Parámetros: WebForm::Name, WebForm::Rating, WebForm::Color ]

    Consulte Crear y editar guiones.

    En FileMaker WebDirect, una breve pausa le da al visualizador Web tiempo para terminar de cargar la página Web antes de llamar a la función de JavaScript setUserData en el visualizador Web. Para ocultar el mensaje "Guión en pausa" en la barra de herramientas de estado, puede utilizar el paso de guión Mostrar/Ocultar barras de herramientas.

  7. Cree un guión denominado Almacenar datos del formulario Web:

    Copiar 
    Establecer variable [ $jsParameters ; Valor: Get ( ScriptParameter ) ]
    Establecer campo [ FormularioWeb:: Nombre ; GetValue ( $jsParameters ; 1 ) ]
    Establecer campo [ FormularioWeb:: Clasificación ; GetValue ( $jsParameters ; 2 ) ]
    Establecer campo [ FormularioWeb::Color ; GetValue ( $jsParameters ; 3 ) ]

    Cada vez que el usuario haga clic en el botón Enviar del visualizador Web, los valores establecidos en el formulario Web se almacenarán en los campos de la tabla FormularioWeb.

  8. En el modo Presentación, añada los activadores de guiones OnRecordLoad y OnRecordCommit que ejecutan el guión Establecer datos de usuario en el visualizador Web del paso 6 para actualizar el visualizador Web cuando cambien los datos de los campos.

    Consulte Definir o modificar un botón y Establecer activadores de guiones para presentaciones.

En el modo Visualizar, pruebe a realizar el ejemplo. Para ello, establezca los valores del formulario Web y haga clic en Enviar. Los valores de los campos Nombre, Clasificación y Color deberían coincidir ahora con los que ha establecido en el formulario Web. Los cambios realizados en los datos de los campos también se muestran en el visualizador Web cuando se consigna un registro.

Notas 

  • Al configurar un visualizador Web para que ejecute guiones de FileMaker, debe seleccionar la opción Permitir a JavaScript ejecutar guiones de FileMaker. Consulte Trabajar con visualizadores Web en presentaciones. Por motivos de seguridad, cuando esta opción no está seleccionada, la función FileMaker.PerformScriptWithOption() no realiza ninguna acción.

  • Como FileMaker WebDirect está sujeto a una política del mismo origen en los navegadores Web por motivos de seguridad, JavaScript en un visualizador Web y los guiones de FileMaker pueden llamarse entre sí solo si la página Web del visualizador Web tiene el mismo origen que la página Web de FileMaker WebDirect. (El origen de una página Web es su esquema de URL, nombre de anfitrión y puerto).

  • En FileMaker WebDirect, el contenido HTML especificado para el visualizador Web debe comenzar por data:text/html, como se muestra en el ejemplo anterior. De lo contrario, no se podrá completar la llamada a la función FileMaker.PerformScriptWithOption().