【kintone】編集画面でのAPI更新後の詳細画面遷移について

[k-akiyama2]

何を実現したいのかを書きましょう

編集画面でボタンを設置し、ボタンクリック時に、APIで特定のフィールドのみ値を更新した後、詳細画面に遷移する動作を実現したいです。

過去の投稿を拝見したのですが、具体的な解決策が見いだせず、投稿致しました。

編集画面でapiを利用したフィールド更新→詳細画面への遷移で値が更新されていない

kintoneのある1アプリについて、詳細画面、編集画面それぞれにjsで以下の処理を組み込んでいます。 ■詳細画面 レコード詳細画面を開いた際に「フラグ」フィールドを取得（初期値は0） →フラグが1の場合：A処理 →フラグが1以外の場合：B処理 ■編集画面 レコード編集画面を開いたときに「フラグ」フィールドを取得 →フラグが1の場合：C処理 1件のレコードを更新する - cyboz…

発生した問題やエラーメッセージを具体的に書きましょう

【メッセージの遷移】

①更新します。よろしいですか？

②更新が完了しました。

③このページから移動します。よろしいですか？

このページから移動すると、入力したデータは保存されません。

“OK“を押すと移動、"“キャンセル”を押すと現在のページにとどまります。

③でOKをクリックすると、詳細画面に遷移し、更新前の値が表示されています。

可能であれば、③のメッセージは表示させずに、②の後、詳細画面に遷移させたいです。

実行したコードをコピー＆ペーストしましょう

kintone.events.on('app.record.edit.show', function(event) {
    
    var button = document.createElement('button');
    button.textContent = '①～③更新（詳細画面へ）';
    //ボタンクリック時の動作
    button.onclick = function() {
      var recordId = event.recordId;
      var appId = kintone.app.getId();
      
      // 編集画面の入力値を取得
      var currentRecord = kintone.app.record.get().record;

      
      // 更新対象フィールドを指定
      var updateFields = {
        受付番号: { value: currentRecord.受付番号.value }
      };


      // REST API更新用データを作成
      var body = {
        app: appId,
        id: recordId,
        record: updateFields // 編集画面の値をそのまま使う
      };


      let res = confirm('更新します。よろしいですか？');
  
      if(res == true){
        // REST APIで更新
        kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function (resp){
        
          alert('更新が完了しました。');
          console.log(resp);
          
          //詳細画面への遷移
          //location.href = '/k/' + appId + '/show#record=' + recordId + '&tab=history'
          location.href = '/k/' + appId + '/show#record=' + recordId
          
        },function(error){
          alert('更新エラー: ' + error.message);
          console.log(error)
        })
      }

    };

    kintone.app.record.getHeaderMenuSpaceElement().appendChild(button);

  });

[wv-sumichan (住田 知基)]

②で更新エラーが出ていないということは、レコードの更新自体は上手くいっていると思います。

③の後で値が更新されていないように見えるのは、 kintone の仕様上、編集画面から詳細画面に戻る際にリロードが発生しないため、編集開始前の値 (=キャッシュみたいな感じ) が見えているだけだと思います。試しにその状況で F5 でリロードすれば、更新後の値になっているのではないでしょうか。

---

前提の話になりますが、コードと説明を見るに「同じアプリの同じレコードで、編集画面で入力した値を 保存ボタン以外で 保存させたい」という意図に見受けられるのですが、なぜその必要があるのでしょうか？

何か別の値と一緒に書き込みたいとかの目的があるのかもしれませんが、目的によっては REST API ではなく JavaScript API で画面上に反映させて保存ボタンで保存させる、ということもできるので、どういった目的があるのかを知りたいですね。

[k-akiyama2]

住田様

ご回答いただきありがとうございます。

試しにその状況で F5 でリロードすれば、更新後の値になっているのではないでしょうか。

はい、詳細画面でリロードすると、更新後の値が表示されています。

前提の話になりますが、コードと説明を見るに「同じアプリの同じレコードで、編集画面で入力した値を 保存ボタン以外で 保存させたい」という意図に見受けられるのですが、なぜその必要があるのでしょうか？

標準の保存ボタンの場合、全てのフィールドが更新対象となりますが、特定のフィールドのみを更新したい（その他のフィールドは誤って値を変更しても、更新したくない）場面があり、その場面は操作するユーザーが判断する為、「特定のボタンをクリックした時」というトリガーにしています。

