ルックアップ対象が複数あるときにルックアップウィンドウが起動しない

ドロップダウンリストの”積場エリア”を選択すると、”積場ルックアップ”の入力エリアに文字を自動的にセットした後、取得ボタンが自動で押されるように、
”subtable[tblIndex].value[‘積場ルックアップ’].lookup = true;”
にしましたが、選択リストが表示されません。

”積場ルックアップ”の入力エリアに文字がセットされている状態で、”取得”ボタンをクリックすると、正しく選択リストが表示されますので、ルックアップの定義は正しくなっています。

(function() {
"use strict";
var events = [
    'app.record.index.edit.change.積場エリア',
    'app.record.create.change.積場エリア',
    'app.record.edit.change.積場エリア'
];
     kintone.events.on(events, function(event){
        var subtable = event.record['運行記録TBL'].value;
        var row = event.changes.row.value;
            var tumibaArea = row['積場エリア'].value;
            row['積場ルックアップ'].value = tumibaArea;
        console.log(event.record);
        var tblIndex = subtable.length - 1;
        console.log(tblIndex);
        subtable[tblIndex].value['積場ルックアップ'].lookup = true;
        return event;
     });
})();

追記)

ルックアップで取得するデータが1件のときには、自動的に取得できています。

「record[*フィールドコード*].lookup = true」は取得ボタンを押す動作とは違うので、ルックアップの検索候補が複数ある場合は動作しません(あくまで検索結果が1件だった場合に自動取得するものです)。

取得ボタンを押す動作と同じようにする場合は、DOM操作で取得ボタンのクラス名を取得しclick()関数を実行するしかないと思われます。

mis-hashimotoさん

コメントありがとうございます。

>「record[*フィールドコード*].lookup = true」は取得ボタンを押す動作とは違うので、ルックアップの検索候補が複数ある場合は動作しません(あくまで検索結果が1件だった場合に自動取得するものです)
1件しかデータがないものばかり制作していたので、気が付きませんでした。

>取得ボタンを押す動作と同じようにする場合は、DOM操作で取得ボタンのクラス名を取得しclick()関数を実行するしかないと思われます。
”取得”ボタンをクリックさせるように考えてみます

 

n-uさんの「ルックアップの取得ボタンの自動押下」と同じことを行いたいので、”取得”ボタンをクリックする箇所(以下)を追加しましたが、取得ボタンが押下されていません。コンソールにエラーは表示されないので、「document.querySelector(‘.button-simple-cybozu.input-lookup-gaia’).click();」の記述にミスはないようです。

以下が変更後のスクリプトになります。

// 品名エリアで選択された値を取得して、”品名ルックアップ”フィールドにセット
(function() {
"use strict";
var events = [
    'app.record.index.edit.change.品種',
    'app.record.create.change.品種',
    'app.record.edit.change.品種'
];
     kintone.events.on(events, function(event){
        var subtable = event.record['運行記録TBL'].value;
        var row = event.changes.row.value;
        var hinmeiArea = row['品種'].value;
        row['品名ルックアップ'].value = hinmeiArea;
        console.log(event.record);
        var tblIndex = subtable.length - 1;
        console.log(tblIndex);
//        subtable[tblIndex].value['品名ルックアップ'].lookup = true;
//
        document.querySelector('.button-simple-cybozu.input-lookup-gaia').click();
//        
        return event;
     });
})();

hirofu さま

私の方でも作ってみました。fieldElementにはデベロッパーツール等から確認できる、フィールドに割り振られている番号を反映させて下さい(Chromeであればルックアップフィールドの上で右クリック→検証を選択すると「value-xxxxxxx」と表示されています)。

(() => {
    'use strict';

  let table = 'テーブル'; // サブテーブルのフィールドコード
  let fieldElement = 'value-xxxxxxx'; // サブテーブル内ルックアップ
    
    const changeRowIndex = (event) => {
        let record = event.record;

        for (let i = 0; i < record[table].value.length; i++) {
            if (event.changes.row === record[table].value[i]) return i;
        };

        return (record[table].value.length - 1);
    };

    kintone.events.on([
        'app.record.create.show', 'app.record.edit.show'
    ], (event) => {
        [...document.getElementsByClassName(fieldElement)].forEach((el) => {
            el.addEventListener('change', (e) => {
                if (e.target.value) el.firstChild.firstChild.nextSibling.click();
            });
        });

        return event;
    });

    kintone.events.on([
      `app.record.create.change.${table}`, `app.record.edit.change.${table}`
    ], (event) => {
        if (event.changes.row) {
            let row = changeRowIndex(event);
            let el = document.getElementsByClassName(fieldElement)[row];

            el.addEventListener('change', (e) => {
                if (e.target.value) el.firstChild.firstChild.nextSibling.click();
            });
        }

        return event;
    });
})();

mls-hashimoto 様

早速ありがとうございます。

”品名ルックアップ”のフィールドに”品種”の値をコピーする部分を追加し、サブテーブルのフィールドコードと’value-xxxxxxx’に値をセットしましたが、”取得”ボタンが押下されませんでした。コンソールにエラーはありません。

