レコード画面に任意のテキストを表示してみよう

目次

前回は、kintone JavaScript API とは何かや、よく使う kintone JavaScript API について学びました。
今回は、レコードの画面に任意のテキストを表示するカスタマイズを通して、次のことを学びます。

  • kintone イベントの使い方
  • kintone のレコード画面にテキストを表示する方法

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

フィールドを配置していないアプリを使います。

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

レコード一覧画面のメニューの下側に、任意のテキストを表示してみましょう。
実装するのは、ログインユーザーに応じて、レコード一覧のメニューの下側にテキストを表示するカスタマイズです。
10 行目のログイン名は、kintone に登録しているユーザーのログイン名を指定してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    // ログインユーザーのコードを取得
    const loginUser = kintone.getLoginUser();
    const loguinUserCode = loginUser.code;

    // 表示するユーザーを設定
    const targetUserCodes = ['taro', 'jiro'];

    // レコード一覧のメニューの下側の要素を取得
    const headerSpaceElement = kintone.app.getHeaderSpaceElement();

    if (targetUserCodes.includes(loguinUserCode)) {
      // ログインユーザーに応じた処理をここに書く
      headerSpaceElement.textContent = 'Hello Members!';
    } else {
      headerSpaceElement.textContent = '';
    }

    return event;
  });
})();

動作イメージ

このカスタマイズを適用すると、ログインユーザーが「taro」「jiro」の場合は、レコード一覧のメニューの下側に「Hello Members!」が表示されます。

ソースコードの解説

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

  • レコード一覧画面を表示した後に実行する。
  • ログインユーザーの情報を取得する。
  • 条件によってレコード一覧のメニューの下側にテキストを表示する。

それぞれ詳しく見ていきましょう。

レコード一覧画面を表示した後に実行する

今回はレコード一覧画面を表示した後に処理を実行したいため、「レコード一覧画面を表示した後」がイベントのタイミングにあたります。
API ドキュメントの kintone JavaScript API を確認すると、「レコード一覧画面を表示した後」のイベントタイプは app.record.index.show ということが分かります。

そのため、イベントと関数を紐付ける kintone.events.on() の第 1 引数には レコード一覧画面を表示した後のイベントapp.record.index.show を指定します。

4
5
6
  kintone.events.on('app.record.index.show', (event) => {
    // 実行したい処理
  });

ログインユーザーの情報を取得する

ログインユーザーの情報は、 kintone.getLoginUser() で取得できます。
取得した情報のうち、今回は code(ログイン名)プロパティを使用しています。

5
6
7
    // ログインユーザーのコードを取得
    const loginUser = kintone.getLoginUser();
    const loguinUserCode = loginUser.code;

条件によってレコード一覧のメニューの下側にテキストを表示する

レコード一覧のメニューの下側の要素は、 kintone.app.getHeaderSpaceElement() という API で取得できます。
この API で取得できるのは HTML 要素です。

12
13
    // レコード一覧のメニューの下側の要素を取得
    const headerSpaceElement = kintone.app.getHeaderSpaceElement();

あとは、targetUserCodes にログインユーザーが含まれていたら「Hello Members!」というテキスト、それ以外の場合は空の文字列を表示します。

15
16
17
18
19
20
    if (targetUserCodes.includes(loguinUserCode)) {
      // ログインユーザーに応じた処理をここに書く
      headerSpaceElement.textContent = 'Hello Members!';
    } else {
      headerSpaceElement.textContent = '';
    }

まとめ

今回のカスタマイズでは、kintone イベントの使い方や kintone のレコード画面にテキストを表示する方法を学びました。
次回は、 フィールドの表示/非表示を切り替えてみよう について学びます。