webビューワーに表示されている入力フォームの内容を javascript を利用してファイルメーカーのフィールドに入力させたい

Masao · 2021-02-10 23:18:22

FileMaker19を使用しています。
webビューワーに、入力フォームが表示されていて
入力フォームの内容を javascript を利用して
ファイルメーカーのフィールドに登録したいのですがうなくいきません
ご教授願えませんか？よろしくお願いいたします。

●スクリプトワークスペースで新規のスクリプトを作成
WEBビュワーのオブジェクト「web」
webビューアの設定オプション
処理 URLをへ移動
→ webアドレス「指定」ボタン → 計算式の指定

"javascript:
function fmToWeb(param) {
console.log(param)
const fmParam = JSON.parse(param)
document.getElementById('name').value = fmParam.name;
document.getElementById('age').value = fmParam.age;
FileMaker.PerformScript('setResultFromWeb', JSON.stringify(fmParam));
}"

●スクリプトワークスペースで新規のスクリプトを作成

fmToWeb という名前

変数を設定 [ $param ; 値: JSONSetElement ( "" ; [ "name" ; webviewer::name ; JSONString ] ; [ "age" ; webviewer::age ; JSONNumber ] ) ]
Web ビューアで JavaScript を実行 [ オブジェクト名: "web" ; 関数名: "fmToWeb" ; 引数: $param ]

●スクリプトワークスペースで新規のスクリプトを作成

setResultFromWeb という名前

変数を設定 [$param; 値: Get(スクリプト引数)]
フィールド設定[webviewer::result ; $param]

よろしくお願いいたします。

calafate · 2021-02-11 06:24:15

連携動作がわかりやすいように少し分解してみましたので、以下のようにやってみて下さい。

まず新しいスクリプトで、

テキストを挿入[ターゲット: $$html] 内容は以下のhtml文を丸っとコピペで
(filemakerに戻す関数を追加しています）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">FMへ戻す</button>

//filemakerからキックする関数
function fmToWeb(param) {
console.log(param)
const fmParam = JSON.parse(param)
document.getElementById('name').value = fmParam.name;
document.getElementById('age').value = fmParam.age;
}

//filemakerに値を渡す関数
function webToFm() {
const name2 = document.getElementById('name').value;
const age2 = document.getElementById('age').value
const obj = {name: name2, age:age2};
FileMaker.PerformScript('setResultFromWeb', JSON.stringify(obj));
}

//ボタンに関数を割り当てる
window.addEventListener("load",() => {
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
webToFm();
})
})
</script>
</body>
</html>

次にwebビューワーの設定でwebアドレスを指定するボックスに
"data:text/html," & $$html
と記述して下さい。
そして設定でJavascriptによるFileMakerスクリプトの実行を許可のチェックボックスを忘れずにチェック。

これでwebビューワーは$$htmlを常に見るようになり、webビューワー側からFileMakerのスクリプトを叩けます。
あとは2番目のスクリプトを実行すればFileMakerのnameとageフィールドの値がwebビューワーに渡ります。

動作がわかりやすいようにJavascritpに関数webToFm()、そしてそれを発動するボタンを追加してるので、そのボタンでwebビューワー側で入力したnameとageを捉えてFileMakerに戻すようにします。
3番目のwebビューワーから受け取るスクリプトですが、
例えば
変数を設定 $fromWb = Get(スクリプト引数）
フィールド設定webviewer::name JSONGetElement ($fromWb; "name")
フィールド設定webviewer::age JSONGetElement ($fromWb; "age")
にすると、webビューワー上の値が元のFMフィールドに上書きされます。

注意点として、webビューワーは現在実行しているレイアウト上に配置して下さい。

動作検証していませんが、流れとしてはこんな感じにすると双方の動きが掴みやすいと思います。

calafate · 2021-02-11 07:57:36

大事なの忘れていました。
htmleの<body>タグの直下に
<input id="name" placeholder="name"/>
<input id="age" placeholder="age"/>
を追加してください。

遠田昌央 · 2021-02-11 22:00:00

ありがとうございます。
試してみます！

初心者のFileMaker pro Q&A (旧掲示板)

Announcement

新しい掲示板は、こちら:https://fm-aid.com/forum/t/filemaker

#1 2021-02-10 23:18:22