初心者にもわかるファイルメーカーの
使い方

FileMakerからJavaScriptにJSON データを渡す!!

2021-06-21 |  

こんにちは、filemakerチームの久保田です。

今回書かせていただく記事はJavaScriptについてです。filemaker19から「Web ビューアで JavaScript を実行」というスクリプトステップを使用できるようになりました。

今回はこのスクリプトステップを使用して、JavaScriptにjsonデータを渡して、javascript側で計算した結果をFileMaker側で受け取って表示させようと思います。

用意するフィールド

・引数
・html

引数フィールドにJSONデータを挿入する

テーブルとフィールドを作成したら、引数フィールドにJSONデータを挿入します。

JavaScript側からデータを受け取った後の処理を作成する

今回はJavaScript側で計算した結果をダイアログで表示させようと思います。スクリプトは画像の通りです。

htmlフィールドにコードを入力する

JavaScriptで計算させたい内容を書いていきます。書いた後はWebビューアを作成し、Webアドレスのところにhtmlフィールドを指定します。

今回はFileMaker側から受け取ったJSONデータの一部を取得する処理(fileMakerでいうJsonGetElement)を行おうと思います。

scriptタグ内にある処理がJavaScriptの処理となります。

JSON.parseという関数を使用していますが、これはfileMaker側からJavaScriptにJSONデータを渡した際、JavaScript側でJSONオブジェクトと認識してくれなかったため使用しています。

その下のJSON.stringify関数はJSON.parseで一度テキストデータからオブジェクトデータに変えたものを計算後、再度テキストに戻すために使用しています。

またFileMaker.PerformScriptという関数が使われていますが、これはJavaScript側からfileMakerのスクリプトを実行する関数となっています。webビューアを読み込んだ際に処理させるJavaScript関数内にこの関数があると処理してくれます。

JavaScritptの処理を実行させるスクリプトをFileMaker側に作成する。

これで最後です。処理は画像の通りです。

オブジェクト名はWebビューアのオブジェクト名、関数名はhtmlフィールド内で定義したJavaScirptの関数名、引数はJavaScriptで処理させる関数に渡す引数です。

テスト!!

JavaScriptボタンを押すと、、、、

想定したデータを取得できました!!!!!

いかがだったでしょうか。
重たい処理をさせたりFileMakerでは実現しにくいUIを作成する際、JavaScriptは有用だなと思っており、今回のテストはそういったことを試す大きな一歩になったなと思いました。

この記事を読んでくださった皆さんのお役に立てれば幸いです!

ではこれで終わりにさせていただきます、ご精読ありがとうございました!!