背景・実現したいこと
https://developer.cybozu.io/hc/ja/community/posts/900001067403で紹介されていたサブテーブル分割プラグインを、https://developer.cybozu.io/hc/ja/community/posts/360045508111を参考にした下記のコードのアプリで使用したのですが
・スマホ版だと反映されない
・PC版だと表示がうまくいかない(既存のテーブルが残ったまま)
上記の問題はどのように解決すればいいでしょうか
(function () {
kintone.events.on([
'mobile.app.record.create.show',
'mobile.app.record.edit.show',
], function (event) {
var choices = {
'分類A': ['a', 'b', 'c'],
'分類B': ['d', 'e','f'],
'分類C': ['g', 'h', 'i']
};
var tableCode = 'Table';
var column1Code = '分類';
var column1Label = '分類';
var column2Code = '備品名';
var column2Label = '備品名';
var column3Code = '数量';
var column3Label = '数量';
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: ''
},
[column3Code]: {
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 || ''
},
[column3Code]: {
items: [{ label: '', value: '' }],
value: '',
type:Number
}
};
});
var columns = [{
header: column1Label,
cell: function () { return kintoneUIComponent.createTableCell('dropdown', column1Code) }
}, {
header: column2Label,
cell: function () { return kintoneUIComponent.createTableCell('dropdown', column2Code) }
}, {
header: column3Label,
cell: function () { return kintoneUIComponent.createTableCell('text', column3Code) }
}
];
var kucTable = new kintoneUIComponent.Table({
data: initialData,
defaultRowData: defaultRowData,
columns: columns
});
var setRecord = function (kucTableValue) {
var record = kintone.mobile.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.mobile.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.mobile.app.record.setFieldShown(tableCode, false);
kintone.mobile.app.record.getSpaceElement(spaceCode).appendChild(kucTable.render());
});
})();