4/17に、kintone UI Component v0.2が公開されました。 コンポーネントの追加・更新といった、v0.1からの大幅な変更がありました。 サブテーブルに関しては、カラムごとにしか設定できなかったフィールド設定が、セルごとに設定できるようになりました。 今回は、サブテーブル内に動的ドロップダウンを作成するサンプルを紹介します。
サンプル
「地方」の内容に合わせて、「都道府県」の選択肢を変更します。
サンプルではソースに直接マッピングを定義していますが、別アプリから情報を取得して利用することも可能です。
フォーム設定
コード
「kintone-ui-component.min.js」と「kintone-ui-component.min.css」を読み込み後、下記「sample.js」を読み込みます。
・sample.js
(function () {
kintone.events.on([
'app.record.create.show',
'app.record.edit.show',
], function (event) {
var choices = {
'北海道地方': ['北海道'],
'東北地方': ['青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県'],
'関東地方': ['東京都', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '神奈川県'],
'中部地方': ['新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県'],
'近畿地方': ['京都府', '大阪府', '三重県', '滋賀県', '兵庫県', '奈良県', '和歌山県'],
'中国地方': ['鳥取県', '島根県', '岡山県', '広島県', '山口県'],
'四国地方': ['徳島県', '香川県', '愛媛県', '高知県'],
'九州地方': ['福岡県', '佐賀県', '長崎県', '大分県', '熊本県', '宮崎県', '鹿児島県', '沖縄県']
};
var tableCode = 'Table';
var column1Code = '地方';
var column1Label = '地方';
var column2Code = '都道府県';
var column2Label = '都道府県';
var spaceCode = 'space';
choices = Object.keys(choices).reduce(function (modifiedChoices, category) {
modifiedChoices[category] = [''].concat(choices[category]);
return modifiedChoices;
}, { '': [''] });
var defaultRowData = {
[column1Code]: {
items: Object.keys(choices).map(function (category) {
return { label: category || '-----', value: category };
}),
value: ''
},
[column2Code]: {
items: [{ label: '-----', value: '' }],
value: ''
},
};
var initialData = event.record[tableCode].value.map(function (recordTableRow) {
return {
[column1Code]: {
items: defaultRowData[column1Code].items,
value: recordTableRow.value[column1Code].value || ''
},
[column2Code]: {
items: choices[recordTableRow.value[column1Code].value || ''].map(function (choice) {
return { label: choice || '-----', value: choice };
}),
value: recordTableRow.value[column2Code].value || ''
}
};
});
var columns = [{
header: column1Label,
cell: function () { return kintoneUIComponent.createTableCell('dropdown', column1Code) }
}, {
header: column2Label,
cell: function () { return kintoneUIComponent.createTableCell('dropdown', column2Code) }
}];
var kucTable = new kintoneUIComponent.Table({
data: initialData,
defaultRowData: defaultRowData,
columns: columns
});
var setRecord = function (kucTableValue) {
var record = kintone.app.record.get();
record.record[tableCode].value = kucTableValue.map(function (kucTableRow) {
return {
value: Object.keys(kucTableRow).reduce(function (recordTableRow, column) {
recordTableRow[column] = {
type: 'SINGLE_LINE_TEXT',
value: kucTableRow[column].value || ''
};
return recordTableRow;
}, {})
};
});
kintone.app.record.set(record);
};
kucTable.on('cellChange', function (e) {
setRecord(e.data);
if (e.fieldName !== column1Code) return;
e.data[e.rowIndex][column2Code] = {
items: choices[e.data[e.rowIndex][column1Code].value].map(function (choice) {
return { label: choice || '-----', value: choice };
}),
value: ''
};
kucTable.setValue(e.data);
});
kucTable.on('rowAdd', function (e) {
setTimeout(function () {
setRecord(e.data);
});
});
kucTable.on('rowRemove', function (e) {
setRecord(e.data);
});
kintone.app.record.setFieldShown(tableCode, false);
kintone.app.record.getSpaceElement(spaceCode).appendChild(kucTable.render());
});
})();