Want to add a button to pathfield, what's the best approach? | Community
Skip to main content
I
IshaJa
Level 2
May 16, 2024
Solved

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

  • May 16, 2024
  • 1 reply
  • 1061 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by sarav_prakash

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-autocomplete-picker.html

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

https://experience-aem.blogspot.com/2016/06/aem-62-classic-ui-extend-pathfield-browse-dialog-show-node-name-not-dctitle-jcrtitle.html

 

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. 

1 reply

sarav_prakash
Community Advisor
sarav_prakashCommunity Advisor
Community Advisor
May 16, 2024

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.html?m=1

 

I
IshaJaAuthor
Level 2
May 17, 2024

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
Community Advisor
sarav_prakashCommunity AdvisorAccepted solution
Community Advisor
May 17, 2024

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-autocomplete-picker.html

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

https://experience-aem.blogspot.com/2016/06/aem-62-classic-ui-extend-pathfield-browse-dialog-show-node-name-not-dctitle-jcrtitle.html

 

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. 

Terms & ConditionsAccessibility statement

Loading footer...