レコード削除の事故を防ぐ！フィールドの値で削除を禁止するカスタマイズ

2024年8月26日 10:08

やりたいこと（背景とニーズ）

日報アプリを運用する中で、誤って重要なレコードが削除されるという事故が発生し、その対策が急務となりました。このような事態を防ぐため、Kintoneアプリに「削除禁止」の設定を追加するカスタマイズを行いました。削除権限があるユーザーでも、削除可否スイッチの設定が優先する様にして特定のレコードを削除できないようにすることが目的です。

カスタマイズのポイント

このカスタマイズでは、レコードに「削除可否」フィールドを追加し、アプリ管理者だけがこのフィールドを編集できるようにしました。削除禁止に設定されたレコードを削除しようとすると、カスタムメッセージが表示され、削除操作がキャンセルされます。
（画面背景色とメッセージボックスの配色はＣＳＳで設定します）
レコード一覧とレコード詳細画面の削除アクションで動作する様にします。

メッセージは画面中央に目立つように表示され、背景色を薄い赤色にすることで、誤操作を防ぐようにしています。また、警告メッセージも赤色で強調されており、「このレコードは削除が禁止されています。管理者に連絡してください。」という内容がユーザーに伝わります。

デモ画面

フォームの設定

フォームの設定に必要な項目は「削除可否」のラジオボタンだけです。
他のフィールド（タイトルも含む）は、本件カスタマイズとは関係ないので自由に追加・設定して下さい

レコードの「削除可否」のフィールドをアプリの管理者しか編集できない様にすれば、アプリ管理者以外は「削除可否」の編集が出来なくなります。
これでアプリ管理者以外は「削除禁止」の状態を解除できなくなります。
上記画面では、初期値が「削除可」ですが、初期値を「削除不可」にすれば、新規作成レコードは全て削除不可になります。

サンプルJavascriptコード

DELETE_PERMISSION_FIELDに「削除可否」を判定するフィールドコードを設定します。
レコード一覧とレコード詳細画面の削除アクションで動作します。

/* フィールドの値でレコードの削除を禁止する処理 */
(function () {
  'use strict';

  // 削除可否フィールドのフィールドコード
  const DELETE_PERMISSION_FIELD = '削除可否';

  // カスタム警告メッセージを表示する関数
  function showCustomAlert(message) {
    const alertElement = document.createElement('div');
    alertElement.innerHTML = `
      <div class="custom-alert-overlay">
        <div class="custom-alert">
          <h3>警告</h3>
          <p>${message}</p>
          <button class="alert-ok-button">OK</button>
        </div>
      </div>
    `;
    document.body.appendChild(alertElement);

    const okButton = alertElement.querySelector('.alert-ok-button');
    okButton.addEventListener('click', () => {
      alertElement.remove();
    });
  }

  // 削除不可かどうかをチェックする関数
  function isDeletionForbidden(record) {
    return (
      record[DELETE_PERMISSION_FIELD] &&
      record[DELETE_PERMISSION_FIELD].value === '削除禁止'
    );
  }

  // レコード削除時の共通処理
  function handleDeleteEvent(event) {
    const record = event.record;

    if (isDeletionForbidden(record)) {
      showCustomAlert(
        'このレコードは削除が禁止されています。管理者に連絡してください。'
      );
      return false; // 削除処理をキャンセル
    }

    return event;
  }

  // レコード詳細画面の削除時のイベント処理
  kintone.events.on('app.record.detail.delete.submit', handleDeleteEvent);

  // レコード一覧画面の削除時のイベント処理
  kintone.events.on('app.record.index.delete.submit', handleDeleteEvent);

})();

【注意点】
レコード一括削除の処理はサポート外です（削除されます）
レコード一括削除の操作は、アプリの設定＞高度な設定で無効にできます
（初期設定では無効になっています）

カスタムエラーメッセージのＣＳＳコード

画面の背景を薄赤色にしてダイヤログのOKボタンも赤色にしました。
レコードの削除が禁止であることを目立つようにユーザーに伝えます。
アプリ設定＞JavaScript / CSSでカスタマイズ＞CSSの欄にアップロードして追加します。

/* カスタムエラーメッセージの色指定 */
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.3); /* 半透明の赤色背景 */
  z-index: 9999;
}

.custom-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff0f0; /* 薄い赤色の背景 */
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #ffcccc; /* 薄い赤色のボーダー */
}

.custom-alert h3 {
  margin-top: 0;
  color: #c0392b; /* 濃い赤色のテキスト */
}

.alert-ok-button {
  background-color: #e74c3c; /* 赤色のボタン背景 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.alert-ok-button:hover {
  background-color: #c0392b; /* ボタンのホバー時の濃い赤色 */
}

カスタマイズした感想

今回のカスタマイズは、顧客のアプリ管理者が一般ユーザーに日報アプリのレコード編集と削除権限を与えていたところ、集計対象のレコードを誤って削除してしまった事故が発端でした。
アプリ管理者が「削除禁止」にしたいレコードは一般ユーザーに削除権限が有っても「削除禁止」にしたいというニーズから取り組んだものです。

工夫した点は、エラーメッセージを目立つように表示するために、カスタム警告メッセージを表示する関数の実装と、警告メッセージの配色をＣＳＳで目立つ様にしたことです。画面全体の背景色を薄赤にして、警告メッセージをダイヤログボックスで画面中央に表示しています。
「削除しちゃダメ！」というメッセージを強調表示したいというニーズに沿って実装してみました（ユーザー教育の意味合いもあるそうです）

標準機能でレコードの削除を禁止にする方法

レコードの特定のフィールドの値を判定条件にして、編集や削除を禁止する方法は、標準機能の「レコードのアクセス権」でも実現できます。
※レコード削除の操作が出来なくなるだけで、カスタムな警告メッセージの表示機能はありません

より複雑な条件（ユーザー所属組織＋フィールドの値等）でレコードの編集や削除を制限したい場合は「レコードのアクセス権」の利用がお勧めです。
例：プロセス管理でステータス「完了」のレコードを削除禁止にする等

今回も最後まで読んで頂きありがとうございました。

よろしければサポートお願いします！いただいたサポートは、note記事制作の活動費に使わせていただきます！