Custom Xtype For Pathfield BrowseDialog

Sometimes the xtypes provided by AEM doesn’t fulfill our requirements. So we need to design our custom xtypes on regular basis.


While working with xtype pathfield, I stumbled upon a use case/problem. I wanted a pathfield so that  I can choose the product under /etc/commerce/products/accunity/en_us/products hierarchy by a productName property.

Note: Generally, pathfield can show the nodes by its name or jcr:title.

Steps I followed:

  1. I created a widget of xtype:pathfield
  2. If I opened my  dialog, I could select any values under /content.
  3. So needed to set rootPath in the widget.
  4. The nodes under products are of type nt:unstructured. By default, pathfield doesn’t allow this types of nodes in the tree hierarchy.
  5. So added a property predicate: nosystem

Now the pathfield looked like this:

But still, it is a very tedious task for the author to select a particular product. I wanted pathfield to show the productName in place of node-name. So I decided to write custom xtype.

But how?

The first question here is how this tree structure shows up here:

So while debugging my dialog, I found, it calls currentPath.ext.json and shows the “name”property of  JSON in the tree hierarchy. 

So next step for me was to change this servlet.

The Next Question was from where this servlet is getting called.

The answer is browserDialog widget. Inside pathfield widget, it is calling browserDialog to show this tree structure.

Note: Go to browseDialog.js

Change this part:

Here is the updated browseDialog.js

We can’t make this change in the /libs section. So, I made my own xtype as productPathfield and add a custom browseDialog in pathfield.js with this modification.

Note: xtype pathfield doesn’t fulfill my requirements so needed to change it with productPathfield.

After all the changes, we can see our desired results here:

Please leave your precious comments of what you think about this approach. Happy to learn better solution for the same problem.