kintone ui component ドロップダウンの編集時について

背景・実現したいこと

 kintone ui component ドロップダウンの編集時の初期値に

選択済みの値をセットしたい

https://qiita.com/juri_don/items/28ba7612df71935ec290

を参考に、ドロップダウンの値を動的に設定することはできたので

新規登録時は問題ないのですが、編集時に選択済みの値がセットされません。

上記のように、大分類は選択されている飲料が表示されるのですが

中分類には選択されたアルコールが表示されません。

エラー情報 (開発者ツールのコンソール)

エラーは発生していません

大分類はコードを

value: event.record[‘大分類’].value,

とすれば編集済みの値がセットされるのですが中分類はセットされません。

大分類を選択した時のイベントで動く仕組みだからだと思うのですが

よい解決方法があればご指摘ください。

利用したソースコード

(function () {
  ‘use strict’;

  kintone.events.on([‘app.record.edit.show’], (event) => {
    // ドロップダウンを設置するスペースフィールドの要素を取得
    const spDropdown = kintone.app.record.getSpaceElement(‘spDropdown1’);
    // ドロップダウン大分類をつくる
    const drBig = new Kuc.Dropdown({
      label: ‘大分類’,
      //requiredIcon: true,
      // items にはドロップダウンの中身を書く
      items: [{ value: ‘食料’ }, { value: ‘飲料’ }],
      value: event.record[‘大分類’].value,
      visible: true,
      disabled: false,
    });

    // スペースフィールドにドロップダウン大分類を置く
    spDropdown.appendChild(drBig);

    // ドロップダウン中分類をつくる
    const drMid = new Kuc.Dropdown({
      label: ‘中分類’,
      //requiredIcon: true,
      // items はからっぽにしておく
      items: [],
      value: event.record[‘中分類’].value,
      visible: true,
      disabled: false,
    });

    // ドロップダウン小分類をつくる
    const drSmall = new Kuc.Dropdown({
      label: ‘小分類’,
      //requiredIcon: true,
      // items はからっぽにしておく
      items: [],
      visible: true,
      disabled: false,
    });

    // スペースフィールドにドロップダウン弟を置く
    spDropdown.appendChild(drMid);

    // ドロップダウン大分類を選択したときのイベント
    drBig.addEventListener(‘change’, () => {
      switch (drBig.value) {
        case ‘食料’:
          drMid.items = [{ value: ‘肉類’ }, { value: ‘野菜類’ }];
          break;
        case ‘飲料’:
          drMid.items = [{ value: ‘ソフトドリンク’ }, { value: ‘アルコール’ }];
          break;
        default:
          drMid.items = [{ value: ‘’ }];
      }

      // ドロップダウンで選択した値を文字列(1行)フィールドにコピー
      const r1 = kintone.app.record.get();
      r1.record[‘大分類’].value = drBig.value;
      kintone.app.record.set(r1);
    });

    // スペースフィールドにドロップダウン小分類を置く
    spDropdown.appendChild(drSmall);

    // ドロップダウン中分類を選択したときのイベント
    drMid.addEventListener(‘change’, () => {
      switch (drMid.value) {
        case ‘肉類’:
          drSmall.items = [
            { value: ‘牛肉’ },
            { value: ‘豚肉’ },
            { value: ‘鶏肉’ },
          ];
          break;
        case ‘野菜類’:
          drSmall.items = [
            { value: ‘キャベツ’ },
            { value: ‘レタス’ },
            { value: ‘ニンジン’ },
          ];
          break;
        case ‘アルコール’:
          drSmall.items = [
            { value: ‘ワイン’ },
            { value: ‘焼酎’ },
            { value: ‘ビール’ },
          ];
          break;
        case ‘ソフトドリンク’:
          drSmall.items = [
            { value: ‘コーラ’ },
            { value: ‘オレンジジュース’ },
            { value: ‘水’ },
          ];
          break;
        default:
          drSmall.items = [{ value: ‘’ }];
      }

      // ドロップダウンで選択した値を文字列(1行)フィールドにコピー
      const r2 = kintone.app.record.get();
      r2.record[‘中分類’].value = drMid.value;
      kintone.app.record.set(r2);
    });

    // ドロップダウン小分類を選択したときのイベント
    drSmall.addEventListener(‘change’, () => {
      // ドロップダウンで選択した値を文字列(1行)フィールドにコピー
      const r3 = kintone.app.record.get();
      r3.record[‘小分類’].value = drSmall.value;
      kintone.app.record.set(r3);
    });

    return event;
  });
})();

 

