チュートリアル

はじめようkintone API

戻る

イベントオブジェクトを使ってフィールドの値を書き換えてみよう

目次

前回は、kintoneアプリからレコードの値を取得する方法を学びました。
今回は、イベントオブジェクトを使って、表示されているレコードのフィールドの値を書き換える方法を学びます。

動作イメージ

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

今回のカスタマイズを適用すると、「問い合わせ種別」で選択した値に応じて「詳細」にテンプレートが設定されます。

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

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

アプリストアの 問い合わせ管理 (External link) を使います。

イベントオブジェクトを使ったフィールドの値の書き換え

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

ラジオボタンの値に応じて、特定のフィールドの値を書き換えてみましょう。
実装するのは、「問い合わせ種別」の値に応じて、問い合わせテンプレートを「詳細」に設定するカスタマイズです。

サンプルコード

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

 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
27
28
29
30
31
32
33
34
35

(() => {
  'use strict';
  // 制御に利用するラジオボタンのフィールドコード
  const inquiryTypeFieldCode = 'QType';
  // テンプレートメッセージを設定する文字列（複数行）フィールドのフィールドコード
  const messageFieldCode = 'Detail';

  kintone.events.on([
    'app.record.create.show',
    `app.record.edit.change.${inquiryTypeFieldCode}`,
    `app.record.create.change.${inquiryTypeFieldCode}`
  ], (event) => {
    const record = event.record;
    const inquiryType = record[inquiryTypeFieldCode].value;

    switch (inquiryType) {
      case '製品について':
        record[messageFieldCode].value = '製品名と詳細をご記入ください。';
        break;
      case '受発注について':
        record[messageFieldCode].value = '発注番号と詳細をご記入ください。';
        break;
      case 'お客様対応について':
        record[messageFieldCode].value = 'お客様名と詳細をご記入ください。';
        break;
      case 'その他':
        record[messageFieldCode].value = '詳細をご記入ください。';
        break;
      default:
        record[messageFieldCode].value = ''; // 該当しない場合はクリア
    }

    return event;
  });
})();

ソースコードの解説

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

このカスタマイズのポイントは「イベントオブジェクトを使って値を書き換える」です。
詳しく見ていきましょう。

イベントオブジェクトを使って値を書き換える

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

「問い合わせ種類」で選択された値に応じて、イベントオブジェクトを使って「詳細」の値を書き換えます。
イベントオブジェクトを使ってフィールドの値を変更するには、次の2つの手順が必要です。

  1. 書き換えたいフィールドのvalueに、変更後の値を代入する。
  2. return eventする。

詳しく見ていきましょう。

まずは「詳細」のフィールドの値を書き換えるため、「詳細」のフィールドの値に変更後の値を代入します。
messageFieldCodeは「詳細」のフィールドコードです。
「問い合わせ種類」の値に応じて変更したいので、switch文を使って分岐しています。

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    const record = event.record;
    const inquiryType = record[inquiryTypeFieldCode].value;

    switch (inquiryType) {
      case '製品について':
        record[messageFieldCode].value = '製品名と詳細をご記入ください。';
        break;
      case '受発注について':
        record[messageFieldCode].value = '発注番号と詳細をご記入ください。';
        break;
      case 'お客様対応について':
        record[messageFieldCode].value = 'お客様名と詳細をご記入ください。';
        break;
      case 'その他':
        record[messageFieldCode].value = '詳細をご記入ください。';
        break;
      default:
        record[messageFieldCode].value = ''; // 該当しない場合はクリア
    }

変更後の値を代入できたら、kintone.events.on()の関数の最後でreturn eventして、書き換えた値をレコードに反映します。

 8
 9
10
11
12
13
14
15
16

  kintone.events.on([
    'app.record.create.show',
    `app.record.edit.change.${inquiryTypeFieldCode}`,
    `app.record.create.change.${inquiryTypeFieldCode}`
  ], (event) => {
    // 省略

    return event;
  });

まとめ

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

今回のカスタマイズでは、イベントオブジェクトを使ってフィールドの値を書き換える方法を学びました。
次回は、 kintoneカスタマイズにおけるPCとモバイルの違いを確認してみよう について学習しましょう。