カスタマイズ kintone 初心者向け: 入力ミスを防止するために、フィールドを無効化する方法

チュン

こんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。

手作業での入力作業では、人間がミスをすることは避けられません。そのため、ミスを減らすためには、一定の条件下で入力可能な範囲を制限する必要があります。

問題
各製品ごとのプロモーション情報を管理するデータがあります。各製品には、「パーセント割引」と「固定割引」の2種類のプロモーションを適用できます。「パーセント割引」を選択した場合、「パーセント」列に入力します。「固定割引」を選択した場合、「固定金額」列に入力します。

問題は、ユーザーが2つの列に両方データを入力したり、列を間違えて入力してしまう可能性があることです。 この問題に対処するため、選択したキャンペーンの種類によって入力可能な項目を制限します。 「パーセント割引」を選択した場合、「固定金額」の入力を無効にします。 「固定割引」を選択した場合、「パーセント」の入力を無効にします。
この機能は、標準のkintoneでは実現できません。

以下は、説明図です。

結果
これは、JavaScript をカスタマイズすることで、「パーセント」と「固定金額」のフィールドを無効にした結果です。

準備アプリ
「割引プログラム管理」アプリを作成します。
 以下はアプリケーション内のデータフィールドです。

JavaScriptプログラム
※「JSEdit for kintone」プラグインを使用して、ソースコードを編集する
プログラムの処理流れ
製品一覧表の各行を一つずつ確認する
行で割引の種類列の値を確認する:
　　1. もし「割引の種類」の値を選択していない場合、「パーセント」と「固定金額」の両方のフィールドを無効にする。
　　2. もし、「割引の種類」列の値が「パーセント割引」なら、「固定金額」フィールドを無効にし、「パーセント」フィールドを有効にする。
　　3. もし「割引の種類」列の値が「固定割引」なら、「パーセント」フィールドを無効にし、「固定金額」フィールドを有効にする。
　　4.「割引の種類」列の値を「固定金額」から「パーセント割引」またはその逆に変更した場合、入力済みの値をクリアし、「固定金額」または「パーセント」の列を有効・無効にする。

(() => {
  kintone.events.on([
    // レコードの新規作成画面またはレコードの編集画面にアクセスすると、処理プロセスが開始されます。  
    'app.record.create.show',
    'app.record.edit.show',
    // 「商品リスト」フィールドの変更がトリガーとなり、処理が開始されます。具体的には、テーブル内の行の追加または削除が行われます。
    'app.record.create.change. 商品リスト,
    'app.record.edit.change. 商品リスト,
    //「 割引の種類 」の値が変更されると、処理プロセスが開始されます。    
    'app.record.edit.change. 割引の種類, 
    'app.record.create.change. 割引の種類
  ], function(event) {
    //レコードのデータを格納するレコード変数を初期化する
    const record = event.record;
    // 製品一覧表の行を閲覧する
    for (const row of record['Table'].value){
      // もし「割引の種類」の値を選択していない場合、「パーセント」と「固定金額」の両方のフィールドを無効にする。
      if (!row.value['割引の種類'].value) {
        row.value['パーセント'].value = undefined;
        row.value['固定金額'].value = undefined;
        row.value['パーセント'].disabled = true;
        row.value['固定金額'].disabled = true;
      }
      // もし、「割引の種類」カラムの値が「パーセント割引」の場合、「固定金額」フィールドを無効にし、「パーセント」フィールドを有効にする。
      else if (row.value['割引の種類'].value == 'パーセント割引'){
        row.value['固定金額'].value = undefined;
        row.value['固定金額'].disabled = true;
        row.value['パーセント'].disabled = false;
      }
      // もし「割引の種類」カラムの値が「固定割引」なら、「パーセント」フィールドを無効にし、「固定金額」フィールドを有効にする。
      else if (row.value['割引の種類'].value == '固定割引'){
        row.value['パーセント'].value = undefined;
        row.value['パーセント'].disabled = true;
        row.value['固定金額'].disabled = false;
      }
    }
    return event;
  })
})();

参照 
https://community.cybozu.dev/t/topic/1455

記事を読んでいただきありがとうございます。
次の記事をお楽しみにお待ちください !