添付ファイルの虫眼鏡アイコンが一覧画面にも欲しい（プリザンター）

Last updated at 2024-07-15Posted at 2024-07-15

プリザンターでは、添付ファイルのハイパーリンクをクリックするとファイルがダウンロードされますが、次の記事で紹介されている通り、ハイパーリンクの左横に表示されている虫眼鏡アイコンをクリックすると、ダウンロードではなくブラウザーで添付ファイルの内容を表示することができます。

ただし、この虫眼鏡アイコンが表示されるのは編集画面のみで、一覧画面には表示されません（ハイパーリンクをクリックするとダウンロードされる）。

一覧画面からでもブラウザーで添付ファイルの内容を表示できるようにしたいと思い、試行錯誤してみました。¹

……が、結論としては完全な解決には至っていません。

事前準備

サーバスクリプトで「行表示の前」の条件を指定すると、一覧画面に表示される内容を変更することができます。

当初は model.AttachmentsA の内容を書き換えればよいかと思いましたが、添付ファイル項目は get のみで set ができないようなので、分類項目を一覧画面に追加し、そちらをサーバスクリプトで操作することにします。

まず、「ビュー処理時」の条件を指定したサーバスクリプトを作成し、スクリプトとして次の内容を入力します（一覧画面に添付ファイル項目を追加している場合は不要）。

try {
  view.AlwaysGetColumns.Add('AttachmentsA');
} catch (e) {
  context.Log(e.stack);
}

次に、「行表示の前」の条件を指定したサーバスクリプトを作成し、スクリプトとして次の内容を入力します。²

try {
  obj = JSON.parse(model.AttachmentsA);
  model.ClassA = "/binaries/" + obj[0].Guid + "/show";
} catch (e) {
  context.Log(e.stack);
}

このままではハイパーリンクにならないので、編集画面に「分類項目 A」を追加して詳細設定を変更します。具体的には、「アンカー」のチェックボックスをオンにし、「アンカー書式」に {Value} を入力します。

これにより、一覧画面の「分類項目 A」の列に表示されるハイパーリンクをクリックすると、ブラウザーで添付ファイルの内容が表示されるようになります。

なお、「アンカーを新しいタブで開く」のチェックボックスをオンにすると、<a> 要素に target="_blank" が設定されます。³

複数登録された添付ファイルに対応していない: 分類項目にはひとつの URL しか設定できないので、ひとつの添付ファイル項目に複数のファイルを登録しても、複数ファイルのうちのひとつだけしか表示されない
分類項目に URL が表示される: 分類項目の「アンカー」機能では、ハイパーリンクの文字列とリンク先 (URL) を別々に指定することができない。しかも、URL には GUID が含まれるので長い

プリザンターには「カスタムデザイン」という機能があります。本来は、一覧画面において、ひとつのセルに複数の項目を表示する場合に使用することが想定されているようですが、カスタムデザインではマークダウンが使用できる点に注目しました。

分類項目の詳細設定の「カスタムデザインを使用」のチェックボックスをオンにし、「カスタムデザイン」に次の内容を入力しておきます。

[添付ファイル]([分類A])

これにより、一覧画面では先ほどのように URL は表示されず、添付ファイル という文字列にハイパーリンクが設定された形になります（ハイパーリンクをクリックするとブラウザーで添付ファイルの内容が表示される）。

すべてのレコード（行）が同じ文字列になる: 今回の例では全てのレコードが「添付ファイル」となる。絵文字（やなど）にすれば（要件的に、することができれば）あまり問題にならない
複数登録された添付ファイルに対応していない: 上述の通り

（標準機能で）添付ファイルの虫眼鏡アイコンが一覧画面にも欲しい。

虫眼鏡アイコンを表示させる（編集画面と同じものを完全に再現する）ことが目的ではありません（一覧画面からブラウザーで添付ファイルの内容を表示することができるようになればよい） ↩
編集画面の添付ファイル項目の（ファイル名の）ハイパーリンクが /binaries/<添付ファイルの GUID>/download となっており、虫眼鏡アイコンのハイパーリンクが /binaries/<添付ファイルの GUID>/show となっているようなので、後者の URL のハイパーリンクを一覧画面に表示できればよい ↩
虫眼鏡アイコンは同じタブで開くので、動作が選べるようになるのはうれしい。
2024-07-15 追記：冒頭に追記したプリなま第 10 回 15:25 で、新しいタブで開く方法も紹介されています ↩