新規投稿
フォローする

一覧画面でインライン編集の保存時にエラーが出る

一覧画面を表示した時にREST API(GET,PUT)を用いて年齢を計算させています。

その後、一覧画面でインライン編集を行い、例えば入社日を入力して保存をすると添付の図のようなエラーが表示されます。これは入社日を入力したことに限らずどのレコード編集し保存しても同じようなエラーが出ます。

上記の条件下においてエラーを出さずに、

①インライン編集の内容が無事に保存されること

②欲を言うと誕生日や入社日が編集されたら年齢および社歴が表示される

この2点を実現するためにはどのようなプログラムを追加・変更すればよいかご相談させてください。(皆様、お忙しいところ大変恐縮ではございます)

※詳細画面編集では問題なくプログラムが動作していることから、REST API絡みだと推測しております💦

(function() {
  'use strict';
  
  //ロケール初期化
  moment.locale('ja');
  
  /////////////////////////////////////////////
  //年齢計算 引数は配列[0]は誕生日,[1]は入社日
  function age_calculation(bri_his){

      //戻り値
      let age = [];
    
      const today = moment();
      
      //12で割って年を出す(y_b:誕生日年,y_b:入社歴年)
      let y_b = Math.floor(moment.duration(today.diff(bri_his[0])).as('months')/12);
      let y_h1 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months')/12);
      
      //12で割った余りで月を出す(m_h1:入社歴月数)
      let m_h1 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months')%12);
      
      //ヵ月数を出す(m_h2:入社歴ヵ月数::ヵ月数表示用)
      let m_h2 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months'));
      
      //マイナス値であれば0を再代入する
      y_b = Math.sign(y_b) !== -1 ? y_b : 0;
      y_h1 = Math.sign(y_h1) !== -1 ? y_h1 : 0;
      m_h1 = Math.sign(m_h1) !== -1 ? m_h1 : 0;
      m_h2 = Math.sign(m_h2) !== -1 ? m_h2 : 0;
      
      //戻り値に代入
      age.brithday = y_b;
      age.history01 = y_h1 + '年' + m_h1 + 'ヵ月';
      age.history02 = m_h2;

      return age;
  }
  
  /////////////////////////////////////////////
  //レコード一覧が表示された時に自動計算する
  function formindex(event){

      //レコード取得用のリクエストパラメータ
      var Get_body = {
          "app":kintone.app.getId(),
      };
      
      //レコード更新用のリクエストパラメータ
      var Put_body = {
          "app":kintone.app.getId(),
          "records":[]
      };
      
      //年齢計算用関数に渡す引数配列に生年月日と入社日を格納 [0]が誕生日 [1]が入社日
      let bir_his;
      //年齢計算結果格納用配列
      let age;
    
      //表示されているレコードを取得
      return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', Get_body, function(get_resp) {
          
          var put_records = [];
          
          // success
          for(var i = 0; i < get_resp.records.length; i++){
            
              //年齢計算の引数となる配列に誕生日[0]と入社日[1]を格納
              bir_his = [get_resp.records[i].employee_birthday.value,get_resp.records[i].employee_joined.value];
              
              //年齢計算
              age = age_calculation(bir_his);
              
              put_records[i] = get_resp.records[i].employee_name.value;
              
              Put_body.records[i] = {
                  "id":get_resp.records[i].$id.value,
                  "record":{
                      "test":{
                          "value":put_records[i]
                      },
                      "employee_age":{
                          "value":age.brithday
                      },
                      "employee_history":{
                          "value":age.history01
                      },
                      "employee_history_m":{
                          "value":age.history02
                      }
                  }
              };
          }
          
          console.log(Put_body.records);
          
          return kintone.api(kintone.api.url('/k/v1/records',true),'PUT',Put_body,function(put_resp){
            
              //put success
              console.log('put成功');

              return event;
              
          },function(put_error){
            
              //put Error
              console.log('put失敗');
          });
          
      },function(get_error){
        
            //get Error
            console.log('get失敗');
      });
      
}

  ///////////////////////////////////////////////////
  //レコード追加保存前・編集保存前に自動計算する
  function beforesaving(event){
      
      let record = event.record;
      
      //年齢計算用関数に渡す引数配列に生年月日と入社日を格納 [0]が誕生日 [1]が入社日
      let bir_his = [record.employee_birthday.value,record.employee_joined.value];

      //年齢計算関数
      let age = age_calculation(bir_his);
      
      //フィールドに結果を格納
      record.employee_age.value = Number(age.brithday);
      record.employee_history.value = age.history01;
      record.employee_history_m.value = age.history02;

      return event;
  }
  
  /////////////////////////////////////////////////
  //kintoneイベント処理
  kintone.events.on(['app.record.index.show'],
                    formindex
                    );
                    
  kintone.events.on(['app.record.edit.submit',
                     'app.record.create.submit',
                     'app.record.index.edit.submit'],
                     beforesaving
                     );

})();
0

