背景・実現したいこと
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;
});
})();