フィールドの編集可・不可の切り替えとエラーメッセージ表示

概要

kintoneアプリを運用していると、「あるフィールドの値が○○になったら、別のフィールドを入力必須にしたい」というようなケースがあります。
この記事では、JavaScriptカスタマイズを使って「ステータス」に応じて「完了日」を制御する方法をご紹介します。

やりたいこと

1. ステータスが 「完了」 の場合　→　完了日フィールドを編集可能（活性化）
2. ステータスが 「完了」以外 の場合　→　完了日フィールドは編集不可＋完了日の値をクリア（非活性化）
3. ステータスが 「完了」　かつ　完了日が未入力 の場合　→　保存時にエラーメッセージを表示

画面イメージ

1. ステータスが完了の場合、完了日は編集可能
   

2. ステータスが完了以外の場合、完了日は編集不可
   

3. ステータスが完了　かつ　完了日が未入力の状態で保存ボタンを押すと、エラーメッセージを表示する
   

フィールド

フィールド名	フィールドタイプ	フィールドコード
ステータス	ドロップダウン（未着手、進行中、完了）	status
完了日	日付	completionDate

実装例

(() => {
  "use strict";

  // ステータスに応じて完了日フィールドを制御する
  const controlCompletionDate = (record) => {
    if (record["status"].value === "完了") {
      record["completionDate"].disabled = false; //活性化
    } else {
      record["completionDate"].disabled = true; //非活性化
      record["completionDate"].value = null; //値をクリア
    }
  };

  // 追加画面、編集画面を開いた時と、ステータスを変更した時に動く
  kintone.events.on(
    [
      "app.record.create.show",
      "app.record.edit.show",
      "app.record.create.change.status",
      "app.record.edit.change.status",
    ],
    (event) => {
      controlCompletionDate(event.record);
      return event;
    }
  );

  // ステータスが完了、かつ、完了日が入っていない時に動く
  const validateCompletionDate = (record) => {
    if (record["status"].value === "完了" && !record["completionDate"].value) {
      return "ステータスが完了の場合は、完了日を入力してください。";
    }
    return "";
  };

  // 追加画面、編集画面で保存するときに動く
  kintone.events.on(
    ["app.record.create.submit", "app.record.edit.submit"],
    (event) => {
      const msg = validateCompletionDate(event.record);
      if (msg) {
        // 画面上部にエラーメッセージを表示
        event.error = msg;
      }
      return event;
    }
  );
})();

ポイント

recordとは

recordとは、画面上のフィールドを表すオブジェクトです。
フィールドコードをキーとして、値などを操作できます。

• 値の取得

record["フィールドコード"].value 

• 編集可否の切り替え

record["フィールドコード"].disabled = true; // 編集不可
record["フィールドコード"].disabled = false; // 編集可

エラーメッセージの表示

保存イベントの中で、event.errorに文字列を入れると、画面上部に赤字でエラーメッセージが表示されます。

event.error = "ステータスが完了の場合は、完了日を入力してください。";

kintoneイベントの種類と発火タイミング

kintoneイベント	発火タイミング
app.record.create.show	レコード追加画面を開いたとき
app.record.edit.show	レコード編集画面を開いたとき
app.record.*.change.フィールド名	フィールドの値を変更したとき
app.record.*.submit	レコードを保存するとき

*の部分にはcreate（追加画面）やedit（編集画面）などが入ります。

まとめ

• フィールドの編集可否は record["フィールドコード"].disabled で制御できる
• 保存前のチェックは event.error にエラーメッセージを入れると、画面上部に表示できる