5件のコメント

Avatar
村濱一樹

エラーを拝見するに、インラインで編集しようとしているレコードをこのプログラムで保存直前にREST APIで編集しているからだと思われます。

再計算したものをREST APIで上書きするのではなく、 app.record.index.edit.submitのeventのreturnで値を渡してあげるようにすればいいかと思います。

1
Avatar
吉原大騎

村濱さん

ご教授ありがとうございます!

REST APIを使っている理由は、一覧表示した際に現在における年齢を常に表示させたいからであり、この動作はマストとしております。この点、最初に述べていなかったのは申し訳ありません💦

REST APIを使わずに一覧表示した際に現在における年齢を表示させるために、私の勉強不足でもありますが、一覧表示イベントを使うとなると該当イベントがないという感じで困っておりました。

具体的に、

 kintone.events.on(['app.record.index.show'],formindex);

でREST APIを用いて年齢表示を更新しておりますが、一覧イベントで更新するものがない…という感じです。

なので上記の条件下において手段があればご教授頂けると幸いでございます。

仮に厳しいようであればこのアプリではインライン編集不可にすれば解決もしそうな気がしております。

吉原大騎により編集されました
0
Avatar
吉原大騎

その後、プログラムでREST APIのGETは不要だということに気づき、event.recordsから得ることにして、

REST APIのPUTされた値を表示する方法を下記の記事を参考にしてプログラムを修正しました。
https://developer.cybozu.io/hc/ja/community/posts/900003004743-%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A4%BA%E6%99%82%E3%81%AB-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E5%80%A4%E3%82%92%E5%A4%89%E6%9B%B4-PUT-%E3%81%97-%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E5%80%A4%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84

