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

目次

前回は、フィールドを編集できるかどうかをカスタマイズで切り替える方法を学びました。
今回は、レコードオブジェクトを使って、表示されているレコードのフィールドの値を書き換える方法を学びます。

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

アプリストアの 問い合わせ管理 (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 とモバイルの違いを確認してみようについて学習しましょう。