AEM Touch UI Path Browser With Preview

Disclaimer : Ideas/Implementions provided in this blog express my personal view. Adobe or Me will not be held responsible for damage caused on your system because of information. Please don't try any suggestion in production system without proper testing. This is not an Adobe supported blog

AEM OOTB provides a path browser widget at /libs/granite/ui/components/coral/foundation/form/pathbrowser (in 6.2) or /libs/granite/ui/components/foundation/form/pathbrowser (in 6.1)

Objective:

Add a preview capability to the OOTB touch ui path browser widget, which will show the preview while we navigate the path browser. If authors create/upload the thumbnail of the pages while they author, they can see the updated thumbnail while using this widget.

Package   Github - Widget | Sample Component  Video

The component looks like:

How It Works:

1. We'll create a clientlibs with the "cq.authoring.dialog" so that those get loaded automatically in the authoring
2. when pathbrowser button () is clicked, we'll listen for the click event and adjust the widths of modal display to accommodate preview as well. We'll add corresponding divs and data attributes to the pathbrowser picker modal.
3. When author clicks on any column item, we'll update the thumbnail using the javascript.

Follow the below steps:

1. Create "cq.authoring.dialog" clientlibs at /apps/aemdevcustomization/widgets/path-browser-preview

• create js.txt in the clientlibs folder with the following content

#base=js
path-browser-preview.js

• create path-browser-preview.js file at /apps/aemdevcustomization/widgets/path-browser-preview/js/path-browser-preview.js with the following content

(function (document, $) {
    var rel_preview_enabled_path_browser = "[data-enable-path-browser-preview='true'] .js-coral-pathbrowser-button";
    var rel_path_browser_item = ".coral-Pathbrowser-picker[data-enable-path-browser-preview=\"true\"] .coral-ColumnView-item";
    var rel_path_browser_preview = ".path-browser-preview";
    var rel_path_browser_preview_image = rel_path_browser_preview + " .path-browser-preview-image";
    var rel_active_item = ".coral-ColumnView-column.is-active .coral-ColumnView-item.is-active";
    var previewUrl;
    $(document).on("click", rel_preview_enabled_path_browser, function (e) {
        var target = $(e.target);
        var pathBrowser = target.closest("[data-enable-path-browser-preview='true']");
        previewUrl = pathBrowser.data("previewUrl") || "$path.thumb.319.319.png";
        if (pathBrowser.length) {
            var $pathBrowser = pathBrowser.data("pathBrowser");
            var $pathBrowserPicker = $pathBrowser.$picker;
            $pathBrowserPicker.attr("data-enable-path-browser-preview", "true");
            var $pickerPanel = $pathBrowserPicker.find(".coral-Pathbrowser-pickerPanel");
            var $pickerColumnView = $pickerPanel.find(".coral-ColumnView");
            $pickerColumnView.css({
                width: "75%"
            });
            var $preview = $("<div class='" + rel_path_browser_preview.substr(1) + "'><div class='path-browser-preview-text'>Preview</div><div class='path-browser-preview-image'></div></div>");
            $preview.css({
                width: "25%",
                height: "100%",
                "border-left": "1px solid black",
                float: "right"
            });
            $pickerPanel.append($preview);
        }
    });
    $(document).on("click", rel_path_browser_item, function (e) {
        var activeItem = $(rel_active_item);
        var path = activeItem.data('value');
        var previewImage = $(rel_path_browser_preview_image);
        previewImage.find("img").remove();
        if (path) {
            var previewThumbnail = previewUrl.replace("$path", path);
            previewImage.append("<img src='" + previewThumbnail + "'>");
        }
    });
})(document, Granite.$);

• create css.txt in the clientlibs folder with the following content

#base=css
path-browser-preview.css

• create path-browser-preview.css file at /apps/aemdevcustomization/widgets/path-browser-preview/css/path-browser-preview.css with the following content

.path-browser-preview-text {
    padding: 0 8rem;
}

Now you can enable preview for the OOTB path browser widget in authoring dialog, with the following example structure:

For AEM 6.2

<pathbrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Path Browser"
    name="./path"
    rootPath="/content">
    <granite:data
        jcr:primaryType="nt:unstructured"
        enable-path-browser-preview="{Boolean}true"
        preview-url="$path.thumb.319.319.png"/>
</pathbrowser>

For AEM 6.1

<pathbrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
    fieldLabel="Path Browser"
    name="./path"
    rootPath="/content">
    <granite:data
        jcr:primaryType="nt:unstructured"
        enable-path-browser-preview="{Boolean}true"
        preview-url="$path.thumb.319.319.png"/>
</pathbrowser>

Widget Configurations:

enable-path-browser-preview="{Boolean}true" - to enable preview on OOTB AEM Path browser widget

preview-url="$path.thumb.319.319.png" - you can give any url where you might have your own servlet. 
 $path will be replaced with the current selection