Want to add a button to pathfield, what's the best approach?

[IshaJa]

We have many components using granite/ui/components/coral/foundation/form/pathfield, and I want to add a button to this pathfield. I found the code for the existing button is in /libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/autocomplete/autocomplete.js

I could create an overlay and add the button in this file, but it seems like overkill for a few lines of code (autocomplete.js is around 1000 lines). Is there a better way to do this?

[sarav_prakash]

No overlays are only for component nodes, not for clientlibs. Instead you create a new clientlib with categories granite.ui.coral.foundation and authoring. Follow this blog as example and implement your clientlib js accordingly

https://experience-aem.blogspot.com/2019/01/aem-6420-add-custom-search-filters-in-pathfield-picker.h...

[IshaJa]

I have a question regarding this. If I follow this method, wouldn't I need to change every component that uses granite/ui/components/coral/foundation/form/pathfield to use the custom pathfield instead?

I am hesitant against this is because it would require updating thousands of our components.

[sarav_prakash · Accepted solution]

No, you are NOT duplicating by overlaying. Instead running an additional new clientlib on top of existing ootb autocomplete.js. So browser first runs autocomplete.js and then runs your custom override clientlib. This ll apply to ALL components, wouldn't require additional changes to individual component.

Sreekanth from the https://experience-aem.blogspot.com/ provides an excellent compilation of many similar customizations. 

https://experience-aem.blogspot.com/2019/05/aem-65-touch-ui-filter-column-view-items-in-pathfield-au...

https://experience-aem.blogspot.com/2019/01/aem-6420-add-custom-search-filters-in-pathfield-picker.h...

https://experience-aem.blogspot.com/2016/06/aem-62-classic-ui-extend-pathfield-browse-dialog-show-no...

Magic starts from 

$document.on('dialog-ready', handlePathField);

 And on the handlePathField callback, you force your customizations. Start with a simple console.log inside the callback to understand when this clientlib is invoked. And you can add more customizations over. 

[IshaJa]

Thank you so much, that helps a lot!