サブテーブル行コピー時に、コピー元行の直下に行を追加

Legacy_Account1098 · 2019 年 7 月 12 日午前 1:05

各行の頭にチェックボックスを配置し、チェックで行コピーを行えるようにしております。
サブテーブルの行追加には「push」を使用しており、現状では最下行にコピーした行が追加されています。

これを「行コピーのチェック」動作を行った行の直下に、コピーした行を追加することは可能でしょうか？

行idの取得ができれば可能かと思ったのですが、サポートに問い合わせたところ

> 「テーブル」の行id はレコード保存時に各行に割り振られるため、
> “レコード追加画面” での行id の取得はできないものとなります。

とのことでした。

ただ、デフォルトのサブテーブル行追加ボタンの「+」を押した時には、「+」ボタンクリック行の直下に新規行が追加されるため、
可能であればそのような形にしたいと考えております。

参考にできそうな記事なども探し出せず、jsもまだ素人状態のため、ぜひお知恵をお貸し頂けましたらと思います。
よろしくお願いいたします。

(function () {
"use strict";

const events = [
'app.record.create.change.コピー',
'app.record.edit.change.コピー',
];

kintone.events.on(events, function(event) {
if (event.changes.field.value.length !== 0) {

/* コピーを行うための値と作業終了時間の取得 */
var record = event.record.工数管理.value;
var eTime = event.changes.row.value.作業終了.value;
var pHour = event.changes.row.value.工数.value;
var pNumber = event.changes.row.value.工番.value;
var pName = event.changes.row.value.物件名.value;
var cName = event.changes.row.value.顧客名.value;
var Work = event.changes.row.value.作業内容.value;

/* 行を追加するためのオブジェクトを作成 */
var newRow = {
"value": {
"コピー" : {"type": "CHECK_BOX", "value": []},
"作業開始": {"type": "DATETIME", "value": eTime},
"作業終了": {"type": "DATETIME", "value": eTime},
"休憩時間": {"type": "TIME", "value": "00:00"},
"工数" : {"type": "CALC", "value": pHour},
"工番": {"type": "SINGLE_LINE_TEXT", "value": pNumber},
"作業内容": {"type": "DROP_DOWN", "value": Work},
"物件名" : {"type": "SINGLE_LINE_TEXT", "value": pName},
"顧客名": {"type": "SINGLE_LINE_TEXT", "value": cName},
"備考": {"type": "SINGLE_LINE_TEXT", "value": ""},
}
};

record.push(newRow);

/*「工番」自動取得 */
/* 工数管理テーブル数ループ */
for(var i=0;i<record.length;i++){
record[i].value['工番'].lookup = true;
}

/* チェックボックスのクリア */
event.changes.field.value = [];
return event;

}
});

})();

Legacy_Account1051 · 2019 年 7 月 16 日午前 8:57

こんばんは。

record.push(newRow);のところを、

const target = document.getElementsByClassName('subtable-5534119');
const n = target[0].querySelectorAll('tr').length - 2;
record.splice(n, 0, newRow);

にしてください。 spliceは配列に対して位置指定で要素の追加ができます。

サブテーブルのIDを確認して変更してください！

このやり方はDOMから値を拾っているのでアプデなどで動かなくなる可能性がありますので、

もし余裕があるのでしたら、下のURLを参考にテーブルに行数をつけてその値を拾うのがいいかと思います。

https://developer.cybozu.io/hc/ja/articles/204014210-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AB%E9%80%A3%E7%95%AA%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B

Legacy_Account1098 · 2019 年 7 月 17 日午前 12:46

＊TK 様＊

お世話になっております。ご丁寧に詳細なコードまで記述頂き、誠にありがとうございます。

テーブルに行数をつける方法も少し挑戦してみたのですが、理解してコードを追記するのは
時間がかかりそうでしたので、まずはTK様からご教授頂きました方法にて対応し、今後DOMに
頼らないコードに修正していきたいと思います。

参考URLまで示して頂き重ねて御礼申し上げます。

Legacy_Account1051 · 2019 年 7 月 17 日午前 1:14

KT様

すいませんボケてました！上記のコードだと理想の動きになりません！

サブテーブルに「数値フィールド」でフィールドコード「No」で追加してください。

(function () {

"use strict";

const events = [

'app.record.create.change.コピー',

'app.record.edit.change.コピー',

];

kintone.events.on(events, function(event) {

numbering(event); // 追加

if (event.changes.field.value.length !== 0) {

/* コピーを行うための値と作業終了時間の取得 */

var record = event.record.工数管理.value;

var eTime = event.changes.row.value.作業終了.value;

var pHour = event.changes.row.value.工数.value;

var pNumber = event.changes.row.value.工番.value;

var pName = event.changes.row.value.物件名.value;

var cName = event.changes.row.value.顧客名.value;

var Work = event.changes.row.value.作業内容.value;

/* 行を追加するためのオブジェクトを作成 */

var newRow = {

"value": {

"コピー" : {"type": "CHECK_BOX", "value": []},

"作業開始": {"type": "DATETIME", "value": eTime},

"作業終了": {"type": "DATETIME", "value": eTime},

"休憩時間": {"type": "TIME", "value": "00:00"},

"工数" : {"type": "CALC", "value": pHour},

"工番": {"type": "SINGLE_LINE_TEXT", "value": pNumber},

"作業内容": {"type": "DROP_DOWN", "value": Work},

"物件名" : {"type": "SINGLE_LINE_TEXT", "value": pName},

"顧客名": {"type": "SINGLE_LINE_TEXT", "value": cName},

"備考": {"type": "SINGLE_LINE_TEXT", "value": ""},

}

};

const n = row.No.value - 1;

record.Table.value.splice(n, 0, newRow);

/*「工番」自動取得 */

/* 工数管理テーブル数ループ */

for(var i=0;i<record.length;i++){

record[i].value['工番'].lookup = true;

}

/* チェックボックスのクリア */

event.changes.field.value = [];

return event;

}

});

/ ************************************ /

// ↓追加

kintone.events.on(["app.record.create.change.工数管理", "app.record.create.show"], function (event) {

numbering(event);

return event;

});

const numbering = function (event) {

let count = 1;

event.record.工数管理.value.forEach(function (val) {

val.value.No.disabled = true;

val.value.No.value = count;

count++;

});

};

/ ************************************ /

})();

