レコード削除の事故を防ぐ！フィールドの値で削除を禁止するカスタマイズ
やりたいこと（背景とニーズ）
日報アプリを運用する中で、誤って重要なレコードが削除されるという事故が発生し、その対策が急務となりました。このような事態を防ぐため、Kintoneアプリに「削除禁止」の設定を追加するカスタマイズを行いました。削除権限があるユーザーでも、削除可否スイッチの設定が優先する様にして特定のレコードを削除できないようにすることが目的です。
カスタマイズのポイント
このカスタマイズでは、レコードに「削除可否」フィールドを追加し、アプリ管理者だけがこのフィールドを編集できるようにしました。削除禁止に設定されたレコードを削除しようとすると、カスタムメッセージが表示され、削除操作がキャンセルされます。
（画面背景色とメッセージボックスの配色はＣＳＳで設定します）
レコード一覧とレコード詳細画面の削除アクションで動作する様にします。
メッセージは画面中央に目立つように表示され、背景色を薄い赤色にすることで、誤操作を防ぐようにしています。また、警告メッセージも赤色で強調されており、「このレコードは削除が禁止されています。管理者に連絡してください。」という内容がユーザーに伝わります。
デモ画面
フォームの設定
フォームの設定に必要な項目は「削除可否」のラジオボタンだけです。
他のフィールド（タイトルも含む）は、本件カスタマイズとは関係ないので自由に追加・設定して下さい
レコードの「削除可否」のフィールドをアプリの管理者しか編集できない様にすれば、アプリ管理者以外は「削除可否」の編集が出来なくなります。
これでアプリ管理者以外は「削除禁止」の状態を解除できなくなります。
上記画面では、初期値が「削除可」ですが、初期値を「削除不可」にすれば、新規作成レコードは全て削除不可になります。
サンプルJavascriptコード
DELETE_PERMISSION_FIELDに「削除可否」を判定するフィールドコードを設定します。
レコード一覧とレコード詳細画面の削除アクションで動作します。
/* レコード削除の事故を防ぐ！フィールドの値で削除を禁止するカスタマイズ
* Sample Program
* Distributor: https://note.com/appgroup
* Copyright (c) 2024 Application Utilization Study Group
* Licensed under the MIT License
------------------------------------------------------------*/
(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; /* ボタンのホバー時の濃い赤色 */
}カスタマイズした感想
今回のカスタマイズは、顧客のアプリ管理者が一般ユーザーに日報アプリのレコード編集と削除権限を与えていたところ、集計対象のレコードを誤って削除してしまった事故が発端でした。
アプリ管理者が「削除禁止」にしたいレコードは一般ユーザーに削除権限が有っても「削除禁止」にしたいというニーズから取り組んだものです。
工夫した点は、エラーメッセージを目立つように表示するために、カスタム警告メッセージを表示する関数の実装と、警告メッセージの配色をＣＳＳで目立つ様にしたことです。画面全体の背景色を薄赤にして、警告メッセージをダイヤログボックスで画面中央に表示しています。
「削除しちゃダメ！」というメッセージを強調表示したいというニーズに沿って実装してみました（ユーザー教育の意味合いもあるそうです）
標準機能でレコードの削除を禁止にする方法
レコードの特定のフィールドの値を判定条件にして、編集や削除を禁止する方法は、標準機能の「レコードのアクセス権」でも実現できます。
※レコード削除の操作が出来なくなるだけで、カスタムな警告メッセージの表示機能はありません
より複雑な条件（ユーザー所属組織＋フィールドの値等）でレコードの編集や削除を制限したい場合は「レコードのアクセス権」の利用がお勧めです。
例：プロセス管理でステータス「完了」のレコードを削除禁止にする等
今回も最後まで読んで頂きありがとうございました。
いいなと思ったら応援しよう！
