FileMakerのポータルフィルタをWebviewerでコントロール
はじめに
FileMakerでポータルを使用する際、何らかの検索キーワードを元にポータルのレコードを絞り込む、といったケースはよくあると思います。通常であれば、検索キーワード入力用のフィールドを設け、そこに入力された値を元にポータルレコードをフィルタリングさせる流れになると思います。
しかし、日本語環境の場合、入力した文字が確定していない間（文字変換中）はフィルタリングは発火しません。
"おおはら" でフィルタリングしようとしている様子。しかし変換中は発火しない。
※使用している名前データは全てテストデータ・ジェネレータのものです。
これを、文字を入力し始めた段階でフィルタリングをガリガリ発火させよう、というのが今回ご紹介する手法です。
まず下準備
デカルト積リレーションなどで繋ぐ
例えば、display に order のレコードをポータルで表示させる形にし、ポータルのオブジェクト名は orderList と設定したとします。
ここまでは、一般的なポータルの設置です。
ここからが本題
検索キーワード入力用のフォームを Webviewer で作成します。
Webviewerの設定
Webviewerのオブジェクト名を設定し（本例では web）
そのオブジェクト web にHTMLソース（検索フォーム）を設定する為のスクリプト set.web を作成します。
挿入するhtmlソース
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
proc = function () {
var keyWord = $(this).val();
FileMaker.PerformScriptWithOption("__resultWeb", keyWord, 0);
};
$('#searchKey').on('input', proc);
});
</script>
</head>
<body>
<form>
<input type="text" id="searchKey" value="" placeholder="検索キーワード">
</form>
</body>
</html>
jsがキックするスクリプト作成
次に、このHTMLソース11行目でjsがキックするスクリプト __resultWeb を作成します。
ポータルのフィルタ設定
ポータルのフィルタ計算式を、__resultWeb スクリプトで受け取った引数 $$resultWord でフィルタリングするように設定。
Let (
[
~keyWord = $$resultWord ;
~buyerName = order::buyerName ;
~buyerNameKana = order::buyerNameKana
];
Case (
IsEmpty ( ~keyWord ) ; 1 ;
PatternCount ( ~buyerName ; ~keyWord ) or
PatternCount ( ~buyerNameKana ; ~keyWord ) or
PatternCount ( ~buyerNameKana ; Katakana ( ~keyWord ) )
)
)
set.web を実行すると検索フォームが表示され、準備完了です。
set.web を実行した状態
検索フォームに入力した文字が変換中でも、フィルタリングされるようになります。
仕組みとしては、jqueryのon()メソッドを利用し検索フォームを監視、
検索フォームに変化がある度にキーワードを取得
↓
そのキーワードを引数としてjsがスクリプト__resultWebをキック
↓
キーワードでポータルがフィルタリングされる
という流れです。
注意点
グローバル変数を利用していますので、変数管理（クリアするタイミングなど）に十分注意して下さい。
おわりに
Webviewer側で検索コントロールするので、ひな形を作っておけば新たなフィールドを設ける必要なく、色んな既存ポータルで利用できたりします。サンプルとして約一万レコードを用意しフィルタリングしてみましたが、パフォーマンスはそれほど悪くはなさそうです。
それでは
Let's enjoy FileMaker！
Discussion