Adding custom actions to the toolbar in Touch UI | Community
Skip to main content
J
Joel_Triemstra1
Level 3
October 16, 2015
Solved

Adding custom actions to the toolbar in Touch UI

  • October 16, 2015
  • 8 replies
  • 6545 views

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

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 smacdonald2008

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

8 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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_
Kunal_Gaba_
October 16, 2015

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
Lokesh_Shivalingaiah
Level 10
October 16, 2015

what is the JS error you are seeing ?

J
Joel_Triemstra1Author
Level 3
October 16, 2015

@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/download/file.res/User_interface_customization_for_aem6.pdf) 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
smacdonald2008Accepted solution
Level 10
October 16, 2015

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

J
Joel_Triemstra1Author
Level 3
October 16, 2015

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 ->
J
Joel_Triemstra1Author
Level 3
October 16, 2015

@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
vijaym76986902
Level 2
May 27, 2018

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.

Terms & ConditionsAccessibility statement

Loading footer...