理想は、詳細画面に遷移する際に、確認メッセージを表示させずに更新後の値が表示される動作です。

目的によっては REST API ではなく JavaScript API で画面上に反映させて保存ボタンで保存させる、ということもできるので、どういった目的があるのかを知りたいですね。

是非アドバイス頂きたいです。よろしくお願いいたします。

[wv-sumichan (住田 知基)]

なるほど、画面上でレコードの編集はしたいけど、特定のフィールド以外は更新させたくない、ということですね。

レコード編集画面 → レコード詳細画面への遷移時に警告メッセージが出るのは kintone の仕様上避けられないので、それを回避したいのであれば、

• レコード編集画面を使わない
• レコード編集画面上で他のフィールドが変更できないようにする

のどちらかの手法を取る必要があると思います。

具体的に、実装するのであれば次のどちらかになるかな？と思います。

1. レコード詳細画面にボタンを設置して、クリックされたときに特定のフィールドだけを更新する専用画面を表示する
2. レコード編集画面に「このフィールドを編集します」チェックボックスを表示して、チェックが入ってないフィールドは非活性にして編集できないようにする

2.のほうは、フィールドが増減したときに毎回カスタマイズを調整しないといけないので、アプリの更新が多いアプリであれば1.の方法が良いと思います。

[k-akiyama2]

ご回答いただきありがとうございます。

頂いた２点の対応案を組み合わせて、下記の方針で検討します。

レコード詳細画面にボタンを設置して、クリックすると、更新対象のフィールド以外を非活性にした状態で編集画面を開く。その後、標準の「保存」ボタンで保存する。

上記の方針を実現しようとしたときに、編集画面を開いた後のイベント（app.record.edit.show)で、ボタンをクリックして開いたのか、標準の編集ボタンをクリックして開いたのかを、区別する必要があります。検討の際また質問させていただくかと思います。その際はアドバイス頂けると助かります。

[wv-sumichan (住田 知基)]

その方法は思いつきませんでしたが、確かに編集画面をうまく使えそうですね！

編集画面への遷移は location.href の書き換えで行えるのと、その際に独自の クエリパラメータ を設定することで「ボタン押下で遷移した」という情報を伝達することが可能です。ただ、 kintone 側の処理で一覧の絞り込み条件や並び替えの情報が入っていたり、モバイル版とPC版では URL の構造が違ったりするので、ちょっと工夫が必要になると思います。

ご参考までに。

[k-akiyama2]

クエリパラメータに関するアドバイス、ありがとうございました。

多いに参考にさせていただき、下記のコードで実現することができました。

オペレーション内で、カスタムボタンによる更新と標準機能による更新を両方行う可能性もあることから、編集画面から詳細画面に戻る時にクエリパラメータを削除する等、少し苦戦しましたが、希望した機能を実現することができました。

大変助かりました。今後ともよろしくお願いいたします。

■編集画面を開いた時のイベント

kintone.events.on(‘app.record.detail.show’, function(event) {

// クエリパラメータ定義
const buttonParam = '&button_name=1to3';

// カスタムボタン作成
const menuButton = document.createElement('button');
menuButton.id = 'menu_button';
menuButton.innerText = '①～③保存';

//現在のURLを取得
const url_origin = new URL(window.location.href);

//現在のURLから「①～③保存」のパラメータを削除
//（カスタムボタンにより編集画面に遷移し、詳細画面に戻った場合にパラメータが残ってしまうことの対策）
const url_origin_change = url_origin.href.replace(buttonParam,'');

//現在のURLを書換（リロードなし、パラメータ削除）
window.history.replaceState({}, '', url_origin_change);

//ボタンクリック時の処理
menuButton.onclick = function() {
  // 編集画面への遷移（mode=edit と button_name追加）
  let url_dest = location.href.replace('&mode=show', '');
  url_dest += '&mode=edit' + buttonParam;
  location.href = url_dest;
};

//ボタン設置
const headerMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
headerMenuSpace.appendChild(menuButton);

return event;

});

■編集画面を開いた時のイベント

kintone.events.on(‘app.record.edit.show’, function(event) {

//URL内のクエリパラメータ取得
const urlParams = new URLSearchParams(location.href);
const button_name = urlParams.get('button_name');

//①～③保存ボタンをクリックして編集画面に遷移していれば、特定のフィールドを無効化する
if(button_name == '1to3'){
  event.record.型式.disabled = true
}
else{
  event.record.型式.disabled = false
}

return event

});