こんにちは！！

今回は私が仕事で頻繁に扱っているサイボウズ社のクラウドサービス「kintone」について、
最近発見したJavaScriptカスタマイズの裏技？をご紹介します！

これまでkintoneカスタマイズはかなりの数やってきましたが、
レコード一覧画面のインライン編集保存成功後イベント（app.record.index.edit.submit.success）を扱うのは、
実は今回が初めてでした！

私はこのイベントの中でページ再読み込み処理を実装したかったのですが、
再読み込みするだけなのに地味に苦戦して、あれこれ考えた末にできたので、皆様に紹介しようと思いました。

これ、悩んでいる（いた）のきっと私だけじゃないと思うんですよね…！

というわけで、早速紹介していきます！！

レコード一覧画面のインライン編集の保存成功後イベント（app.record.index.edit.submit.success）

私自身も今回初めて使ったイベントだったので、まずは簡単な紹介から！

イベントの仕様詳細についてはこちらに記載されています！

レコード一覧画面で編集したい行の編集ボタンを押下し、そこから保存ボタンを押下し、
その保存処理が完了したときに実行したい処理を書くときに使います。
※モバイルではレコード一覧画面に編集ボタンが存在しないためこのイベントも存在しません

同じインライン編集のイベントでも、保存前の方のイベント（app.record.index.edit.submit）では、
フィールドの値を書き換えたり保存をキャンセルしたりすることができますが、
こちらはあくまで保存後のイベントなので、そのようなことはできません。

では何ができるのかというと、eventにurlプロパティを設定しておくことで、
最後に「return event;」をすると、その後にそのURLに画面遷移することができます！

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	event.url = 'https://developer.cybozu.io/hc/ja';
	return event;
});

…え？そんなの、「location.href = ‘https://developer.cybozu.io/hc/ja’;」ってすればよくない？
と思われる方もいらっしゃるかもしれません。

しかし、今回私はこれに救われたのです！

location.hrefとの違いについても後述しますね。

再読み込み処理を試すと…？

さて、今回私は保存完了後にページ再読み込みを行いたいです。

というわけで最初に試したのがこちら↓

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	location.reload();
});

実際に動かしてみると…

…え？いやいや、あなた保存処理はもう終わってるはずでしょ？

今再読み込みしたって別にいいでしょ…？

理由は不明ですが、どうやら仕様みたいですね。

event.urlに現在のURLを設定すると…？

そうなんです、この確認ダイアログを表示させずに画面遷移させることができるのが前述したevent.urlです。

というわけで、こちらを試してみました↓

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	event.url = location.href;
	return event;
});

「location.href」で現在のURLを取得することができるので、それを設定してみました。

動かしてみると…今度は何も変化なし。

私の想定通りの動きもしておらず、どうやら再読み込みが行われていないようです。

現在と同じURLだと画面遷移が行われないようですね。

これは困りました…

裏技を考えた

悩んだ末、私はあることに気がつきました。

末尾に「/」付けたら別URL扱いになって画面遷移されるのでは…？

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	event.url = location.href + '/';
	return event;
});

動かしてみると…

なんと！！想定通り確認ダイアログ無しで再読み込みされたのです！！

我ながら裏技というか…謎な解決策を考えついたものです＾＾；

ただ、このままだとインライン編集後保存を行う度にURLの末尾が「///////」となってしまい不格好な上に、
一覧や絞り込みにより抽出・ソート条件が設定されている場合に上手くいかなくなります。

これを修正した完成版裏技がこちら↓

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	event.url = location.href.endsWith('/') || location.href.endsWith('&') ?
		location.href.slice(0, -1) :
		location.href + (location.href.includes('?') ? '&' : '/');
	return event;
});

if文で書き直したものがこちら（内容は上記と同一）↓

kintone.events.on('app.record.index.edit.submit.success', function(event) {
	if (location.href.endsWith('/') || location.href.endsWith('&')) {
		// 既に末尾に文字を付与済みの場合は取り除く
		event.url = location.href.slice(0, -1);
	} else if (location.href.includes('?')) {
		// 抽出・ソート条件が設定されている場合は「&」を付与する
		event.url = location.href + '&';
	} else {
		// 抽出・ソート条件が設定されていない場合は「/」を付与する
		event.url = location.href + '/';
	}
	return event;
});

※Internet Explorerの場合はendsWith及びincludesが使えないのでPolyfill.ioを使用してください

終わりに

いかがでしたでしょうか？

「/」の有無で別URLとして扱われるという点が今回のポイントでしたね！

もしもっと良い方法がありましたら教えてください＾＾；

同じことで悩まれている方のお役に立てれば幸いです！

それでは、今日はこの辺で。