‘value-xxxxxxx’ は添付の部分であっていますか?

変更した部分のスクリプト

    let table = '運行記録TBL'; // サブテーブルのフィールドコード
    let fieldElement = 'value-5971502'; // サブテーブル内ルックアップ

    kintone.events.on([
        'app.record.create.change.品種', 'app.record.edit.change.品種'
    ], (event) => {
    //
        var subtable = event.record['運行記録TBL'].value;
        var row = event.changes.row.value;
        var hinmeiArea = row['品種'].value;
        row['品名ルックアップ'].value = hinmeiArea;
    //

”el.firstChild.firstChild.nextSibling.click()” が動いているのかを確認するために、console.logを2か所しかけたところ、”console.log(“point:event.changes”);” は通過しましたが、”console.log(“point:click”);”は通過しませんでした。

 

        if (event.changes.row) {
            let row = changeRowIndex(event);
            let el = document.getElementsByClassName(fieldElement)[row];
                    //
                    console.log("point:event.changes");
                    //
            el.addEventListener('change', (e) => {
                if (e.target.value)
                    //
                    console.log("point:click");
                    //
                    el.firstChild.firstChild.nextSibling.click();
            });
        }

hirofu さま

申し訳ありません。勘違いしておりました(別の機能のコードを作っていました)。

設定する値は合っています。

以下の形で可能です。ルックアップの取得はreturn event(値の反映)より後にする必要があるのでsetTimeoutを使っています。

(() => {
    'use strict';

  let lookup = '積場ルックアップ'; // サブテーブル内ルックアップのフィールドコード
  let fieldElement = 'value-5971502'; // サブテーブル内ルックアップ
    let area = '積場エリア'; // ドロップダウンのフィールドコード
  let table = '運行記録TBL'; // サブテーブルのフィールドコード

    const changeRowIndex = (event) => {
        let record = event.record;

        for (let i = 0; i < record[table].value.length; i++) {
            if (event.changes.row === record[table].value[i]) return i;
        };

        return (record[table].value.length - 1);
    };

    kintone.events.on([
        `app.record.create.change.${area}`, `app.record.edit.change.${area}`
    ], (event) => {
        let row = event.changes.row;
        let rowIndex = changeRowIndex(event);

        if (row.value[area].value) {
            row.value[lookup].value = row.value[area].value;

            setTimeout(() => {
                document.getElementsByClassName(fieldElement)[rowIndex].getElementsByClassName('input-lookup-gaia')[0].click();
            }, 0);
        } else {
            row.value[lookup].lookup = 'CLEAR';
        }

        return event;
    });
})();

mls-hashimoto 様

品種を品名ルックアップにコピーする行を追加し、lookupからareaの変数を正しくセットした結果、自動的に”取得”ボタンが押下されました。本当にありがとうございました。

スマホでも動作させたいので、 mobile.app.record.create.change.${area}, mobile.app.record.edit.change.${area} のように、”mobile"を入れたのですが、スマホでは動作しませんでした。スマホでは動かないのでしょうか。

hifofu さま

無事に実装できたようで何よりです。

モバイル版の場合、DOMの構造が変わるのでイベントの追加だけではできないようです。以下で両方対応しています。また今更ですがkintoneのクラス名を使用したDOM操作になるので、アップデート等で都度対応が必要になる可能性がある点はご留意ください。

(() => {
    'use strict';

    let lookup = '積場ルックアップ'; // サブテーブル内ルックアップのフィールドコード
    let fieldElement = 'value-5971502'; // サブテーブル内ルックアップ
    let area = '積場エリア'; // ドロップダウンのフィールドコード
    let table = '運行記録TBL'; // サブテーブルのフィールドコード

    const changeRowIndex = (event) => {
        let record = event.record;

        for (let i = 0; i < record[table].value.length; i++) {
            if (event.changes.row === record[table].value[i]) return i;
        };

        return (record[table].value.length - 1);
    };

    kintone.events.on([
        `app.record.create.change.${area}`, `app.record.edit.change.${area}`,
        `mobile.app.record.create.change.${area}`, `mobile.app.record.edit.change.${area}`
    ], (event) => {
        let row = event.changes.row;
        let rowIndex = changeRowIndex(event);
        let isMobileEvent = event.type.match(/mobile/);

        if (row.value[area].value) {
            row.value[lookup].value = row.value[area].value;

            setTimeout(() => {
              let fieldClass = document.getElementsByClassName(fieldElement)[rowIndex];
                let button = isMobileEvent ? fieldClass.getElementsByClassName('forms-lookup-lookup-gaia')[0]: fieldClass.getElementsByClassName('input-lookup-gaia')[0];

                button.click();
            }, 0);
        } else {
            row.value[lookup].lookup = 'CLEAR';
        }

        return event;
    });
})();

mls-hashimoto 様

スマホからも動作しました。

本当にありがとうございました。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。