Adding custom actions to the toolbar in Touch UI

[Joel_Triemstra1]

I have a few components that were created for CQ 5.4 and use custom actions in the editbar. As we migrate to AEM 6.1, I'd like to support these in both Classic UI and Touch UI. I found this demo https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-toolbar-screenshot that I've tried implementing, but it looks like that adds the action to all components - I only want it on certain ones. Additionally, I'd prefer not to define my handler directly on a node in the repository - having to ensure valid XML in my code would be pretty challenging. I found this example http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touch-ui-open-component-dialog.html, but I'm getting JS errors when I try to use it or adapt it.

Is this somethign that's possible, and are there examples out there for it?

Thanks

[smacdonald2008]

Yes - you can modify the Touch UI. See this article and the corresponding GEMS session. See:

Extending AEM 6 Administrator User Interface

The link to the GEMS session is in a note near the end of the Introduction. 

[Kunal_Gaba_]

In the example code, update the open.js content as given below and your JS error will be fixed- 

(function ($, author) { "use strict"; if (typeof window.ExperienceAEM == "undefined") { window.ExperienceAEM = {}; } ExperienceAEM.open = open; function open(editable, param, target){ var dialog = new Granite.author.edit.Dialog({ config: { dialogLoadingMode: "auto", dialogLayout: "floating", dialogSrc: editable.config.dialogSrc }}); author.DialogFrame.openDialog(dialog); } })($, Granite.author);

[Lokesh_Shivalingaiah]

what is the JS error you are seeing ?

[Joel_Triemstra1]

@bsloki, I think I got two different errors - I'm trying to repro the second yet, but the first was when I tried to just keep the actionConfig node in place, as shown in the slides linked to by smacdonald2008 (http://dev.day.com/content/ddc/en/gems/user-interface-customization-for-aem-6/_jcr_content/par/downl...) with

handler=function(){My.Namespace.functionName();}

Where My.Namespace.functionName is defined in an existing clientlib file, I was getting "My.Namespace is undefined".

[smacdonald2008 · Accepted solution]

Did you try downloading the sample content here:

Download the sample AEM package that modifies the AEM administrator page. You can download this sample package from the AEM public Github repository located at the following URL:

https://github.com/Adobe-Marketing-Cloud/aem-admin-extension-customize-sites

[Joel_Triemstra1]

It looks like my problem with the approach at http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touch-ui-open-component-dialog.html was that I missed there was a special clientlib name that needs to be used. I was trying to use an arbitrary name, and then use cq:includeClientLib in my component JSP. When I switched the categories attribute of my custom action to cq.authoring.dialog, it worked.

If it helps anyone who might be Googling, the other JS error I got was

Handler of component is invalid ->

@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js line 1435 > eval:1:2 sanitizeCqHandler@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:1435:23 ns.Editable.prototype.updateConfig/<@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:1667:34 .each@http://localhost:4502/etc/clientlibs/granite/jquery.js:384:14 ns.Editable.prototype.updateConfig@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:1657:13 ns.Editable@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:1508:9 ns.edit.createEditable@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:15945:16 ns.edit.findEditables/<@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:15957:28 .each@http://localhost:4502/etc/clientlibs/granite/jquery.js:384:14 jQuery.prototype.each@http://localhost:4502/etc/clientlibs/granite/jquery.js:136:10 ns.edit.findEditables@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:15956:10 ns.edit.Layer.prototype.setUp@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:16496:22 ns.Layer.prototype.activate@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:15890:9 ns.layerManager</self.activateLayer@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:15776:17 ns.page</</<@http://localhost:4502/libs/cq/gui/components/authoring/clientlibs/editor.js:5589:1 jQuery.Callbacks/fire@http://localhost:4502/etc/clientlibs/granite/jquery.js:3143:10 jQuery.Callbacks/self.fireWith@http://localhost:4502/etc/clientlibs/granite/jquery.js:3255:7 done@http://localhost:4502/etc/clientlibs/granite/jquery.js:9309:5 .send/callback@http://localhost:4502/etc/clientlibs/granite/jquery.js:9713:8

[Joel_Triemstra1]

@smacdonald2008, I'm not seeing anything in that "admin extension" github that looks like it addresses what I'm trying to do. Nothing there seems to be attached to a specific component - am I missing it?

I think I have a POC working. The steps I took are

1) Create a clientlib and configure the actionConfigs as described in solution 1 here (http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touch-ui-open-component-dialog.html), but the clientlib must be part of two categories - cq.authoring.dialog to support the TouchUI, and an arbitrary custom category (joel.author) to support the Classic UI

2) The JS for the custom action needs to distinguish between Classic UI and Touch UI

3) The JSP needs to include the arbitrary custom clientlib category (joel.author) if the page is loaded in Classic UI. The JSP may include the arbitrary custom clientlib category if the page is loaded in Touch UI, but isn't required to. The JSP must not include the cq.authoring.dialog clientlib - the AEM authoring interface takes care of that.

Does that all sound right? Thanks

[vijaym76986902]

Is there any example for customizing sites action bar in touch UI?Like copy the page in sites actionbar need to add custom button in sites actionbar.