Smartphone

Goal

Touch UI Path Browser widget (/libs/granite/ui/components/foundation/form/pathbrowser) shows dc:title metadata for files and jcr:title for folders, in the picker; this post is on extending the widget to always show node name in picker

Dialog of foundation image component - /libs/foundation/components/image/cq:dialog/content/items/column/items/linkURL was modified for demo purposes only

For Classic UI check this post

Demo | Package Install


Product - Path Browser Auto Complete



Product - Path Browser Picker



Extension - Path Browser Picker

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-touchui-pathbrowser-picker-show-filename

2) Create node /apps/eaem-touchui-pathbrowser-picker-show-filename/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies to underscore

3) Create file (nt:file) /apps/eaem-touchui-pathbrowser-picker-show-filename/clientlib/js.txt and add

                       show-file-name.js

4) Create file (nt:file) /apps/eaem-touchui-pathbrowser-picker-show-filename/clientlib/show-file-name.js and add the following code

(function ($, $document, gAuthor) {
 var LINK_URL = "./linkURL",
 COMPONENT = "foundation/components/image";

 if(!gAuthor){
 return;
 }

 $document.on(dialog-ready, handlePathBrowser);

 function handlePathBrowser(){
 var $linkUrl = $("[name=" + LINK_URL + "]"),
 editable = gAuthor.DialogFrame.currentDialog.editable;

 //if not an image component dialog, return
 if((editable.type !== COMPONENT) || _.isEmpty($linkUrl)){
 return;
 }

 var cuiPathBrowser = $linkUrl.closest(".coral-PathBrowser").data("pathBrowser");

 if(!cuiPathBrowser){
 return;
 }

 //handle picker columns
 extendPicker(cuiPathBrowser);
 }

 //extend picker to disable columns
 function extendPicker(cuiPathBrowser){
 var cuiPicker = cuiPathBrowser.$picker.data("picker");

 cuiPathBrowser.$button.on("click", function() {
 setTimeout(function(){
 if(!cuiPicker.columnView){
 console.log("EAEM - could not initialize column view");
 return;
 }

 extendColumnView(cuiPicker.columnView);
 }, 200);
 });
 }

 function extendColumnView(columnView){
 function handler(event){
 var $element = event && event.currentTarget ? $(event.currentTarget) : columnView.$element,
 $items = $element.find(".coral-ColumnView-item"),
 $item, dataValue;

 $items.each(function(index, item){
 $item = $(item);

 dataValue = $item.data("value");

 if(_.isEmpty(dataValue)){
 return;
 }

 $item.find(".coral-ColumnView-label").html(getStringAfterLastSlash(dataValue));
 });
 }

 handler();

 columnView.$element.on(coral-columnview-load, handler);

 columnView.$element.on(coral-columnview-item-select, function(){
 // event coral-columnview-item-select is triggered before selected column load
 // hope the data gets loaded in 1000 msecs
 setTimeout(handler, 1000);
 });
 }

 function getStringAfterLastSlash(str){
 if(!str || (str.indexOf("/") == -1)){
 return "";
 }

 return str.substr(str.lastIndexOf("/") + 1);
 }
}(jQuery, jQuery(document), Granite.author));