kintoneにテンプレート選択＆挿入機能を追加するJavaScript（テンプレは別アプリで簡単登録＆管理）

kintoneの入力欄に別のアプリに保存したテンプレート文を挿入する機能をつくりました。

イメージはこんな感じ。

業務で同じような文章を入力することが多いなら、テンプレートがあると便利です。すべて同じテンプレートで良いなら初期値を設定すれば良いのですが、内容によって入力するテンプレートを変えたい場合があります。

そんな時に複数のテンプレートを用意してプルダウンで選択し挿入することができるJavaScriptをつくりました。テンプレートはテンプレートを登録するための別のアプリを用意するので、簡単に登録や編集が可能です。

ざっくりですが作り方と使い方を共有します。

前提条件

・kintoneはスタンダードプランで契約
・テンプレ機能を実装するアプリ内に「文字列（複数行）」は1つだけ

準備1. テンプレ機能を実装したいアプリにスペースを追加する

アプリの管理画面を開き、テンプレ機能を実装したい入力欄（文字列（複数行））の横にスペースを追加。

スペースの設定で要素IDに「space1」と入力して保存し、フォームを保存。アプリを更新する。

準備2. テンプレートを登録するためのアプリを作成

新しいアプリを作成して、フォームに以下の項目を追加します。

・テンプレート番号＝数値（フィールドコードは「tid」）
・テンプレート名＝文字列（1行）（フィールドコードは「name」）
・ステータス＝ドロップダウン（フィールドコードは「status」）
　→選択肢は「有効」と「無効」を追加。
・テンプレートテキスト＝文字列（複数行）（フィールドコードは「text」）

準備3. アプリにテンプレを登録

いくつかテンプレートを入力しておきます。

準備4. スクリプトを作成してアプリに追加する

以下のスクリプトをテキストエディタにコピペします。
14行目あたりにあるアプリIDは新しく作成したアプリのIDに修正してください。アプリIDはURLを見ればわかります。

修正したらjsファイルとして（拡張子をjsにして）保存します。（今回は「テンプレ挿入.js」という名前にしました）

jQuery.noConflict();
(function($) {
  "use strict";
  	var events={
		show:[
			'app.record.edit.show','mobile.app.record.edit.show',
			'app.record.create.show','mobile.app.record.create.show'
		]
	};
   kintone.events.on(events.show, function(event) {
       // app アプリID
       // query レコード抽出条件
       var param = {
           "app": 99,
           "query": "status in (\"有効\") order by tid asc"
       };
       kintone.api(kintone.api.url('/k/v1/records', true), 'GET', param, function(resp) {
           // 成功時の処理
           //console.log(resp);
           const records = resp.records;
           //Create and append select list
           var selectList = document.createElement("select");
           selectList.id = "mySelect";
           kintone.app.record.getSpaceElement('space1').appendChild(selectList);
           //Create and append the options
           for (var i = 0; i < records.length; i++) {
               var option = document.createElement("option");
               option.value = i;
               option.text = records[i].name.value;
               selectList.appendChild(option);
           }
           // 任意のスペースフィールドにボタンを設置
           var mySpaceFieldButton = document.createElement('button');
           mySpaceFieldButton.id = 'my_space_field_button';
           mySpaceFieldButton.innerText = 'テンプレートを挿入';
           mySpaceFieldButton.onclick = function () {
           	//テキストエリアと挿入する文字列を取得
           	var areas = document.getElementsByTagName('textarea');
           	var area = areas[0];
           	var selected = document.getElementById("mySelect");
           	var selectedValue = selected.value;
           	var text = records[selectedValue].text.value;
           	//カーソルの位置を基準に前後を分割して、その間に文字列を挿入
           	area.value = area.value.substr(0, area.selectionStart)
       			+ text
       			+ area.value.substr(area.selectionStart);
           };
           kintone.app.record.getSpaceElement('space1').appendChild(mySpaceFieldButton);
           
       }, function(error) {
           // エラー時の処理
           console.log(error);
       });
  });
})(jQuery);

テンプレ機能を実装したいアプリの設定画面を開き、「JavaScript/CSSでカスタマイズ」から、作成したファイルを「アップロードして追加」して保存します。

「アプリを更新」します。

使い方

テンプレ機能を実装したアプリでレコードを作成または編集する画面を開くと、テキストエリア（文字列（複数行））の横に選択欄とボタンが表示されます。

挿入したいテンプレを選択してボタンを押すとテキストエリアに登録した文章が挿入されます。