フィールドの隣に任意の処理を行うボタンを設置する方法をご紹介！

kintoneは顧客管理や社内申請など様々な用途で利用することができる便利なツールです。
そして、ITにそこまで詳しくなくても使えるノーコードツールである点も非常に魅力的です。

しかしながら、業務改善に向けてkintoneをしっかりと活用している方ほど、
「こんなことができたらもっといいのに…」と感じる場面も多いはず…！

kintoneではスペースフィールドを活用して、フィールドの隣など任意の位置にボタンを設置し、クリック時に自分で定義した処理を実行することができます。
JavaScriptカスタマイズを活用することで、業務の効率化や操作性の向上を図ることができます！

フィールドの隣に処理するボタンをつけたいなぁ。

こんな処理を実装したいと思ったことはありませんか？

今回の記事はそんな悩みの解決の手立てになれば幸いです。

---

使用するAPIについて

今回、メインで使用するAPIはこちらです。

スペースフィールドの要素を取得する

スペースフィールドの要素を取得します。

cybozu.dev

また、kintoneらしいボタンデザインにするために「51-modern-default.css」を合わせて使用します。
本記事では通常のボタンを参考にします。（クラス名：kintoneplugin-button-normal）

51-modern-default

kintoneのデザインと調和するスタイルシートの使い方を説明します。

cybozu.dev

JavaScriptカスタマイズのサンプルコード

スペースフィールドの位置に任意のボタンを生成する

フィールドの前提条件は以下の通りです。

	スペース
フィールド名	–
要素ID	btn_space
選択肢	–
処理内容	「レコード詳細画面」「レコード追加画面」「レコード編集画面」で

サンプルコードは次の通りです。

(function() {
  'use strict';

  // カスタマイズが動作するイベントを定義
  const targetEvents = [
    'app.record.detail.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.className = 'kintoneplugin-button-normal';
    btn.innerText = 'サンプルテキスト（処理内容を記載）';

    // クリック時の処理を記載
    btn.addEventListener('click', function() {
      // ここに処理内容を記載する
    });

    // スペースフィールドにボタンを設置
    spaceEl.appendChild(btn);

    return event;
  });

})();

既にプラグインやJavaScriptカスタマイズを実装している場合は正しく動作しない可能性がございますので、追加する際は注意してください。

ボタンクリック時の処理は他のカスタマイズと組み合わせて実装することが可能です。

他の記事でそれぞれ紹介してみますので、是非ご覧ください。