kintoneルックアップフィールドでアクションボタンで入力したにも関わらず”[取得]を押し、参照先からデータを取得してください。”エラーが発生する問題の自動入力拡張で解決した

はじめに

今回の要約

• kintoneには、他のアプリのレコードから自動的に値を参照取得できる「ルックアップ」の機能がある
• kintoneには、元アプリのレコードが持つ値を参照しながら、他アプリのレコードを新規作成できる「アクションボタン」の機能がある
• 「アクションボタン」で「他アプリのルックアップフィールド」の値を入力してレコードを新規作成することはできるが、値が自明であるにも関わらず、「自動で取得」ができない
• そこで、レコード新規作成・編集時に、「すでにルックアップフィールドに値が入力されている」とき、「自動で値を取得する」機能をjavascriptで実装しました。
• 複数のルックアップフィールドに対応します。

作成したソースコード

kintone_lookup_autoget.js

(function() {
    'use strict';

    var events = ['app.record.create.show', 'app.record.edit.show'];

    kintone.events.on(events, function(event) {
        setTimeout(function() {
            // ルックアップフィールドのすべてのinput要素を取得
            var inputFields = document.querySelectorAll('.component-app-lookup-inputlookup .input-text-outer-cybozu input');

            // 各input要素について処理
            inputFields.forEach(function(inputField) {
                if (inputField && inputField.value !== '') {
                    // inputの値が空欄でない場合にのみ、「取得」ボタンをクリック
                    // input要素に最も近い親の.component-app-lookup-inputlookup要素を探す
                    var lookupContainer = inputField.closest('.component-app-lookup-inputlookup');

                    if (lookupContainer) {
                        var lookupButton = lookupContainer.querySelector('.button-simple-cybozu.input-lookup-gaia');
                        if (lookupButton) {
                            lookupButton.click();
                        } else {
                            console.error('Lookup button not found. Make sure the lookup field is visible and the page is fully loaded.');
                        }
                    }
                }
            });
        }, 1000); // タイミングの問題を避けるために少し待つ

        return event;
    });
})();

詳細

• 「在庫管理」「入出庫登録」を例に説明します。
• これは、kintoneの「在庫管理パック」アプリを一部改修したものです
  

在庫が足りない

• 「製品マスタアプリ」で、現在の製品の在庫数を確認。

• 在庫は100個は持っておきたいので入庫作業を行う。
  

• アクションボタン「入出庫登録」で、食パンを入庫。

• 新しいレコードが作成できたため保存。
  

• エラーが発生。

  • [取得]を押し、参照先からデータを取得してください ????
    

• 都度「取得」を押さなければならない

• 製品名はマスタから引っ張ってきている以上、自明にも関わらず…
  

問題の解決

javascriptの挿入

• 詳細は割愛。
• 上記javascriptのコードを設定→javascriptで読み込んでください。
• https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html

自動で取得

• 自動で取得できるようにしました。
• 複数のフィールドにも対応します。(事前入力されているものだけに対して実行します)

おわりに

技術的な課題

• lookupフィールドが全て .component-app-lookup-inputlookup .input-text-outer-cybozu inputであるから対応できているが、kintoneの実装が変わると動かなくなる
• いつかはkintoneの本体機能で取り込んでいただけると本当にありがたい…m(_ _