今回は、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()のイベントハンドラー内で実行できない点は、初心者が特に間違いやすいポイントなので注意しましょう。

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