指定した行数でテーブルの行にフォームの値をコピーしたい
やりたいこと
Kintoneのフォームで、商品コード、商品名、テーブルがあり、テーブル内にその商品のモデル明細（仕様の名称など）を記録したい。
モデル明細は、同じ名称で寸法や色などの仕様が違うだけなので、追加したい行数を指定して、追加行数分の商品コード＋行番号、モデル名をコピーしてテーブルにセットしたい。
という少し複雑でかなり具体的な要望を頂きました。
言葉にすると少しややこしいのですが、実現したい機能をフォームのイメージで説明すると下図の通りです。
ポイントは、フィールドの値をコピーして「任意の行数」分テーブルに追加することだと理解しました。
要するに、少しでも入力負荷を軽減したいというニーズの様です。
デモ画面
上記の要望事項をJavascriptコードで実装したデモ画面です。
テーブル内の商品コードは、入力した商品コード＋行数、商品モデル名は、テーブル外のモデル名の値をコピーして、追加行数の値分だけテーブルの行として追加しています。
コピーした行の商品モデル名や備考欄にモデル別仕様の細かい違いを記入する作業負荷を少しでも軽減するための機能です。
フォームの設定
フォーム作成で、フィールド名（フィールドコード）：フィールドタイプ（型）を以下の様に設定します。
商品コード（商品コード）：文字列1行型、重複禁止
商品名（商品名）：文字列1行型
商品モデル名（モデル名）：文字列1行型
追加行数（追加行数）：数値型
スペース（要素ＩＤ：Button_Space）
テーブル（明細テーブル）
商品明細No（商品明細No）：文字列1行型
商品モデル名（商品モデル名）：文字列1行型
備考（備考）：文字列1行型
サンプルJavascriptコード
/* 指定した行数でテーブルの行にフォームの値をコピーしたい
* Sample Program
* Distributor: https://note.com/appgroup
* Copyright (c) 2024 Application Utilization Study Group
* Licensed under the MIT License
------------------------------------------------------------*/
(() => {
'use strict';
// 初期設定でフィールド名を宣言
const FIELD_PRODUCT_CODE = '商品コード'; // Lookupの商品コード
const FIELD_MODEL_NAME = 'モデル名'; // コピー元のモデル名
const FIELD_ROW_COUNT = '追加行数'; // 追加行数
const FIELD_PRODUCT_DETAILS = '明細テーブル';
const FIELD_TABLE_PRODUCT_CODEE = '商品明細No'; // 明細テーブル内の商品コード
const FIELD_TABLE_MODEL_NAME = '商品モデル名'; // 明細テーブル内のモデル名
const FIELD_TABLE_REMARKS = '備考'; // 明細テーブル内の備考フィールド
// 行追加用の関数
const addRowsBasedOnBatch = () => {
const record = kintone.app.record.get().record;
const rowCount = Number(record[FIELD_ROW_COUNT].value);
// テーブルの新しい行を生成
const newRows = [];
for (let i = 0; i < rowCount; i++) {
newRows.push({
value: {
[FIELD_TABLE_PRODUCT_CODEE]: {
type: 'SINGLE_LINE_TEXT',
value: `${record[FIELD_PRODUCT_CODE].value}-${i + 1}` // 商品コード＋行番号で初期化
},
[FIELD_TABLE_MODEL_NAME]: {
type: 'SINGLE_LINE_TEXT',
value: record[FIELD_MODEL_NAME].value // コピー元のモデル名で初期化
},
[FIELD_TABLE_REMARKS]: {
type: 'SINGLE_LINE_TEXT',
value: '' // 備考フィールドは空白で初期化
}
}
});
}
// 新しい行で既存の行を上書き
record[FIELD_PRODUCT_DETAILS].value = newRows;
return kintone.app.record.set({ record: record });
};
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (e) => {
// 行追加ボタンを設置
const addSpace = kintone.app.record.getSpaceElement('Button_Space');
const addButton = document.createElement('button');
addButton.innerHTML = '行を追加';
addButton.onclick = addRowsBasedOnBatch;
addSpace.appendChild(addButton);
});
})();カスタマイズした感想
サンプルコードは、全部で約54行と割と短いコードで実装出来ました。
テーブル内の商品明細コードをユニークな番号にするために、商品コード＋行番号を'-'で繋いで表示する様にしました。
（当初の仕様には無かったのですが、後から追加で要望されました）
工夫したポイントは、コピーする行を一旦配列に格納してテーブルの明細行として一括で上書きする処理にしたことです。
こうすることで「行を追加」ボタンをクリックする度にテーブルの行を３行から５行に増やしたり逆に２行に減らすこともボタン一発で出来ます。
依頼されたときは「本当に役に立つのかな？」と思っていたのですが、実装してみると「まとめて10行追加する」ときなど、1行づつ手入力するよりも利便性が高くてユーザーの満足度が得られました。
他にもテーブル入力で応用が利く使い道があれば、検討したいと思います。
今回も最後まで読んで頂き、ありがとうございました。
いいなと思ったら応援しよう！