(function() {
  'use strict';
  
  //ロケール初期化
  moment.locale('ja');
  
  /////////////////////////////////////////////
  //年齢計算 引数は配列[0]は誕生日,[1]は入社日
  function age_calculation(bri_his){

      //戻り値
      let age = [];
    
      const today = moment();
      
      //12で割って年を出す(y_b:誕生日年,y_b:入社歴年)
      let y_b = Math.floor(moment.duration(today.diff(bri_his[0])).as('months')/12);
      let y_h1 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months')/12);
      
      //12で割った余りで月を出す(m_h1:入社歴月数)
      let m_h1 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months')%12);
      
      //ヵ月数を出す(m_h2:入社歴ヵ月数::ヵ月数表示用)
      let m_h2 = Math.floor(moment.duration(today.diff(bri_his[1])).as('months'));
      
      //マイナス値であれば0を再代入する
      y_b = Math.sign(y_b) !== -1 ? y_b : 0;
      y_h1 = Math.sign(y_h1) !== -1 ? y_h1 : 0;
      m_h1 = Math.sign(m_h1) !== -1 ? m_h1 : 0;
      m_h2 = Math.sign(m_h2) !== -1 ? m_h2 : 0;
      
      //戻り値に代入
      age.brithday = y_b;
      age.history01 = y_h1 + '年' + m_h1 + 'ヵ月';
      age.history02 = m_h2;

      return age;
  }
  
  /////////////////////////////////////////////
  //レコード一覧が表示された時に自動計算する
  function formindex(event){
    
        // 値セット後のリロード時には、再度セットに行かない
        if (sessionStorage.getItem('record_updated') === '1') {
            sessionStorage.setItem('record_updated', '');
            return event;
        }
    
      let records = event.records;

      //レコード取得用のリクエストパラメータ
      var Get_body = {
          "app":kintone.app.getId(),
      };
      
      //レコード更新用のリクエストパラメータ
      var Put_body = {
          "app":kintone.app.getId(),
          "records":[]
      };
      
      //年齢計算用関数に渡す引数配列に生年月日と入社日を格納 [0]が誕生日 [1]が入社日
      let bir_his;
      //年齢計算結果格納用配列
      let age;
    
      var put_records = [];
          
      console.log(records);
          
      for(var i = 0; i < records.length; i++){
            
          console.log("チェック");
          //年齢計算の引数となる配列に誕生日[0]と入社日[1]を格納
          bir_his = [records[i].employee_birthday.value,records[i].employee_joined.value];
              
          //年齢計算
          age = age_calculation(bir_his);
              
          put_records[i] = event.records[i].employee_name.value;
              
          Put_body.records[i] = {
              "id":records[i].record_num.value,//get_resp.records[i].$id.value,
              "record":{
                  "test":{
                       "value":45
                   },
                   "employee_age":{
                      "value":Number(age.brithday)
                  },
                  "employee_history":{
                       "value":age.history01
                  },
                  "employee_history_m":{
                      "value":age.history02
                  }
              }
          };
      }
          
      console.log(Put_body.records);
          
      return kintone.api(kintone.api.url('/k/v1/records',true),'PUT',Put_body,function(put_resp){
            
          //put success
          console.log(Put_body);
          console.log('put成功');
              
          sessionStorage.setItem('record_updated', '1');
          //alert(sessionStorage.value);
          location.reload();

          return event;
              
      },function(put_error){
            
          //put Error
          console.log('put失敗');
      });
}

  ///////////////////////////////////////////////////
  //レコード追加保存前・編集保存前に自動計算する
  function beforesaving(event){
      
      let record = event.record;
      
      //年齢計算用関数に渡す引数配列に生年月日と入社日を格納 [0]が誕生日 [1]が入社日
      let bir_his = [record.employee_birthday.value,record.employee_joined.value];

      //年齢計算関数
      let age = age_calculation(bir_his);
      
      //フィールドに結果を格納
      record.employee_age.value = Number(age.brithday);
      record.employee_history.value = age.history01;
      record.employee_history_m.value = age.history02;

      return event;
  }
  
  /////////////////////////////////////////////////
  //kintoneイベント処理
  kintone.events.on(['app.record.index.show'],
                    formindex
                    );
                    
  kintone.events.on(['app.record.edit.submit',
                     'app.record.create.submit',
                     'app.record.index.edit.submit'],
                     beforesaving
                     );

})();

すると、問題が解決した…という感じでした。
結果、GETが悪さをしていたこと、画面のリロードで解消したという感じっぽいのですが、なぜ?がわからずです。もしよければここからわかる原因をご教授頂けると幸いでございます。

0
Avatar
村濱一樹

あーすいません細かく理解できてない部分がありました。

 

今回成功したのは、
PUT後、リロードすることで一覧画面の表示を最新にしたからだと思います(RESTでGETしてないことは無関係)

最初のコードは、PUTで更新があったのに、古い状態の一覧を編集しようとするとエラーになったわけですね。

1
Avatar
吉原大騎

村濱様

とんでもございません💦 ご教授いただいてとても感謝しております!

何度かlocation.reloard()で画面更新も試したのですが、今回のがたまたま良かったということですね

GETとは無関係であったことも、アドバイスいただきもやっとが解消されました

>PUTで更新があったのに、古い状態の一覧を編集しようとするとエラーになった

画面更新というテクニック、そして、リロードするので魅せ方というところでまたブラッシュアップしようと思います

ありがとうございました!

0
サインインしてコメントを残してください。