kintone アプリで、日付を入力して、別フィールドに値を自動入力させてみた

０．はじめに

kintone アプリで、

日付を入力したら自動で別フィールドに値を入力する様にしたいな、

と思い、やってみました。

１．JavaScript ファイルをアップロードする

1. まず、アプリの設定画面を開き、「設定」タブの「JavaScript / CSSでカスタマイズ」リンクをクリックします。
   
   
   • 　

2. 「JavaScript / CSSでカスタマイズ」画面が開くので、「PC用のJavaScriptファイル」の「アップロードして追加」ボタンを押下し、以下の JavaScript ファイルをアップロードします。
   
   

   • 
   diffYYYYMM.js

   /*
   * 指定年月からの経過年月算出プログラム
   */
   (function () {
   // レコード追加、編集前、変更で処理を実行する
   var events = ['app.record.create.show','app.record.edit.show','app.record.index.edit.show',
                  'app.record.edit.change.計上月','app.record.create.change.計上月','app.record.index.edit.change.計上月'];
   kintone.events.on(events, function(event) {
       var record = event.record;
       // 基準月
       var baseYYYY = 2005;
       var baseMM = 7;
       console.log("baseYYYY: " + baseYYYY);
       console.log("baseMM: " + baseMM);
       // 計上月
       var tgtYYYYMMDD = record['計上月']['value'];
       console.log("tgtYYYYMMDD: " + tgtYYYYMMDD);
       var tgtYYYY = Number(tgtYYYYMMDD.substr(0,4));
       var tgtMM = Number(tgtYYYYMMDD.substr(5,2));
       console.log("tgtYYYY: " + tgtYYYY);
       console.log("tgtMM: " + tgtMM);
       // 月差分
       var difMM = tgtMM - baseMM
       if (difMM < 0) {
           difMM += 12;
           tgtYYYY -= 1;
       }
       // 年差分
       var difYYYY = tgtYYYY - baseYYYY;
       console.log("difMM: " + difMM);
       console.log("difYYYY: " + difYYYY);
       // 年
       if (difYYYY > 0) {
           record['期']['value'] = difYYYY + 1
       } else {
           record['期']['value'] = 0
       }
       // 月
       record['月']['value'] = tgtMM
   
       return event;
   });
   })();
   

２．アプリのフォームにフィールドを設定する

1. 「フォーム」タブを選択します。
   
   
   • 
     
     
2. 所定のフィールドを追加します。
   
   
   • 
     
     
   • 　

3. 入力する日付フィールドを設定します。
   　
   ここでは、「計上月」という名称を使っています。
   フィールドコードの値を「計上月」と設定して下さい。
   　
   JavaScript ファイルの以下の部分と関係しているので、「計上月」という名称を変更したい場合は、そちらも合わせて変更しておいて下さい。

   // レコード追加、編集前、変更で処理を実行する
   var events = ['app.record.create.show','app.record.edit.show','app.record.index.edit.show',
              'app.record.edit.change.計上月','app.record.create.change.計上月','app.record.index.edit.change.計上月'];
   

   // 計上月
   var tgtYYYYMMDD = record['計上月']['value'];
   

   
   

4. 自動出力する数値フィールドを設定します。
   　
   ここでは、「期」「月」という名称を使っています。
   フィールドコードの値を「期」「月」と設定して下さい。
   　
   JavaScript ファイルの以下の部分と関係しているので、「期」「月」という名称を変更したい場合は、そちらも合わせて変更しておいて下さい。不要な場合は、削除して下さい。
   
   

   • 「期」

   // 年
   if (difYYYY > 0) {
       record['期']['value'] = difYYYY + 1
   } else {
       record['期']['value'] = 0
   }
   

   　
   * 「月」

   // 月
   record['月']['value'] = tgtMM
   

９９．ハマりポイント

• とりあえず、初めてだったので以下のサイトを参考にしながら、一行ずつコーディングしていきました。イベントを拾って値の取得・設定が出来れば、あとは JavaScript の問題なのでそれほど時間も掛からずに出来たかと。
  • 第0回 kintone カスタマイズをはじめる前に知っておきたい6つのこと – cybozu developer network
  • 経過年数を表示する – cybozu developer network

ＸＸ．まとめ

kintone を使っていると、

意外にこういう細かい機能が欲しくなります。

参考になれば♪