AEM 6.5 open help in new tab

[tushaar_srivastava]

Hi Team,
I have to add a new field in the help section and open that filed in new window  which is like

For that, I can simply overlay the

 /libs/granite/ui/content/shell/help/items/home to /apps/granite/ui/content/shell/help/items/home and provide the custom fields

But the problem is all the icons under help open in same window, but I want the custom button to open in a new window,
How can I do that?

Thanks

@kautuk_sahni  @arunpatidar  @lukasz-m  @VeenaVikraman 

[narendiran_ravi · Accepted solution]

Hi @tushaar_srivastava ,

You need to add the target arrtibute in this file - /libs/granite/ui/components/shell/help/item/item.jsp

attrs.add("target","_blank");

if you want this to be dynamic and configurable for each help options, then add a property called target in each help items like below and read the same in the above JSP attrs.add("target",cfg.get("target", String.class)); instead of hardcoding

After adding this, you need to allow this attribute in the allowed list -/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/xss/xss.js as all HTML response is sanitized for XSS protection.

ADD_ATTR: [
                "coral-close", "tracking", "trackingelement", "trackingfeature", "variant", "is",
                "form", "fieldtrackingidentifier", "trackingWidget", "coral-wizardview-next",
                "coral-wizardview-previous", "iconposition", "iconsize", "icon", "iconautoarialabel", "block",
                "sticky", "labelledby","target"
            ]

You need to overlay all these libs path under your apps before adding these custom changes

[Shiv_Prakash_Patel]

Hi @tushaar_srivastava ,

Please check the similar thread below

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-authoring-new-tab-... 

Regards,

[konstantyn_diachenko]

Hi @tushaar_srivastava, @narendiran_ravi 

Actually, there is more easy and extendable solution without touching/overlaying JSP.

Step 1: Overlay node with help items 
Example:

Node: /apps/granite/ui/content/shell/help/items/test

Properties:

• href_i18n: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ct-p/adobe-experience-mana... 
• icon: globe
• sling:resourceType: granite/ui/components/shell/help/item
• text: AEM Community

Node: /apps/granite/ui/content/shell/help/items/test/granite:data

Properties:

• target: _blank

Step 2: Create clientlib with extension

categories: granite.ui.shell

extension.js

(function(document, $) {
    "use strict";
    $(document).on('foundation-toggleable-show', function(event) {
    	$(event.target).find('.granite-shell-help ._coral-Shell-help-item').each(function(index, helpItem) {
        	const $helpItem = $(helpItem);
        	if ($helpItem.data('target')) {
            	$helpItem.attr('target', $helpItem.data('target'));
        	}
    	});  
    }) 
})(document, Granite.$);

Best regards,

Kostiantyn Diachenko.