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

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

更新日：2024年05月02日

ボタンHTML要素の作り方
ボタンをクリックしたときのイベントリスナーの設定方法
ボタンを配置するためのHTML要素の取得方法
今回はレコード詳細画面のメニュー上側の空白部分とスペースフィールドを取得する方法を説明します。

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

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

アプリストアの顧客リストを使います。

ボタンを配置する流れ

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

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

ボタンのHTML要素を作る。
ボタンをクリックしたときの処理を実装する。
kintone JavaScript APIを使って、レコード詳細画面のHTML要素を取得する。
取得したHTML要素にボタンを配置する。

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

レコード詳細画面のメニュー上側の空白部分にボタンを配置する方法を説明します。
ボタンがクリックされたときにメッセージを表示します。

ソースコードは次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = 'ボタン';
    menuButton.onclick = function() {
      // ボタンをクリックした処理を記述する
      window.alert('ボタンが押されました');
    };
    const headerMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
    headerMenuSpace.appendChild(menuButton);
    return event;
  });
})();

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

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

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

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

ボタンのHTML要素を作成する。
レコード詳細画面のメニューの上側の空白要素を取得しボタンを配置する。

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

HTML要素を作成するには、document.createElement()メソッドを利用します。
メソッドの書き方は次のとおりです。

1

const element = document.createElement('タグ名');

タグ名には、divやbuttonなどのHTML要素名を指定します。
今回は、ボタンを作るので、buttonを指定します。

作ったボタンのプロパティには、ボタンのテキストやスタイル、ボタンのクリックイベントに対するイベントリスナーなどを設定できます。
今回は、次の3つを設定します。

id
要素を特定するためのIDです。
innerText()
ボタンに表示する文字です。
onclick
ボタンをクリックしたときのイベントです。
次のように、ボタンをクリックしたときに実行する関数を紐付けます。
今回はダイアログを表示する処理を記載します。
1 2 3 4

menuButton.onclick = function() { // ボタンをクリックした処理を記述する window.alert('ボタンが押されました'); };

レコード詳細画面のメニューの上側の要素は、次の赤枠で囲んでいる部分です。

要素を取得するには、kintone JavaScript APIのkintone.app.record.getHeaderMenuSpaceElement()を利用します。
APIの詳細は次のドキュメントを参照してください。
メニューの上側の要素を取得する

続けて、appendChild()メソッドを使って、取得した要素にボタンを配置します。
appendChild()の引数にボタンの変数を指定します。

1
2


const headerMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
headerMenuSpace.appendChild(menuButton);

スペースフィールドにボタンを配置する

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

次は、ボタンをスペースフィールドに配置する方法を説明します。
顧客リストには、要素IDが「space_field」のスペースフィールドを配置してください。
このスペースフィールドの要素を取得してボタンを配置します。

レコード詳細画面のメニュー上側の空白部分にボタンを配置するで作成したソースコードの11〜12行目を編集します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = 'ボタン';
    menuButton.onclick = function() {
      // ボタンをクリックした処理を記述する
      window.alert('ボタンが押されました');
    };
    const spaceField = kintone.app.record.getSpaceElement('space_field');
    spaceField.appendChild(menuButton);
    return event;
  });
})();

動作イメージ

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

このカスタマイズを適用すると、スペースフィールドにボタンが表示されます。
ボタンをクリックすると、ダイアログが表示されます。

ソースコードの解説

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

このカスタマイズのポイントは、スペース要素の取得です。
スペース要素を取得するには、 kintone JavaScript API kintone.app.record.getSpaceElement()を利用します。
APIの詳細は次のドキュメントを参照してください。
スペースフィールドの要素を取得する

このAPIの引数には、取得するスペースの要素IDを指定します。
今回取得するスペースの要素IDはspace_fieldです。
したがって、コードは次のようになります。

1

const spaceField = kintone.app.record.getSpaceElement('space_field');

まとめ

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

ボタンを作成し、作成したボタンを次の要素に配置する方法を学びました。

kintone JavaScript APIを使って取得したレコード詳細画面のメニュー上側の空白要素
kintone JavaScript APIを使って取得したレコード詳細画面のスペース要素

次回は、レコードの値を取得してみようについて学習しましょう。

はじめようkintone API