プリザンターのパンくずリストにちょっと機能追加

はじめに

プリザンターの編集画面から前画面に戻るルートで、コマンドボタンの「戻る」を使う方法とパンくずリストのリンクから戻る方法の2つがあります。
「戻る」を使う方法はHistory Backなので、カンバンからの遷移ならカンバンに、カレンダーからの遷移ならカレンダーにと元の表示モードに戻ります。パンくずリストは常に一覧画面に遷移します。
今回は、パンくずリストを拡張して任意の表示モードに遷移できるようにする方法を紹介します。

そもそも・・・

実は編集画面から任意の表示モードに遷移する方法は既にあります。ナビゲーションメニューの表示から遷移する方法です。ただしこの方法、ナビゲーションメニューを開いてから表示メニューを開くと2クッション挟まるため直感的に操作ができません。また、リンク系の遷移はパンくずリストに集約されているのに別の場所から操作をする必要がありUXの観点からもあまりよろしくありません。今回はUXの改善が主目的です。

実装してみた

サーバスクリプトとスタイルでサクッとコードを書いてみました。拡張サーバスクリプト、拡張スタイルとして使えるようにしています。

ExtendedServerScrits/BreadcrumbViewMode.json

{
    "BeforeOpeningPage": true,
    "BeforeOpeningRow": true,
    "Body": "-- Write an arbitrary javascript."
}

ExtendedServerScrits/BreadcrumbViewMode.json.js

{
(function() {
	var navItems = [{
	    action: "Index",
	    icon: "view_list"
	}, {
	    action: "Calendar",
	    icon: "calendar_month"
	}, {
	    action: "Crosstab",
	    icon: "table"
	}, {
	    action: "Gantt",
	    icon: "view_timeline"
	}, {
	    action: "BurnDown",
	    icon: "timeline"
	}, {
	    action: "TimeSeries",
	    icon: "area_chart"
	}, {
	    action: "Analy",
	    icon: "clock_loader_40"
	}, {
	    action: "Kamban",
	    icon: "pivot_table_chart"
	}, {
	    action: "ImageLib",
	    icon: "photo_library"
	}];

	navItems.forEach(navItem => {
	    var content = `<a href="${context.ApplicationPath}items/${context.SiteId}/${navItem.action.toLowerCase()}" id="BreadcrumbMenu_${navItem.action}"><span class="material-symbols-outlined">${navItem.icon}</span></a>`;
	    var target = `:root:not(:has(#Action[value="${navItem.action.toLowerCase()}"])):has(#ViewModelMenu_${navItem.action}) #Breadcrumb:not(:has(#BreadcrumbMenu_${navItem.action})) .item:last-child`;

	    context.AddResponse('Append', target, content);
	});
}());

ExtendedStyles/BreadcrumbViewMode.css

#Breadcrumb .item:last-child a:not(:first-child){
  padding:0 5px;
}

これをプリザンターに設定するとこのように表示されます。パンくずリストに表示モードを切替出来るリンクが追加されています。

編集画面以外の表示モードでも表示されます。

アイコンについてはGoogle Material Symbols and Iconsを使用しています。直感的に分かりやすいアイコンをセレクトしていますが、他に良いアイコンがあればnavItems.iconを書き換えてください。

現状では、編集がメイン以外の画面では、カンバン画面ではカンバン画面のアイコンを表示されないといったように、今と同じ画面モードへ遷移するアイコンは表示されないようにしていますが、ナビゲーションメニューの挙動と合わせて有効な表示モードは常に表示させる場合は、下記の様にコードを変更すると表示されるようになります。

-var target = `:root:not(:has(#Action[value="${navItem.action.toLowerCase()}"])):has(#ViewModelMenu_${navItem.action}) #Breadcrumb:not(:has(#BreadcrumbMenu_${navItem.action})) .item:last-child`;
+var target = `:root:has(#ViewModelMenu_${navItem.action}) #Breadcrumb:not(:has(#BreadcrumbMenu_${navItem.action})) .item:last-child`;

また、表示を編集画面のみに限定したい場合は、設定のjsonを下記の様に変更すると編集画面のみに表示されるようになります。

ExtendServerScrits/BreadcrumbViewMode.json

{
+   "Actions": ["edit"],
    "BeforeOpeningPage": true,
    "BeforeOpeningRow": true,
    "Body": "-- Write an arbitrary javascript."
}

まとめ

今回は編集画面から遷移する時に表示モードを選びやすくする方法を紹介してみました。リンクの追加だけというちょっとした機能の追加ですが、デフォルトの表示モードを一覧以外にしている場合は操作の手数が減るので大量のデータを編集している場合などでかなり効率的な作業が出来るようになります。ぜひため