レコード一覧・詳細画面にボタンを設置するサンプル

kintone で JavaScript カスタマイズを行う際に、よく利用されるのが、画面上にボタンを設置し、ボタンをクリックした際に特定の処理を実行する方法です。

このページでは、レコード一覧、レコード詳細画面にボタンを設置し、ボタンをクリックした際に処理を実行する方法を紹介します。

レコード一覧画面にボタンを設置する

レコード一覧では、一覧選択やフィルタアイコンなどが設置されているヘッダ部分の右側のスペースを取得する API と、ヘッダ部分の下部を取得する API の 2 つが用意されています。

メニューの右側の要素を取得する

メニューの下側の要素を取得する

これらの API を使用してボタンを設置する対象となる要素を取得し、その要素にボタンを設置することで、各画面でボタンを実装することができます。

(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    /** ヘッダ部分の右側のスペース */
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();

    /** 設置するボタン */
    const button = document.createElement('button');

    // ボタンの設定
    button.textContent = 'アラートを表示';
    button.onclick = () => {
      // ボタンを押した際の処理はここに記述
      alert('ボタンがクリックされました');
    };

    // ボタンをヘッダ部分の右側のスペースに追加
    headerSpace.append(button);

    return event;
  });
})();

一覧のヘッダ部分の下側のスペースに設置したい場合は、kintone.app.getHeaderSpaceElement()を使用します。

レコード詳細画面にボタンを設置する

レコード詳細画面では、「保存」ボタン、「キャンセル」ボタンなどが設置されているヘッダ部分の上側のスペースを取得する API が用意されています。

メニューの上側の要素を取得する

この API を使用することで、前述したレコード一覧画面と同様にボタンを設置することができます。

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    /** ヘッダ部分の上側のスペース */
    const headerSpace = kintone.app.record.getHeaderMenuSpaceElement();

    /** 設置するボタン */
    const button = document.createElement('button');

    // ボタンの設定
    button.textContent = 'アラートを表示';
    button.onclick = () => {
      // ボタンを押した際の処理はここに記述
      alert('ボタンがクリックされました');
    };

    // ボタンをヘッダ部分の上側のスペースに追加
    headerSpace.append(button);

    return event;
  });
})();

レコード編集画面にボタンを設置する

レコード詳細画面で使用した API は、レコード編集画面でも使用することができます。

(() => {
  'use strict';

  kintone.events.on('app.record.edit.show', (event) => {
    /** ヘッダ部分の上側のスペース */
    const headerSpace = kintone.app.record.getHeaderMenuSpaceElement();

    /** 設置するボタン */
    const button = document.createElement('button');

    // ボタンの設定
    button.textContent = 'アラートを表示';
    button.onclick = () => {
      // ボタンを押した際の処理はここに記述
      alert('ボタンがクリックされました');
    };

    // ボタンをヘッダ部分の上側のスペースに追加
    headerSpace.append(button);

    return event;
  });
})();

上級編:複数のイベントに対応する

上記のサンプルでは、レコード一覧画面、レコード詳細画面、レコード編集画面それぞれにボタンを設置する方法を紹介しました。

しかし、複数の画面で共通してボタンを設置する場合、イベントごとに処理を記述するのは冗長です。

解決方法として、複数のイベントに同じ処理を登録する方法と、ボタンを設置する関数を共通化する方法があります。

複数のイベントに同じ処理を登録する

まず、複数のイベントに同じ処理を登録する方法を紹介します。

(() => {
  'use strict';

  kintone.events.on(["app.record.index.show", "app.record.detail.show", "app.record.edit.show"], (event) => {
    /** ボタンを設置するスペース(一覧画面ではヘッダ右側、詳細・編集画面ではヘッダ上側) */
    const headerSpace =
      kintone.app.getHeaderMenuSpaceElement() ?? kintone.app.record.getHeaderMenuSpaceElement();
    if (!headerSpace) {
      return event;
    }

    /** 設置するボタン */
    const button = document.createElement('button');

    // ボタンの設定
    button.textContent = 'アラートを表示';
    button.onclick = () => {
      // ボタンを押した際の処理はここに記述
      alert('ボタンがクリックされました');
    };

    // ボタンを要素に追加
    headerSpace.append(button);

    return event;
  });
})();

各 API は対象外の画面で実行するとnullを返すため、null 合体演算子(??)で、実行中の画面に対応する要素を取得しています。

直後のheaderSpaceのチェックは、どちらも取得できなかった場合に備えた保険です。対象のイベントのみを指定していれば、通常は不要です。

ボタンを設置する関数を共通化する

続いて、ボタンを設置する関数を共通化する方法を紹介します。

(() => {
  'use strict';

  const addButton = (element) => {
    /** 設置するボタン */
    const button = document.createElement('button');

    // ボタンの設定
    button.textContent = 'アラートを表示';
    button.onclick = () => {
      // ボタンを押した際の処理はここに記述
      alert('ボタンがクリックされました');
    };

    // ボタンを要素に追加
    element.append(button);
  };

  kintone.events.on('app.record.index.show', (event) => {
    addButton(kintone.app.getHeaderMenuSpaceElement());
    return event;
  });

  kintone.events.on('app.record.detail.show', (event) => {
    addButton(kintone.app.record.getHeaderMenuSpaceElement());
    return event;
  });

  kintone.events.on('app.record.edit.show', (event) => {
    addButton(kintone.app.record.getHeaderMenuSpaceElement());
    return event;
  });
})();

こちらは画面ごとにボタンの設置先を変えやすく、処理の流れも追いやすい実装です。

画面ごとに設置先やボタンの内容を変える必要がある場合は後者、同じボタンを全画面に設置するだけなら前者が簡潔です。要件に合わせて選択してください。