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

はじめに

前回紹介したパンくずリストの拡張ですが、編集画面から前回開いていた表示モードにそのまま戻りたいケースもあるかもという声をいただきましたので、ちょっと拡張してみました。

実装してみた

前回の拡張サーバスクリプトをちょっと拡張します。設定のJSONや拡張スタイルには変更はありません。

(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"
    }];
    
    if (context.Action === "edit" && context.UrlReferrer) {
        var protocol = "https";//実環境に合わせた情報を入力
        var host = "<Host Name or IP Address>";//実環境に合わせた情報を入力
        var rootPath = `${protocol}://${host}${context.ApplicationPath}`;
        if (context.UrlReferrer.startsWith(rootPath)) {
            var path = context.UrlReferrer.replace(rootPath, "").split("?")[0].split("/");
            if (path.length === 3) {
                if (path[0] === "items" && path[1] === `${context.SiteId}` && navItems.map((x) => x.action.toLowerCase()).includes(path[2])) {
                    var content = `<a href="${context.ApplicationPath}items/${context.SiteId}/${path[2]}" id="BreadcrumbMenu_HistoryBack"><span class="material-symbols-outlined">arrow_back</span></a>`;
                    var target = `:root:has(#Action[value="edit"]) #Breadcrumb:not(:has(#BreadcrumbMenu_HistoryBack)) .item:last-child`;
                    context.AddResponse('Append', target, content);
                }
            }
        }
    }

    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);
    });
}());

編集画面の場合は、context.UrlReferrerから前回表示していたページのURLを取得し、それがプリザンターのURLでなおかつ編集画面でない時はURLを組み立ててリンクを生成します。

これを実際に表示してみるとこうなります。

一番左の右矢印が同じ表示モードに戻るアイコンになります。
外部サイトからの遷移や編集画面などの表示モードを持たないページからの遷移の場合は、このように矢印は表示されません。

まとめ

今回は、パンくずリストをさらに拡張する方法を紹介しました。前回表示モードにそのまま戻りたいときには便利に使えるモードなので是非試してみてください。