Adding a page action in 6.1 | Community

Solved

Adding a page action in 6.1

Forum|Forum|10 years ago
October 16, 2015
4 replies
1392 views

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?

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 BenSt10

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.

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.

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.

Hi Guys,

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

Cheers,

Alex

BenSt10AuthorAccepted solution

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.