はじめようkintone API

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

目次

前回は、フィールドの表示／非表示を切り替えるには、kintone.app.record.setFieldShown()というAPIを使うことを学びました。
今回は、フィールドを編集できるかどうかをカスタマイズで切り替える方法を学びます。
フィールドを編集できるかどうかはアクセス権で制御可能ですが、フィールドに入力された値を使って制御するにはカスタマイズが必要です。

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

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

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

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

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

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

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

 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. 編集不可に設定するフィールドのdisabledをtrueにする。
  2. return eventする。

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

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

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

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というプロパティを使うことを学びました。

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