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

# はじめに

## 今回の要約

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

## 作成したソースコード
https://github.com/iamakawa/kintone_lookup_autoget/blob/main/kintone_lookup_autoget.js

```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の[「在庫管理パック」](https://kintone-sol.cybozu.co.jp/apps/inventory-mgmt.html)アプリを一部改修したものです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/871d1e69-80fc-ac7a-922f-26d4947d7d9b.png)


## 在庫が足りない
- 「製品マスタアプリ」で、現在の製品の在庫数を確認。
- 在庫は100個は持っておきたいので入庫作業を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/879a9fa5-28b2-0623-72f0-8004ba53150e.png)


- アクションボタン「入出庫登録」で、食パンを入庫。
- 新しいレコードが作成できたため保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/72dc38a1-47bd-b7b8-f9b9-3a472e0ac1ef.png)

- エラーが発生。
    - [取得]を押し、参照先からデータを取得してください ????
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/b354e391-f431-177c-60f4-8782821beb4e.png)

- 都度「取得」を押さなければならない
- 製品名はマスタから引っ張ってきている以上、自明にも関わらず…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/f4871151-df9e-d3f2-d8bf-3341101e3d3e.png)


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

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

![無題の動画 ‐ Clipchampで作成 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90313/54a18ace-7e9f-2c28-efcd-c78b6095904c.gif)
        

# おわりに

## 技術的な課題

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