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

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

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

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

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

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

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

レコード一覧画面のメニューの下側に、任意のテキストを表示してみましょう。
実装するのは、ログインユーザーに応じて、レコード一覧のメニューの下側にテキストを表示するカスタマイズです。
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のレコード画面にテキストを表示する方法を学びました。
次回は、フィールドの表示／非表示を切り替えてみようについて学びます。

はじめよう kintone API