フィールドの編集可/編集不可を切り替えてみよう

目次

前回は、フィールドの表示/非表示を切り替えるには、イベントオブジェクトに含まれるレコード情報のフィールドの disabled というプロパティを使うことを学びました。
今回は、フィールドを編集できるかどうかをカスタマイズで切り替える方法を学びます。
フィールドを編集できるかどうかはアクセス権で制御可能ですが、フィールドに入力された値を使って制御するにはカスタマイズが必要です。

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

次のフィールドを配置したアプリを作成します。

フィールド名 フィールドタイプ フィールドコード 備考
地域 ラジオボタン 地域 次の選択肢を設定する
  • 首都圏
  • 海外
  • その他
日当 数値 日当

フィールドを編集不可にする

ラジオボタンの値に応じて、フィールドを編集不可に切り替えてみましょう。
実装するのは、「地域」に応じて「日当」のフィールドの表示/非表示を切り替えるカスタマイズです。

コードの内容は UseCase4 のサンプルコード解説 で解説します。

 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
36
(() => {
  'use strict';
  // 制御に利用するラジオボタンのフィールドコード
  const areaFieldCode = '地域';
  // 編集不可にするフィールドのフィールドコード
  const wageFieldCode = '日当';

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

    switch (record[areaFieldCode].value) {
      case '首都圏':
        record[wageFieldCode].value = '0';
        record[wageFieldCode].disabled = true;
        break;
      case '海外':
        record[wageFieldCode].value = '3000';
        record[wageFieldCode].disabled = true;
        break;
      case 'その他':
        record[wageFieldCode].disabled = false;
        break;
      default:
        record[wageFieldCode].value = '1000';
        record[wageFieldCode].disabled = true;
        break;
    }

    return event;
  });
})();

動作イメージ

このカスタマイズを適用すると、レコード追加画面と編集画面で、「地域」の値に応じて「日当」が編集できるかどうかが切り替わります。

ソースコードの解説

このカスタマイズのポイントは「フィールドを編集不可にする」です。

フィールドを編集不可にする

「地域」の値に応じて、「日当」のフィールドを編集不可に設定します。
フィールドを編集不可にするには、次の 2 つの手順が必要です。

  1. 編集不可に設定するフィールドの disabledtrue にする。
  2. return event する。

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

特定のフィールドを編集不可にしたい場合には、フィールドの disabled プロパティに true を設定します。
今回は「日当」フィールドを編集不可にしたいので、record[wageFieldCode].disabledtrue を代入します。

なお、今回のカスタマイズでは、フィールドの編集可否を設定するだけでなく、同時にフィールドの値の書き換えも行っています。

14
15
16
17
18
19
20
    const record = event.record;

    switch (record[areaFieldCode].value) {
      case '首都圏':
        record[wageFieldCode].value = '0';
        record[wageFieldCode].disabled = true;
        break;

編集可能にする場合は false を代入します。

25
26
27
      case 'その他':
        record[wageFieldCode].disabled = false;
        break;

disabled プロパティを設定できたら、kintone.events.on() の関数の最後で return event して、フィールドの編集可否をレコードに反映させます。

 8
 9
10
11
12
13
14
15
16
17
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    `app.record.edit.change.${areaFieldCode}`,
    `app.record.create.change.${areaFieldCode}`
  ], (event) => {
    // 省略

    return event;
  });

まとめ

フィールドの編集可否には、イベントオブジェクトに含まれるレコード情報のフィールドの disabled というプロパティを使うことを学びました。

次回は、 フィールドの装飾をしてみよう について学習しましょう。