Script com JavaScript em visualizadores web

É possível usar o JavaScript para executar ações em um visualizador Web, por exemplo, para criar seus próprios controles da interface do usuário ou usar bibliotecas JavaScript de terceiros para exibir calendários interativos ou desenhar gráficos. Você também pode usar o JavaScript em um visualizador web e em scripts do FileMaker para que eles chamem um ao outro e transfiram informações entre si. Por exemplo, quando um usuário cria eventos em um calendário interativo em um visualizador Web, o JavaScript pode chamar um script do FileMaker para criar um registro para cada evento.

Do JavaScript em um visualizador Web para um script do FileMaker

Após o carregamento da página da Web em um visualizador Web, o JavaScript poderá invocar uma das funções a seguir para executar um script do FileMaker no arquivo atual:

Copiar 
FileMaker.PerformScriptWithOption ( script, parameter, option ); 

// O comportamento é o mesmo que acima quando a opção for = "0".
FileMaker.PerformScript ( script, parâmetro );

onde

  • script é uma string que contém o nome de um script FileMaker (o nome não diferencia maiúsculas e minúsculas)

  • parâmetro é uma sequência opcional que o JavaScript pode transmitir para um script do FileMaker, que pode obter a sequência usando a Função Get(ScriptParameter)

  • option é um parâmetro opcional da função FileMaker.PerformScriptWithOption() que controla com que frequência o script do FileMaker é manuseado (consulte Opções para manusear o script atual ao iniciar novos scripts)

Por exemplo, uma função JavaScript para chamar um script do FileMaker seria assim:

Copiar 
function performFileMakerScript() { FileMaker.PerformScriptWithOption ( "FileMaker Script Name", "Optional Parameter", "3" );
}

A função FileMaker.PerformScriptWithOption() é conhecida por operar de maneira assíncrona porque não aguarda a conclusão do script do FileMaker. Portanto, o script do FileMaker não retorna valor para a função FileMaker.PerformScriptWithOption() que o invocou.

No momento da execução da função FileMaker.PerformScriptWithOption(), o script do FileMaker é executado no contexto atual. Portanto, se o contexto mudar após o início da execução do JavaScript, mas antes da invocação da função FileMaker.PerformScriptWithOption(), o script do FileMaker será executado em um novo contexto. Por exemplo, em algumas situações, o usuário ou um script pode navegar para um layout ou registro diferente. Para lidar com essa possibilidade, a função FileMaker.PerformScriptWithOption() pode usar o parâmetro opcional para transmitir informações de contexto, como o layout e o ID do registro ou a chave primária do registro em que o script do FileMaker deve agir.

De um script do FileMaker para o JavaScript em um visualizador Web

Em um script do FileMaker, a etapa de script Executar JavaScript no visualizador Web pode chamar uma função JavaScript e transmitir parâmetros opcionais. Consulte a Etapa de script Executar JavaScript no Visualizador Web.

Exemplo

Este exemplo mostra como criar elementos simples da interface do usuário em um visualizador Web, definir seus valores para os armazenados em uma tabela do FileMaker, permitir que o usuário altere os valores no visualizador Web e enviar os novos valores outra vez para a tabela do FileMaker.

  1. Crie uma tabela de nome WebForm com estes campos de texto:

    • WebViewerSource (com armazenamento global)

    • Name

    • Rating

    • Color

    Consulte Definição de tabelas de banco de dados e Definição e alteração de campos.

  2. Em um layout com base em WebForm, adicione um visualizador Web com:

    • o endereço Web do WebForm::WebViewerSource

    • Permitir interação com conteúdo do visualizador Web selecionado

    • Permitir que o JavaScript execute scripts do FileMaker selecionado

    • o nome do objeto WebViewer

    Consulte Utilização de visualizadores Web em layouts e Nomeação de objetos.

  3. No mesmo layout, adicione um objeto de campo para cada campo na etapa 1.

    Consulte Inserção e remoção de campos em um layout.

  4. No Modo de navegação, adicione um registro.

    Consulte Adição, duplicação e exclusão de registros.

  5. No campo WebForm::WebViewerSource, digite a seguinte URL de dados:

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

        <body>
            <div>
                <label for="name">Nome:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating"> Classificação:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">Cor favorita:<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(
                    "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>

    Essa URL de dados fornece o HTML e o JavaScript que o visualizador Web carrega sempre que é exibido. A página da Web exibe um formulário simples com nome em um campo de texto, uma classificação de 0 a 10 selecionada com um controle deslizante, uma cor definida com um seletor de cores pop-up e um botão de envio.

  6. No Espaço de trabalho de script, crie um script chamado Definir dados do usuário no visualizador Web:

    Copiar 
    Pausar/continuar script [ Duração (segundos): ,001 ]
    Executar JavaScript no visualizador Web [ Nome do objeto: "WebViewer" ; 
        Nome da função: "setUserData" ;
        Parâmetros: WebForm::Name, WebForm::Rating, WebForm::Color ]

    Consulte Criação e edição de scripts.

    No FileMaker WebDirect, uma breve pausa dá tempo para o visualizador Web concluir o carregamento da página antes de chamar a função JavaScript setUserData no visualizador Web. Para ocultar a mensagem "O script está em pausa" na barra de ferramentas de status, você pode usar a etapa de script Mostrar/ocultar barras de ferramentas.

  7. Crie um script chamado Armazenar dados do formulário Web:

    Copiar 
    Definir variável [ $jsParâmetros ; Valor: Get ( ScriptParameter ) ]
    Definir campo [ WebForm::Name ; GetValue ( $jsParâmetros ; 1 ) ]
    Definir campo [ WebForm::Rating ; GetValue ( $jsParâmetros ; 2 ) ]
    Definir campo [ WebForm::Color ; GetValue ( $jsParâmetros ; 3 ) ]

    Quando o usuário clicar no botão Enviar no visualizador Web, os valores definidos no formulário Web serão armazenados em campos na tabela WebForm.

  8. No modo layout, adicione os acionadores de script AoCarregarRegistro e AoConfirmarRegistro que executam o script Definir dados do usuário no Visualizador Web 6 para atualizar o visualizador web quando os dados do campo mudam.

    Consulte Definição ou alteração de um botão e Configuração de gatilhos de script para layouts.

No Modo de navegação, tente o exemplo definindo valores no formulário da Web e clicando em Enviar. Agora, os valores nos campos Nome, Classificação e Cor devem corresponder ao que você definir no formulário da Web. Como alternativa, as alterações nos dados do campo são mostradas no visualizador Web quando o registro é confirmado.

Notas

  • Ao configurar um visualizador Web para executar scripts do FileMaker, você deve selecionar a opção Permitir que o JavaScript execute scripts do FileMaker. Consulte Utilização de visualizadores Web em layouts. Por segurança, quando essa opção não está selecionada, invocar a função FileMaker.PerformScriptWithOption() não resulta em nada.

  • Como o FileMaker WebDirect está sujeito a uma política de mesma origem nos navegadores da Web para segurança, o JavaScript em um visualizador Web e os scripts do FileMaker só podem se chamar se a página do visualizador Web tiver a mesma origem da página do FileMaker WebDirect. (A origem de uma página da web é seu esquema de URL, nome do host e porta.)

  • No FileMaker WebDirect, o HTML especificado para o visualizador Web deve começar com "data:text/html,", conforme mostrado no exemplo acima. Caso contrário, a invocação da função FileMaker.PerformScriptWithOption() falhará.