Is there a way to create pathbrowser field using javascript (without using cq:dialog)?

[Rucha_Supe]

I could not see an option to create pathbrowser field using javascript with coral UI 3 

Documentation for reference: https://developer.adobe.com/experience-manager/reference-materials/6-4/coral-ui/coralui3/components....

Basically I want to create a field using javascript clientlib in AEM dialog where author can select a path of image from dam.

[Rite18]

@Rucha_Supe  

@Rucha_Supe  did not find as well on the documentation, may be give a try if you get any object using the below 

const pathbrowser = new Coral.PathBrowser();

Documenation : https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/components.... 

[Kamal_Kishor]

@Rucha_Supe: Is there a specific reason to create it with javascript?

I was thinking to have the pathbrowser as a field part of your dialog, you can show or hide it using javascript based on some condition as required.

[EstebanBustamante]

Hi, 

Firstly, the PathBrowser is deprecated, and you should use a PathField instead. Secondly, this is not actually part of CoralUI, but part of Granite, which leverages CoralUI. Therefore, you won't find a direct widget in the CoralUI documentation that you referenced. To achieve what you need, you should manually inspect the HTML output for the PathField and then add the same HTML elements via JavaScript. The same approach applies to the 'coral-dialog' (the overlay) that opens; then you'll need to add a manual JavaScript event to open and close the dialog. As you already noted, this can be challenging to add via JavaScript. That’s why hiding it by default and unhiding it via JavaScript is usually the preferred approach, as it tends to be simpler.

There are various great examples of how to accomplish this, you can check some of them below:  

https://aemhints.com/2020/11/02/show-hide-fields-in-aem-dialog/

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o...

https://sadyrifat.medium.com/show-hide-aem-cq-dialog-fields-based-on-select-field-selection-a-compre...

Hope this helps