How to add extra button in pathbrowser or path field in dialog

[naruk89179065]

How to add extra button open Url in new tab in Touch UI dialog, Is there any References

@arunpatidar  @Jennifer_Dungan  @alexbishop 

yuhuisg

    @

aanchal-sikka

[Kamal_Kishor]

@naruk89179065 : You can add one more dialog field of type checkbox to specify if page URL should be opened in a new tab.

In HTL file of your component, you have to add 'target' attribute with value '_blank' based on the field value of checkbox field.

for eg:

<a href="<page-url>" target="_blank">Link Text</a>

You can refer these links for reference:

https://gist.github.com/nateyolles/e5eed811dc9c35961c23

https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/

[arunpatidar]

HI @naruk89179065 
Instead of modifying the OOTB path type, you can add additional field(dropdown) with all the possible link target value.

https://github.com/arunpatidar02/com.aemlab.junitapp/blob/master/ui.apps/src/main/content/jcr_root/a...

https://github.com/arunpatidar02/com.aemlab.junitapp/blob/master/ui.apps/src/main/content/jcr_root/a... 

[aanchal-sikka]

Hello @naruk89179065 

The WCM core button component has an option

Please refer to https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... 

[naruk89179065]

thanks @aanchal-sikka  @arunpatidar @Kamal_Kishor 
I am looking for in touch ui dialog level when click Linkbutton/Edit  its should open new tab particular authored URL.
EX: When drag and drop image its enabled Edit option and click edit option its redirect to dam image root path

[arunpatidar · Accepted solution]

Hi @naruk89179065 
I tested same with image core component in AEMaaCS SDK, it opens in the new tab OOTB.

Below is the code for the button.

You have to follow the same logic, 

1. Add a button in a dialog : https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...
2. Write clientlibs, to read the pathfield and open a new tab with page/assets, example page edit path (http://localhost:4502/editor.html/content/aemlab/oneweb/reference-content/image.html)

[naruk89179065]

thanks @arunpatidar 

[Santhosh_Talepalle]

Its really helpful, i have been facing this issue in my local quite a long time. Thank you.