WebビューアでJavaScript 開発テクニック (2)

【 　 】

【JavaScript 解説】 ブラウザ上に FileMaker のレコード内容を表示


document.addEventListener('DOMContentLoaded', function() {
    const scheduleData = %JSON%;
    loadSchedule(scheduleData);
});

01行目 HTML の初期文書が完全に読み込まれ解釈された時点で発生します

02行目 変数 scheduleData に %JSON% を読み込みます
* %JSON% は FileMakerでJSONデータと置換するための単なる記号です
* %JSON% の生成方法は Webビューアの設定 を参考

03行目 scheduleData を引数としてloadSchedule を実行します(後述)

【JavaScript 解説】 〜にJSON値を表示



function loadSchedule(data) {
    const tableBody = document.getElementById('scheduleTable').getElementsByTagName('tbody')[0];
    data.forEach(item => {
        const row = tableBody.insertRow();
        const timeCell = row.insertCell(0);
        timeCell.textContent = item.time;
        const taskCell = row.insertCell(1);
        taskCell.textContent = item.task;
        taskCell.setAttribute('data-time', item.time);
        taskCell.addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'text';
            input.value = this.textContent;
            const originalParent = this;
            this.innerHTML = '';
            this.appendChild(input);
            input.focus();
... 以下、Webビューアから FileMaker スクリプトを実行に続く

01行目 function loadSchedule(data) …
loadSchedule に引数 data を渡して実行します

02行目 変数 tableBody に id=”scheduleTable” の tbody をセットします

03行目 変数 data (FileMakerで生成して追加したJSON値)の回数分繰り返し処理をします
* ここからは item という変数を使用して進めます
* forEach はカウントをセットしなくてもデータの先頭から何番目という値が自動追加されます

04行目 変数 tableBody に を追加して変数 row とします

05-06行目 変数 timeCell に tableBody の1番目(0)の を追加して item(先頭からn番目)の time(時間帯) 値を挿入します

07-08行目 変数 taskCell に tableBody の2番目(1)の を追加して item(先頭からn番目)の task(予定) 値を挿入します

09行目 指定された要素の属性の値を設定します
変数 taskCell の data-time 属性に item(先頭からn番目)のtime(時間帯) 値を追加します

10行目 taskCell (予定)のセルのクリックを判定します

11行目 変数 input に<input>タグを割り当てます

12行目 11行目 の<input>タグの属性をテキスト入力とします

13行目 11行目 の<input>タグに表示される値は、元々 taskCell(予定)にあった値とします

14-17行目 11行目 の親ノードに子ノード追加してHTMLタグとして生成しフォーカスします

【JavaScript 解説】 Webビューアから FileMaker スクリプトを実行

実行するスクリプト

ChangeTask
– 引数 –
JSON形式 / 変更した time(時間帯) と task(予定)

例)
{“time”:”09:00″,”task”:”ミーティング”} 



input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
       e.preventDefault();
       originalParent.textContent = this.value;
       const data = {};
       data["time"] = originalParent.getAttribute('data-time');
       data["task"] = this.value;
       json_data = JSON.stringify( data );

       FileMaker.PerformScriptWithOption( "ChangeTask", json_data, "0" );
    }
}

01行目 input.addEventListener
JavaScriptからさまざまなイベント処理を実行することができるメソッド
function(e)は 押されたキーを判定

02行目 if(e.key === ‘Enter’){ … }
e.key 押されたキー が Enter の場合、以下のスクリプトを実行

03行目 e.preventDefault
フォームの誤送信を防ぐ一行

04行目 originalParent.textContent
td要素を示します

05 〜 08行目 JSONデータを作成します
例) {“time”:”09:00″,”task”:”ミーティング”}

10行目 FileMaker.PerformScriptWithOption( “ChangeTask”, json_data, “0” );
Web ビューア内の JavaScript から FileMaker のスクリプトを実行
FileMaker スクリプト名 : ChangeTask
スクリプトに渡す引数 : json_data * 05〜08で作成したJSONデータ

WORKSPACE