はじめに

プリザンターの編集画面には、現在のレコードとリンク関係にあるレコードの一覧が表示される「リンク」セクションがあります。リンク先やリンク元のレコードをコンパクトに確認できる便利な機能ですが、表示件数やカラムが限られているため、もう少し広い画面でじっくり確認したいと思うことはないでしょうか。

今回は、リンクテーブルの見出し部分に「別タブで開く」アイコンを追加して、リンク先テーブルの一覧画面をワンクリックで別タブに表示できるようにする方法を紹介します。拡張スクリプトと拡張スタイルの 2 ファイルだけで実現できます。

バージョン 1.4 以降を対象にしています。

仕組みを整理する

編集画面のリンクセクション

編集画面のリンクセクションは、現在のレコードに対して「リンク先」（Destination）と「リンク元」（Source）の 2 方向のリンクを、それぞれテーブル形式で表示します。

このリンクテーブルの HTML 構造を確認してみましょう。

<fieldset class="enclosed link-creations">
  <legend>リンク</legend>
  <div>
    <table class="grid"
           data-id="{サイトID}"
           data-name="Destination"
           data-action="LinkTable">
      <caption>
        <span class="caption-direction">リンク先 : </span>
        <span class="caption-title">フォルダ > テーブル名</span>
        <span class="caption-quantity"> - 件数 </span>
        <span class="caption-count">5</span>
      </caption>
      <thead>...</thead>
      <tbody>
        <tr class="grid-row" data-id="{レコードID}">...</tr>
      </tbody>
    </table>
  </div>
</fieldset>

ここで注目すべきは <table> 要素の data-id 属性です。リンク先テーブルのサイト ID が格納されています。さらに、現在開いているレコード ID とサイト ID をクエリに付与して /items/{サイトID}?FromSiteId={現在サイトID}&LinkId={現在レコードID} を開けば、リンクに表示されている対象に絞った一覧を開けます。

実装の方針

項目	内容
アイコン配置	リンクテーブルの `<caption>` 末尾に追加
リンク先 URL	`data-id` からサイト ID を取得し、`FromSiteId` と `LinkId` を付けた URL を構築
別タブで開く	`<a>` タグに `target="_blank"` を設定
Ajax 対応	ページネーション操作後もアイコンを再追加
アイコン	Material Symbols の `open_in_new` を使用

実装してみよう

拡張スタイルと拡張スクリプトの 2 ファイルで構成します。

拡張機能	役割
拡張スタイル	アイコンの見た目
拡張スクリプト	アイコンの追加・クリック時の動作

アイコンのスタイル（拡張スタイル）

拡張スタイルとして App_Data/Parameters/ExtendedStyles/ に配置します。

ExtendedStyles/LinkNewTab.css

.lnt-open {
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
  color: inherit;
  text-decoration: none;
}

.lnt-open .material-symbols-outlined {
  font-size: 16px;
  vertical-align: middle;
}

.lnt-open:hover {
  opacity: 0.7;
}

アイコンの追加と動作（拡張スクリプト）

拡張スクリプトとして App_Data/Parameters/ExtendedScripts/ に配置します。

ExtendedScripts/LinkNewTab.js

$(function () {
  function addOpenButtons() {
    $('table.grid[data-action="LinkTable"]').each(function () {
      var $table = $(this);
      var siteId = $table.attr('data-id');
      if (!siteId) return;

      var $caption = $table.find('caption');
      if ($caption.length === 0 || $caption.find('.lnt-open').length > 0) return;

      var basePath = $('#ApplicationPath').val();
      var fromSiteId = $('#SiteId').val();
      var currentId =
        $('#IssueId').val() ||
        $('#ResultId').val() ||
        location.pathname.match(/\/items\/(\d+)/)?.[1] ||
        '';
      if (!fromSiteId || !currentId) return;

      var href =
        basePath +
        'items/' +
        siteId +
        '/index' +
        '?FromSiteId=' +
        encodeURIComponent(fromSiteId) +
        '&LinkId=' +
        encodeURIComponent(currentId);

      var $btn = $('<a>', {
        href: href,
        target: '_blank',
        rel: 'noopener noreferrer',
        class: 'lnt-open',
        title: '一覧を別タブで開く'
      }).append(
        $('<span>', {
          class: 'material-symbols-outlined',
          text: 'open_in_new'
        })
      );

      $caption.append($btn);
    });
  }

  addOpenButtons();

  $(document).ajaxComplete(function () {
    addOpenButtons();
  });
});

各処理のポイントを見ていきましょう。

リンクテーブルの検索

table.grid[data-action="LinkTable"] セレクターで、リンクセクション内のグリッドテーブルをすべて取得します。1 つのレコードに複数のリンクテーブルが存在する場合も .each() ですべて処理されます。

$('table.grid[data-action="LinkTable"]').each(function () {

data-action="LinkTable" はリンクテーブル固有の属性で、通常のグリッド（一覧画面のテーブル等）とは区別されます。

サイト ID の取得と URL 構築

テーブル要素の data-id 属性からリンク先テーブルのサイト ID を取得します。加えて、現在の編集画面から #SiteId（現在サイト ID）と #IssueId / #ResultId（現在レコード ID）を取得し、FromSiteId と LinkId をクエリに付与して URL を構築します。

var siteId = $table.attr('data-id');
var basePath = $('#ApplicationPath').val();
var fromSiteId = $('#SiteId').val();
var currentId = $('#IssueId').val() || $('#ResultId').val();
var $btn = $('<a>', {
  href: basePath + 'items/' + siteId
    + '?FromSiteId=' + encodeURIComponent(fromSiteId)
    + '&LinkId=' + encodeURIComponent(currentId),
  target: '_blank',
  rel: 'noopener noreferrer',
  ...
});

要素	説明
`$('#ApplicationPath').val()`	プリザンターのベースパスを取得（例: `/`）
`data-id`	リンクテーブルのサイト ID
`$('#SiteId').val()`	現在開いている編集画面のサイト ID（`FromSiteId`）
`$('#IssueId').val()` / `$('#ResultId').val()`	現在開いている編集レコード ID（`LinkId`）
`target="_blank"`	別タブで開く
`rel="noopener noreferrer"`	セキュリティ対策（リンク元への参照を防止）

重複追加の防止

.lnt-open クラスの有無をチェックし、既にアイコンが追加済みの場合はスキップします。

if ($caption.find('.lnt-open').length > 0) return;

この判定により、Ajax 通信後にアイコンが二重に追加されることを防ぎます。

Ajax リロードへの対応

リンクテーブルのページネーション操作時、テーブルは Ajax で再描画されます。$(document).ajaxComplete() で Ajax 完了を検知し、アイコンを再追加します。

$(document).ajaxComplete(function () {
  addOpenButtons();
});

テーブルが再描画されると既存のアイコンも消えるため、addOpenButtons を再実行しても重複追加の判定と合わせて正しく動作します。

まとめ

プリザンターの編集画面に表示されるリンク一覧に、別タブで開くアイコンを拡張スクリプトと拡張スタイルだけで追加しました。

リンクテーブルの <caption> 末尾にアイコンを配置し、クリックでリンク先テーブルの一覧画面を別タブで開ける
data-id でリンク先サイト ID、#SiteId と #IssueId / #ResultId で現在のリンク元情報を取得し、FromSiteId と LinkId を付けた URL を動的に構築するため、リンクに表示された対象で一覧を開ける
$(document).ajaxComplete() でページネーション操作後もアイコンを再追加し、ページ切替をしてもアイコンが消えない
拡張スクリプトと拡張スタイルの 2 ファイルだけで構成されるため、本体コードの変更なく導入が可能