チュートリアル

はじめよう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
37
38
39
40

(() => {
  '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 '首都圏':
        // 首都圏の場合は日当を0に設定し、編集不可にする
        record[wageFieldCode].value = '0';
        record[wageFieldCode].disabled = true;
        break;
      case '海外':
        // 海外の場合は日当を3000に設定し、編集不可にする
        record[wageFieldCode].value = '3000';
        record[wageFieldCode].disabled = true;
        break;
      case 'その他':
        // その他の場合は日当を編集可能にする
        record[wageFieldCode].disabled = false;
        break;
      default:
        // 未選択 or 上記以外は日当を1000に設定し、編集不可にする
        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
21

    const record = event.record;

    switch (record[areaFieldCode].value) {
      case '首都圏':
        // 首都圏の場合は日当を0に設定し、編集不可にする
        record[wageFieldCode].value = '0';
        record[wageFieldCode].disabled = true;
        break;

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

27
28
29
30

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

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