【kintone】JavaScriptの書き方(スペース要素の取得)【カスタマイズ基礎編】

前回の記事ではkintoneのフィールド要素の取得について解説しました。

続いて、kintoneにおけるJavaScriptカスタマイズでは「スペース要素」を取得できます。

この記事ではスペース要素の取得処理について解説します。

この記事で何が分かる?
  • kintoneのJavaScriptカスタマイズでは、スペース要素を取得できます。
  • スペースフィールド要素を取得するには…
    kintone.app.record.getSpaceElement(‘スペースの要素ID’)
  • 一覧のメニューの右側の空白部分の要素を取得するには…
    kintone.app.getHeaderMenuSpaceElement()
  • 一覧のメニューの下側の空白部分の要素を取得するには…
    kintone.app.getHeaderSpaceElement()
  • 詳細のメニューの右側の空白部分の要素を取得するには…
    kintone.app.record.getHeaderMenuSpaceElement()
  • モバイル版のヘッダー直下の空白部分の要素を取得するには…
    kintone.mobile.app.getHeaderSpaceElement()
  • ポータルの上側の空白部分の要素を取得するには…
    kintone.portal.getContentSpaceElement()
目次

kintoneのスペース要素とは

kintoneのフィールドには「スペース」があります。

アプリの設定画面より、フォームに設置してみると、その名の通り空欄ができます。

他のフィールドとの間隔を空けるために使えますが、もう一つの使い方があります。

このスペースには要素IDを付けることができ、そのIDでスペースの要素を取得し、オブジェクトを設置することができます。

例えば、ボタンを作ったり、ドロップダウンを作ったりすることができます。

これは標準機能ではできず、JavaScriptを使うことでしかできません。

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

スペースフィールド要素を取得する場合は以下を記述します。

kintone.app.record.getSpaceElement(‘スペースの要素ID’)

実装例:レコード編集画面のスペースフィールドにボタンを設置する

それでは、取得したスペースフィールド要素にオブジェクトを設置してみます。

以下コードでは、スペースにボタンを設置し、押されたらメッセージを表示します。

(() => {

	'use strict';

	kintone.events.on('app.record.edit.show', event => {

		const space = kintone.app.record.getSpaceElement('space');

		const button = document.createElement('button');
		button.textContent = '押してね';
		space.appendChild(button);

		button.addEventListener('click', () => {
			alert('ボタンが押されました。');
		});

		return event;

	});

})()
【kintone】スペースに設置したボタンを押したとき

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

スペースフィールド以外にもkintoneの画面上で以下のスペース要素を取得することができます。

スペースの位置については、リンク先のページをご覧ください。

一覧のメニューの右側の空白部分の要素を取得
kintone.app.getHeaderMenuSpaceElement()
※PC版のみ

一覧のメニューの下側の空白部分の要素を取得
kintone.app.getHeaderSpaceElement()
※PC版のみ

詳細のメニューの右側の空白部分の要素を取得
kintone.app.record.getHeaderMenuSpaceElement()
※PC版のみ

ヘッダー直下の空白部分の要素を取得(レコード詳細画面レコード一覧画面
kintone.mobile.app.getHeaderSpaceElement()
※モバイル版のみ

スペースフィールドの要素を取得
kintone.portal.getContentSpaceElement()

いずれも先ほどのスペースフィールドと同様に、取得した要素に対してオブジェクトを設置することができます。

実装例:レコード一覧メニューの下側にテキストを表示する

それでは、取得したスペース要素にオブジェクトを設置してみます。

以下コードでは、レコード一覧メニューの下側にテキストを表示します。

(() => {

	'use strict';

	kintone.events.on('app.record.index.show', event => {

		const space = kintone.app.getHeaderSpaceElement();

		const message = document.createElement('div');
		message.textContent = 'ここに説明文を表示できます。';
		space.appendChild(message);

		return event;

	});

})()
【kintone】一覧メニューの下側にテキスト表示
この記事のまとめ
  • kintoneのJavaScriptカスタマイズでは、スペース要素を取得できます。
  • スペースフィールド要素を取得するには…
    kintone.app.record.getSpaceElement(‘スペースの要素ID’)
  • 一覧のメニューの右側の空白部分の要素を取得するには…
    kintone.app.getHeaderMenuSpaceElement()
  • 一覧のメニューの下側の空白部分の要素を取得するには…
    kintone.app.getHeaderSpaceElement()
  • 詳細のメニューの右側の空白部分の要素を取得するには…
    kintone.app.record.getHeaderMenuSpaceElement()
  • モバイル版のヘッダー直下の空白部分の要素を取得するには…
    kintone.mobile.app.getHeaderSpaceElement()
  • ポータルの上側の空白部分の要素を取得するには…
    kintone.portal.getContentSpaceElement()

レコードの値によって表示・非表示を切り替えたり、文章を変えたり、色々な活用ができそうですね。

ボタンを押した際にフィールドの値を変えることも可能です。
次回の記事で解説します。

次回の記事ではレコードの値の取得と設定について解説します。

目次