Tips

レコード一覧画面にボタンを配置してみよう

著者名：hato（ サイボウズ株式会社 (External link) ）

目次

はじめに

固定リンクがコピーされました

本記事では、レコード一覧画面にボタンを配置する方法を説明します。
また、一覧画面のカスタマイズで発生しやすい増殖バグの防ぎ方も合わせて紹介します。

動作イメージ

固定リンクがコピーされました

このカスタマイズを適用すると、レコード一覧画面のメニューの右側部分にボタンが表示されます。
ボタンをクリックすると、ダイアログが表示されます。

カスタマイズを適用するアプリ

固定リンクがコピーされました

アプリストアの 顧客リスト (External link) を選択し、サンプルデータを含めるにチェックを入れ、アプリを作成します。

サンプルコード

固定リンクがコピーされました

次のJavaScriptのコードを「sample.js」という名前で保存し、「JavaScript/CSSでカスタマイズ」に追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
 * add-buttoons sample program
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  // レコード一覧の表示後イベント
  kintone.events.on('app.record.index.show', (event) => {
    // 増殖バグを防ぐ
    if (document.getElementById('menu_button') !== null) {
      return false;
    }

    // ボタンを作成
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = '一覧のボタン';

    // ボタンクリック時の処理
    menuButton.onclick = () => {
      window.alert('ボタンが押されました');
    };

    // レコード一覧のメニューの右側の要素を取得し、ボタンを配置
    const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
    headerMenuSpace.appendChild(menuButton);

    return event;
  });
})();

サンプルコードの解説

固定リンクがコピーされました

ボタンをレコード一覧画面に配置したい場合、次の流れで処理を実装します。

  1. ボタンのHTML要素を作成する。
  2. ボタンをクリックしたときの処理を実装する。
  3. kintone JavaScript APIを使って、レコード一覧画面のメニューの右側の要素を取得する。
  4. 取得した要素にボタンを配置する。
  5. ボタンの増殖バグを防ぐ。

このカスタマイズのポイントは次の3つです。

  • ボタンのHTML要素を作成する。
  • レコード一覧画面のメニューの右側の要素を取得し、ボタンを配置する。
  • ボタンの増殖バグを防ぐ。

ボタンのHTML要素を作成する

固定リンクがコピーされました

まずはdocument.createElement()メソッドを利用してボタン要素を作成します。
作成したボタン要素にmenu_buttonという名前の、id属性を付与します。
id属性は ボタンの増殖バグを防ぐ で利用します。

また、onclickイベントを設定し、クリックしたらダイアログが表示されるようにイベントを登録します。

17
18
19
20
21
22
23
24
25

    // ボタンを作成
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = '一覧のボタン';

    // ボタンクリック時の処理
    menuButton.onclick = () => {
      window.alert('ボタンが押されました');
    };

レコード一覧画面のメニューの右側の要素を取得しボタンを配置する

固定リンクがコピーされました

レコード一覧画面のメニューの右側の要素を取得するには、kintone JavaScript APIの kintone.app.getHeaderMenuSpaceElement() を利用します。
続けて、appendChild()メソッドを使って、取得した要素にボタンを配置します。

27
28
29

    // レコード一覧のメニューの右側の要素を取得し、ボタンを配置
    const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
    headerMenuSpace.appendChild(menuButton);
caution
警告

kintoneで使われているidやclass属性は、予告なく変更されます。
kintone内の要素を取得する場合は、DOM操作をしないで、kintone.app.getHeaderMenuSpaceElement()のようなkintone JavaScript APIを利用するようにしましょう。
詳細は kintoneで使われているidやclass属性 を確認してください。

ボタンの増殖バグを防ぐ

固定リンクがコピーされました

カラムソートやページ送りをした場合、レコード一覧画面を表示した後のイベントapp.record.index.showが実行されます。
そのため、カラムソートやページ送りをする度にボタン作成の処理も実行されてしまい、ボタンの増殖バグが発生してしまいます。

ボタンの増殖バグを防ぐためには、ボタン作成時に付与したmenu_buttonのid属性を使い、ボタンの有無を判別します。
すでにボタンが存在している場合は、ボタン作成処理を終了させます。

19
20
21
22
23
24

  // レコード一覧の表示後イベント
  kintone.events.on('app.record.index.show', (event) => {
    // 増殖バグを防ぐ
    if (document.getElementById('menu_button') !== null) {
      return false;
    }

まとめ

固定リンクがコピーされました

本記事では、レコード一覧画面にボタンを配置する方法を紹介しました。
今回紹介したカスタマイズは、利用する機会が多いため、ぜひお試しください。

information

このTipsは、2024年6月版kintoneで動作を確認しています。