Legacy_Account1098 · 2019 年 7 月 17 日午前 5:15

＊TK 様＊

お世話になっております。お返事が遅くなりすみません。

ちょうどTK様にコメント頂きましたタイミングで、コードが上手く処理できずこちらでも考えていたところでした。
TK様には検証の上、追記までして頂きまして重ねて御礼申し上げます。

サブテーブル内に「数値フィールド」でフィールドコード「No」を追加し、TK様に記述頂きましたコードを、
弊社アプリ用に以下のように修正させて頂き、希望の動きが実行されることを確認いたしました。

自分一人では解決できなかったことを、ご教授頂きました方法で対処でき感動しております。

知識不足で拙い質問に、このようにご丁寧にコメントして頂き誠にありがとうございました。

(function () {
"use strict";

const events = [
'app.record.create.change.コピー',
'app.record.edit.change.コピー',
];

kintone.events.on(events, function(event) {

if (event.changes.field.value.length !== 0) {

var record = event.record.工数管理.value
      // コピーを行うための値と作業終了時間の取得
var No = event.changes.row.value.No.value;
var eTime = event.changes.row.value.作業終了.value;
var pHour = event.changes.row.value.工数.value;
var pNo = event.changes.row.value.工番.value;
var pName = event.changes.row.value.物件名.value;
var cName = event.changes.row.value.顧客名.value;
var Work = event.changes.row.value.作業内容.value;

// 行を追加するためのオブジェクトを作成
var newRow = {
"value": {
"No" : {"type": "NUMBER", "value": No},
"コピー" : {"type": "CHECK_BOX", "value": []},
"作業開始": {"type": "DATETIME", "value": eTime},
"作業終了": {"type": "DATETIME", "value": eTime},
"休憩時間": {"type": "TIME", "value": "00:00"},
"工数" : {"type": "CALC", "value": pHour},
"工番": {"type": "SINGLE_LINE_TEXT", "value": pNo},
"作業内容": {"type": "DROP_DOWN", "value": Work},
"物件名" : {"type": "SINGLE_LINE_TEXT", "value": pName},
"顧客名": {"type": "SINGLE_LINE_TEXT", "value": cName},
"備考": {"type": "SINGLE_LINE_TEXT", "value": ""},
}
};

//コピー行追加
record.splice(No, 0, newRow);
//行数の設定
      numbering(event);

//「工番」自動取得を工数管理テーブル行数ループ
for(var i=0;i<record.length;i++){
record[i].value.工番.lookup = true;
}

// チェックボックスのクリア
event.changes.field.value = [];
return event;
}
});

// 行数設定イベント
kintone.events.on(["app.record.create.show"],
function (event) {
numbering(event);
return event;
});

const numbering = function (event) {
var record = event.record.工数管理.value;
let count = 1;
record.forEach(function (val) {
val.value.No.value = count;
count++;
});
};

})();

Legacy_Account1051 · 2019 年 7 月 17 日午前 5:41

うまくいってよかったです！

>既存のjsファイルの影響でか、まだ動きが不安定な部分（コピー行Noがコピー元行Noと同じになる）があり

numbering(event)が、コピー動作の前にあるので

下記のようにしたらコピー後に再連番すると思います!

record.splice(No,0, newRow);
numbering(event);

Legacy_Account1098 · 2019 年 7 月 17 日午前 6:40

＊TK 様＊

重ね重ねご丁寧にありがとうございます。
おかげ様をもちまして、無事Noを連番にすることができました。
前述のコードも修正済みです。
この度は大変お世話になり、誠にありがとうございました。

トピック		返信	表示
テーブルに行を追加した際にスマホで数値フィールドはテンキーを表示したい kintone カスタマイズ	3	212	2023 年 4 月 14 日
サブテーブル内で特定のフィールドが編集されると行を追加したい kintone カスタマイズ	2	65	2019 年 10 月 10 日
テーブルで下の行に値をコピー kintone カスタマイズ	2	174	2019 年 3 月 22 日
サブテーブルの最終行に数値の合計行を一時的に追加するプラグインについて kintone カスタマイズ	3	322	2023 年 1 月 14 日
サブテーブル　行追加時の挙動について kintone カスタマイズ	2	451	2018 年 3 月 19 日

サブテーブル行コピー時に、コピー元行の直下に行を追加

関連トピック