Add dynamic pathfield(rootPath) for cq5 component

Question

How can we add a dynamic pathfield(rootPath) for a cq5 component?

Are there any example references?

Answer 1

I think you should use custom widget plugin. First, add property plugins to your pathfield in the dialog.xml:

<myPathComponent
    jcr:primaryType="cq:Widget"
    fieldLabel="My path component"
    plugins="customRootPathPlugin"
    xtype="pathfield" />

Then create custom ExtJS plugin. In order to do that, create new JS file, and add it to clientlib with cq.wcm.edit category. Plugin can look like that:

(function($) {
    var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
        init: function(widget) {
            var locale = "en";

            // create some JS logic to get the locale here
            // current path can be obtained via
            // widget.findParentByType('dialog').responseScope.path
            widget.treeRoot.name = "content/myproject/" + locale + "/mycomponent";
        }
    });

    CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);
}($CQ));

Answer 2

To expand on Tomek's answer, I was able to get the current page and then display all the siblings and children with this:

(function($) {
var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
    init : function(widget) {
        var url = CQ.HTTP.getPath();
        widget.treeRoot.name = url.substring(1, url.lastIndexOf('/') );
    }
});
CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);}($CQ));

The reason I did url.substring(1 instead of url.substring(0 is because I would end up with double forward slash //content/app/en/ in the dialog.