プリザンターで添付ファイルの順番を並び替える方法

はじめに

プリザンターの添付ファイル項目、ファイルを複数アップロードしたときはアップロード時刻をキーに昇順で並びます。
今回は、この並び順をファイル名順に変更する方法を紹介します。

編集画面で並べ替えをしてみる

画面表示完了後に、スクリプトで画面に表示されている要素を並べ替える方法で実現します。

HTML要素を見てみる

編集画面上の要素をみてみます。

このアップロード済みのアイテムが並んでいるところだけをみてみます。

<div id="AttachmentsA.items" class="control-attachments-items">
    <div id="31DE9B93C26342D186646E723D7EB8E1" class="control-attachments-item already-attachments">
        <a class="file-name" href="/binaries/31de9b93c26342d186646e723d7eb8e1/show" target="_blank" rel="noopener noreferrer">
            <span class="ui-icon ui-icon-circle-zoomin show-file"></span>
        </a>
        <a class="file-name" href="/binaries/31de9b93c26342d186646e723d7eb8e1/download">log174_2503170830.xlsx　(11.63 KB)</a>
        <div class="ui-icon ui-icon-circle-close delete-file" data-action="binaries/deletetemp" data-id="31DE9B93C26342D186646E723D7EB8E1" onclick="$p.deleteAttachment($('#Results_AttachmentsA'), $(this));"></div>
    </div>
    <div id="84EFA42CCDEB4BF099211D7DA6502ACB" class="control-attachments-item already-attachments">
        <a class="file-name" href="/binaries/84efa42ccdeb4bf099211d7da6502acb/show" target="_blank" rel="noopener noreferrer">
            <span class="ui-icon ui-icon-circle-zoomin show-file"></span>
        </a>
        <a class="file-name" href="/binaries/84efa42ccdeb4bf099211d7da6502acb/download">log174_2503170830.csv　(2.57 KB)</a>
        <div class="ui-icon ui-icon-circle-close delete-file" data-action="binaries/deletetemp" data-id="84EFA42CCDEB4BF099211D7DA6502ACB" onclick="$p.deleteAttachment($('#Results_AttachmentsA'), $(this));"></div>
    </div>
    <div id="1578992A86624595A4660793F366C2D3" class="control-attachments-item already-attachments">
        <a class="file-name" href="/binaries/1578992a86624595a4660793f366c2d3/show" target="_blank" rel="noopener noreferrer">
            <span class="ui-icon ui-icon-circle-zoomin show-file"></span>
        </a>
        <a class="file-name" href="/binaries/1578992a86624595a4660793f366c2d3/download">log000_2503180830.csv　(802 B)</a>
        <div class="ui-icon ui-icon-circle-close delete-file" data-action="binaries/deletetemp" data-id="1578992A86624595A4660793F366C2D3" onclick="$p.deleteAttachment($('#Results_AttachmentsA'), $(this));"></div>
    </div>
</div>

div#{ファイルのGUID}となっている要素を並び替えることで並び替えは実現出来そうです。

スクリプトを作ってみる

ここまで来ればスクリプトを作るだけです。

$p.events.on_editor_load = function() {
	$('[id^="AttachmentsA"].control-attachments-items').html(
		$('[id^="AttachmentsA"].control-attachments-items .control-attachments-item').sort(function(a, b) {
			return $(a).find('.file-name').text() > $(b).find('.file-name').text() ?
				1 : -1;
		})
	);
}

これを出力先「新規作成」「編集」で設定します。

実行結果はこのようになり、希望通りにファイル名昇順で並んでいます。添付ファイルA項目を対象にスクリプトを作っていますが、他の添付ファイル項目を並び替えたいときはAttachmentsAの部分を書き換えてください。

一覧画面で並び替えをしてみる

サーバスクリプトで画面に描画される前に描画用のHTMLを書き換えてしまう方法で実現します。一覧画面全体に適用されるので、リンクの一覧にも適用されます。

サーバスクリプトで取得出来る要素を見てみる

まずは、サーバスクリプトで添付ファイル項目でどのような項目が取得出来るかを見てみます。modelの中に格納されている項目を見るようになりますが、マニュアルには記載ほぼないため、実際にデバッグしてみてみます。

下記のサーバスクリプトを画面表示の前の条件で作成します。

context.Log(JSON.stringify(model.AttachmentsA));

設定が完了したら一覧画面を開いてみます。

画面上はこんなレイアウトになっているとき、下記のようなデータが取得出来ます。

[
	{
		"Guid": "31DE9B93C26342D186646E723D7EB8E1",
		"Name": "log174_2503170830.xlsx",
		"Size": 11904,
		"HashCode": "xjugT/ALXg+G5dcjgs6CTPZ7DAeFDTXnZ8kavI8AQZY="
	},
	{
		"Guid": "84EFA42CCDEB4BF099211D7DA6502ACB",
		"Name": "log174_2503170830.csv",
		"Size": 2634,
		"HashCode": "VJJDZPuajWvcZxHELY8PMXQimVffjWRcP0HN6IVnQWk="
	},
	{
		"Guid": "1578992A86624595A4660793F366C2D3",
		"Name": "log000_2503180830.csv",
		"Size": 802,
		"HashCode": "2lUVoNkhF+IYgrO9XisUukr7rb0uOYs2pGSHeyG3y7M="
	}
]

ファイル名とファイルサイズが取得出来ていることが分かります。

HTML要素を見てみる

一覧画面上のHTML要素を見てみます。

<ol>
    <li>
        <a href="/binaries/31de9b93c26342d186646e723d7eb8e1/download">log174_2503170830.xlsx</a>
    </li>
    <li>
        <a href="/binaries/84efa42ccdeb4bf099211d7da6502acb/download">log174_2503170830.csv</a>
    </li>
    <li>
        <a href="/binaries/1578992a86624595a4660793f366c2d3/download">log000_2503180830.csv</a>
    </li>
</ol>

結構簡単なリストであることが分かります。

サーバスクリプトを作ってみる

modelで取得出来る内容と画面に描画されているHTMLが分かったところで、サーバスクリプトを作ってみます。

if (model.AttachmentsA) {
	var files = JSON.parse(model.AttachmentsA);
	files.sort((a, b) => a.Name > b.Name ? 1 : -1);

	var ol = "";

	files.forEach(file => {
		ol += `<li><a href="/binaries/${file.Guid}/download">${file.Name}</a></li>`
	});

	columns.AttachmentsA.RawText = `<ol>${ol}</ol>`;
}

これを条件「行表示の前」で設定します。

想定通りに並び変わってますね。

添付ファイルA項目を対象にスクリプトを作っていますが、他の添付ファイル項目を並び替えたいときはAttachmentsAの部分を書き換えてください。

まとめ

今回は添付ファイル項目の中身をファイル名で並び替える方法を紹介しました。今回紹介した中ではHTMLをダイレクトに書き換えできるcolumns.{要素}.RawTextがかなり強力な方法になります。いろいろと応用が利くので是非試してみてください。