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

目次

今回は、レコード詳細画面にボタンを配置するカスタマイズを通して、次のことを学びます。

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

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

アプリストアの 顧客リスト (External link) を使います。

ボタンを配置する流れ

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

  1. ボタンのHTML要素を作る。
  2. ボタンをクリックしたときの処理を実装する。
  3. kintone JavaScript APIを使って、レコード詳細画面のHTML要素を取得する。
  4. 取得した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を使って取得したレコード詳細画面のスペース要素

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