1 Like
      // items はからっぽにしておく
      items: [],

ここでからっぽにしているためです。ご推察の通り大分類を選択するとそのイベントで中分類の選択肢を、中分類を選択すると小分類の選択肢を作っているので、この部分(item:[])でもchangeイベントと同じようにitem: 選択肢となるようにする必要があります。

選択肢を作る処理を関数にし、以下のような形で問題ないかと思います。

(() => {
    'use strict';

    const midOptions = (drBigValue) => {
        switch(drBigValue) {
            case '食料':
                return [{value: '肉類'}, {value: '野菜類'}];
            case '飲料':
                return [{value: 'ソフトドリンク'}, {value: 'アルコール'}];
            default:
                return [{value: ''}]
        };
    };
    const smallOptions = (drMidValue) => {
        switch(drMidValue) {
            case '肉類':
                return [{value: '牛肉'}, {value: '豚肉'}, {value: '鶏肉'}];
            case '野菜類':
                return [{value: 'キャベツ'}, {value: 'レタス'}, {value: 'ニンジン'}];
            case 'アルコール':
                return [{value: 'ワイン'}, {value: '焼酎'}, {value: 'ビール'}];
            case 'ソフトドリンク':
                return [{value: 'コーラ'}, {value: 'オレンジジュース'}, {value: '水'}];
            default:
                return [{value: ''}];
        };
    };

    kintone.events.on([
        'app.record.create.show', 'app.record.edit.show'
    ], (event) => {
        const record = event.record;
        const spDropdown = kintone.app.record.getSpaceElement('spDropdown1');

        const drBig = new Kuc.Dropdown({
            label: '大分類',
            items: [{ value: '食料' }, { value: '飲料' }],
            value: record['大分類'].value,
            visible: true,
            disabled: false
        });

        const drMid = new Kuc.Dropdown({
            label: '中分類',
            items: midOptions(record['大分類'].value),
            value: record['中分類'].value,
            visible: true,
            disabled: false
        });

        const drSmall = new Kuc.Dropdown({
            label: '小分類',
            items: smallOptions(record['中分類'].value),
            value: record['小分類'].value,
            visible: true,
            disabled: false
        });

        drBig.addEventListener('change', (e) => {
            const recordData = kintone.app.record.get(), rec = recordData.record;

            drMid.items = midOptions(e.target.value);
            drSmall.items = smallOptions(null);

            rec['大分類'].value = e.target.value;
            rec['中分類'].value = '';
            rec['小分類'].value = '';
            kintone.app.record.set(recordData);
        });

        drMid.addEventListener('change', (e) => {
            const recordData = kintone.app.record.get(), rec = recordData.record;

            drSmall.items = smallOptions(e.target.value);

            rec['中分類'].value = e.target.value;
            rec['小分類'].value = '';
            kintone.app.record.set(recordData);
        });

        drSmall.addEventListener('change', (e) => {
            const recordData = kintone.app.record.get(), rec = recordData.record;

            rec['小分類'].value = e.target.value;
            kintone.app.record.set(recordData);
        });

        spDropdown.appendChild(drBig);
        spDropdown.appendChild(drMid);
        spDropdown.appendChild(drSmall);

        return event;
    });
})();
1 Like

mls-hashimoto

ご指摘ありがとうございます。

編集時にもドロップダウンに選択しているものが表示されるようになりました。

また、変更時にこれまで大分類からしか変更できなかったのですが

中分類から変更、小分類のみ変更にも対応していただきありがとうございます。

大変助かりました。

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

 

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