今回は、kintone JavaScript APIを使って、kintoneアプリからレコードの値を取得する方法を学びましょう。

レコード詳細画面にボタンを配置してみよう で利用したアプリを使います。

レコードの値を取得する kintone JavaScript APIを利用して、メニューの空白部分に追加したボタンをユーザーがクリックした時に、表示しているレコードの値を取得する方法を説明します。

追加したボタンをクリックした時にレコードの値を取得したい場合、次の流れで処理を実装します。

1. 追加したボタンに対して、JavaScriptのイベントハンドラーでonclickイベントを発生させる。
2. kintone.app.record.get()でレコードの値を取得する。

アプリに次のカスタマイズを適用してみましょう。
メニューの空白部分のボタンがクリックされたら、レコードの値を取得し、スペースフィールドに取得した更新日時を表示するサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = 'ボタン';
    // JavaScript の クリックイベントを発生させる
    menuButton.onclick = function() {
      const spaceField = kintone.app.record.getSpaceElement('space_field');

      let updatedAt = '';
      // レコードの値を取得する
      const rec = kintone.app.record.get();
      // 取得したレコードの値の中から更新日時の値を取り出す
      if (rec) {
        updatedAt = rec.record.更新日時.value;
      }
      // スペースフィールドに取得した更新日時の値を入れる
      spaceField.innerText = updatedAt;
    };

    kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
    return event;
  });
})();

レコード詳細画面を開いてボタンをクリックした際に、次のようにスペースフィールドに更新日時の値が表示されていればレコードの値の取得に成功しています。

スペースフィールドに表示された更新日時と更新日時フィールドの日時を見比べると、2つの日時の書式が違っていますね。

このように、APIから取得した値は、Webページ上に表示されている値と書式/フォーマットが異なる場合もあります。
今後、コードを書いていくときには注意しましょう。
フィールド形式とフォーマットの詳細は、 フィールド形式 と 日時のフォーマット を確認してください。

実際の現場では、レコードの値を取得する場合、今回のように「ボタンを置いてクリック時に取得する」というユースケースより「ページの表示時に取得する」というユースケースの方が一般的に多いと思います。

ここで、誤解しやすい重要な注意点があります。
それは、kintone.events.on() のイベントハンドラー内ではkintone.app.record.get() を実行できないということです！

つまり、次のコードは動きません。

1
2
3
4
5
6
7
8

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const rec = kintone.app.record.get(); // ここではkintone.app.record.get()が使えない
    return event;
  });
})();

レコードの値を取得する の制限事項にも記載されていますが、誤解しやすいポイントなので、忘れないように注意しましょう。

それでは、kintone.events.on()のイベントハンドラー内で、レコードのデータを取得するにはどうすればいいでしょうか。
その方法について、次の章で説明します。

kintone.events.on()のイベントハンドラー内で、レコードのデータを取得する方法を説明します。

レコード詳細画面ページの表示時にレコードの値を取得したい場合、次の流れで処理を実装します。

1. kintone.events.onで、 レコード詳細画面を表示した後のイベント app.record.detail.showを指定する。
2. イベントハンドラーに渡される引数のイベントオブジェクトからレコードの値を取得する。

イベントオブジェクトについては、のちほど詳しく説明します。

アプリに次のカスタマイズを適用してみましょう。
レコード詳細画面を開くと、レコードの値を取得し、 レコード詳細画面にボタンを配置してみよう で追加したスペースフィールドに取得した値を表示するサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const updatedAt = event.record.更新日時.value;

    const spaceField = kintone.app.record.getSpaceElement('space_field');
    spaceField.innerText = updatedAt;
    return event;
  });
})();

レコード詳細画面を開いたときに、先ほどと同様に、スペースフィールドに更新日時の値が表示されていればレコードの値の取得に成功しています。

レコード詳細画面を表示した後のイベントのイベントオブジェクトには、レコードのデータが含まれています。 そのため、kintone.app.record.get()と同様に表示されたレコードデータを取得できます。

ここで、先ほどから出てきている「イベントオブジェクト」について解説します。
コードの中のeventがイベントオブジェクトにあたります。

1

kintone.events.on('app.record.detail.show', (event) => {}); // event がイベントオブジェクト

イベントオブジェクトにどのような値が入ってくるかは、 レコード詳細画面を表示した後のイベント のイベントオブジェクトのプロパティの表で確認できます。

コードを簡単に解説すると、「イベントオブジェクトのrecordプロパティの中からフィールドコードが”更新日時”の要素を指定し、その値を取得している」という処理になっています。

1

const updatedAt = event.record.更新日時.value;

イベントオブジェクトのプロパティはイベントごとに異なります。
そのため、実装の際は、それぞれの イベント のページでイベントオブジェクトのプロパティを確認しましょう。

補足

kintoneのイベントオブジェクトについては、はじめようkintone APIの kintoneのイベントオブジェクト も参考にしてください。

今回は、kintoneアプリからレコードの値を取得する方法について学びました。

kintone.app.record.get()がkintone.events.on()のイベントハンドラー内で実行できない点は、初心者が特に間違いやすいポイントなので注意しましょう。

次回は、 イベントオブジェクトを使ったフィールドの値を書き換えてみよう で、イベントオブジェクトを使ったレコードの更新について学習しましょう。