kintoneは顧客管理や社内申請など様々な用途で利用することができる便利なツールです。
そして、ITにそこまで詳しくなくても使えるノーコードツールである点も非常に魅力的です。
しかしながら、業務改善に向けてkintoneをしっかりと活用している方ほど、
「こんなことができたらもっといいのに…」と感じる場面も多いはず…！
そんな方に向けて、このブログではJavaScriptカスタマイズのサンプルを公開しています！
kintoneではスペースフィールドを活用して、任意の位置にボタンを設置し、クリック時に自分で定義した処理を実行することができます。
以前投稿したこちらの記事にてボタン生成の基本が確認できます。本記事は応用になりますので先にこちらをご覧いただくのが良いと思います。
他のフィールドのテキストを文字列（1行）にコピーするボタンをつけたいなぁ。
こんな処理を実装したいと思ったことはありませんか？
今回の記事はそんな悩みの解決の手立てになれば幸いです。
使用するAPIについて
今回、メインで使用するAPIはこちらです。
（スペースフィールドの要素を取得するは以前の記事で紹介しているので割愛します。）
レコードに値をセットする
現在開いているレコードに値をセットします。
cybozu.dev
JavaScriptカスタマイズのサンプルコード
他のフィールドのテキストを文字列（1行）フィールドにコピーするボタンを生成する
フィールドの前提条件は以下の通りです。
| スペース | 文字列（1行） | 文字列（1行） | |
|---|---|---|---|
| フィールド名 | – | 本社所在地 | 配送先 |
| 要素ID | btn_space | address | shipping_address |
| 選択肢 | – | – | – |
| 処理内容 | 「レコード追加画面」「レコード編集画面」で本社所在地の値を配送先にコピーするボタンを生成する。 | – | – |
サンプルコードは次の通りです。
(function() {
'use strict';
// カスタマイズが動作するイベントを定義
const targetEvents = [
'app.record.create.show',
'app.record.edit.show'
];
kintone.events.on(targetEvents, function(event) {
const record = event.record;
// スペースフィールドの要素を取得
const spaceEl = kintone.app.record.getSpaceElement('btn_space');
if (!spaceEl) return event;
// ボタンを定義する
const btn = document.createElement('button');
btn.id = 'btn';
btn.class = 'kintoneplugin-button-normal';
btn.innerText = '本社所在地を配送先にコピーする';
// クリック時の処理を記載
btn.addEventListener('click', function() {
// 本社所在地（address）から配送先（shipping_address）に値をコピー
record.shipping_address.value = record.address.value;
kintone.app.record.set(record);
alert('値をコピーしました！');
});
// スペースフィールドにボタンを設置
spaceEl.appendChild(btn);
return event;
});
})();既にプラグインやJavaScriptカスタマイズを実装している場合は正しく動作しない可能性がございますので、追加する際は注意してください。
