Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Adding a page action in 6.1

Avatar

Level 5

I have 2 actions that I need to add to editor.html. I have all the backend functionality working, but need to add a button to the page UI to allow users to edit pages. I followed this tutorial to add a button to the ui: https://docs.adobe.com/docs/en/aem/6-1/develop/extending/customizing-page-authoring-touch.html (Add a New Page Action) but it doesn't seem to work. Is there another way to add elements to the touch ui?

1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi Alex,

In another related thread, Gilles reported that adding elements to the dropdown didn't work for 6.1 and would be added in 6.2.

He also said that the demonstration for adding elements to the headerbar is currently not working. Unfortunetly, there doesn't seem to be a fix out for it yet.

My solution has been to add a clientlib with the category: "cq.authoring.editor.hook" (a la the "back to sites" example at the bottom of this page here). Then i programmatically with javascript add buttons to the header, for example:

var trashbutton = $("<a>"); trashbutton.attr("href","#pageaction-trashpage") trashbutton.addClass("coral-Link") trashbutton.addClass("editor-GlobalBar-item"); trashbutton.attr("id","trashtrigger"); trashbutton.attr("title","trashpage"); trashbutton.attr("data-iconsize","S"); trashbutton.attr("data-align-from","right"); trashbutton.attr("data-toggle","right"); trashbutton.attr("data-within","right"); trashbutton.attr("data-align","left"); trashbutton.attr("data-minimal","true"); trashbutton.attr("data-point-from","bottom"); var tbi = $("<i>"); tbi.addClass("coral-Icon"); tbi.addClass("coral-Icon--delete"); tbi.addClass("coral-Icon--sizeS"); $(".editor-GlobalBar-leftContainer").append(trashbutton); $(document).on("click","#trashtrigger", function() { var path = Granite.author.ContentFrame.currentLocation(); var ajaxpath = path.substr(0, path.indexOf(".html")) + ".trash"; $.ajax({ type: "POST", url: ajaxpath, success: function(msg) { console.log(msg); //refresh the page jQuery(Granite.author.ContentFrame.getDocument()).find("#trashnote").show(200); $("#trashtrigger").hide(); $("#untrashtrigger").show(); } }); });

This runs a servlet request to [path/to/page].trash which marks it as trash (a piece of custom functionality), but you can do any number of things with the native js apis.

View solution in original post

4 Replies

Avatar

Level 10

See this AEM community article:

Extending AEM 6 Administrator User Interface

Also - watch the GEMS session that you can access from the above article - it talks about this subject in detail. 

Avatar

Level 5

Thanks, this project actually required the creation of a few different admin screens, which was pretty straightforward, but I also would like to add actions to the page editing ui itself (on /editor.html/path/to/content.html).

The only solution i can think of is to use a js clientlib to inject buttons into the editor, as the demo I linked to in the original post doesn't seem to work.

Avatar

Level 2

Hi Guys,

 

none of the examples work on 6.1 for me. Have the steps to add a custom element changed?

 

Cheers,

Alex

Avatar

Correct answer by
Level 5

Hi Alex,

In another related thread, Gilles reported that adding elements to the dropdown didn't work for 6.1 and would be added in 6.2.

He also said that the demonstration for adding elements to the headerbar is currently not working. Unfortunetly, there doesn't seem to be a fix out for it yet.

My solution has been to add a clientlib with the category: "cq.authoring.editor.hook" (a la the "back to sites" example at the bottom of this page here). Then i programmatically with javascript add buttons to the header, for example:

var trashbutton = $("<a>"); trashbutton.attr("href","#pageaction-trashpage") trashbutton.addClass("coral-Link") trashbutton.addClass("editor-GlobalBar-item"); trashbutton.attr("id","trashtrigger"); trashbutton.attr("title","trashpage"); trashbutton.attr("data-iconsize","S"); trashbutton.attr("data-align-from","right"); trashbutton.attr("data-toggle","right"); trashbutton.attr("data-within","right"); trashbutton.attr("data-align","left"); trashbutton.attr("data-minimal","true"); trashbutton.attr("data-point-from","bottom"); var tbi = $("<i>"); tbi.addClass("coral-Icon"); tbi.addClass("coral-Icon--delete"); tbi.addClass("coral-Icon--sizeS"); $(".editor-GlobalBar-leftContainer").append(trashbutton); $(document).on("click","#trashtrigger", function() { var path = Granite.author.ContentFrame.currentLocation(); var ajaxpath = path.substr(0, path.indexOf(".html")) + ".trash"; $.ajax({ type: "POST", url: ajaxpath, success: function(msg) { console.log(msg); //refresh the page jQuery(Granite.author.ContentFrame.getDocument()).find("#trashnote").show(200); $("#trashtrigger").hide(); $("#untrashtrigger").show(); } }); });

This runs a servlet request to [path/to/page].trash which marks it as trash (a piece of custom functionality), but you can do any number of things with the native js apis.