開発情報・ナレッジ

投稿者: SPIRERS ナレッジ向上チーム 2023年1月30日 (月)

パラメータを引継いだままレコードリストに戻るリンクを追加する強化ガジェット

レコードアイテムには、デフォルトでレコードリストに戻るリンクが付いていません。
ページリンク追加からレコードリストのページへ戻るリンクを追加することができますが、この方法で追加した場合はレコードリストで適用していたページ数、検索条件、ソート順、表示件数などを引継ぐことができずリセットされてしまいます。

そこで今回は、ページ数、検索条件、ソート順、表示件数などを引継いだままレコードリストに戻るリンクを追加できる強化ガジェットを作成いたしました。
2ステップですぐに実装できますので、ぜひ活用してみてください!

変更・改定履歴

  • 改定

    フォームブロックが設置されている場合も動作するように修正

前提・仕様

・リファラー(直前に開いていたページ)のドメインが現在のページと一致し、かつURLのパス部分が一致しない場合はブラウザ履歴から1つ前のページに戻ります。
・リファラーのドメインが現在のページと一致しない、またはURLのパス部分が一致する場合はレコードリストのURLへ直接遷移します。

設定方法

JavaScriptを貼り付ける
下記のコードをレコードアイテムブロックが設置されているページ、またはレコードアイテムブロックのJavascriptタブに貼り付けてください。
※レコードリストのページには貼り付け不要です。
JavaScript
/// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function listback(elm) {
  const prev = document.referrer;
  const current = new RegExp(location.hostname, "i");
  const path = new RegExp(location.pathname, "i");
  if (prev.match(current) && !prev.match(path)) {
    history.back();
  } else {
    location.href = elm.getAttribute('href');
  }
}
戻るリンクを追加する
下記のタグをレコードアイテムブロックが設置されているページ、またはレコードアイテムブロックのbodyの冒頭に追加してください。
リンクテキストの「一覧に戻る」部分は自由に変更可能です。
XXXX部分はレコードリスト設置ページのページIDに差替えてください。
ページIDの確認場所
body
<a th:href="${pages['p0XXXX']?.path ?:'/404'}" onclick="listback(this);return false;">一覧に戻る</a>

解決しない場合はこちら コンテンツに関しての
要望はこちら