Extending editor.html UI

[BenBr9]

Hi

I want to create an AEM bundle that will extend the default editor.html UI and add a button near to the preview button.

Is it possible to do via a bundle?

[arunpatidar]

Hi @BenBr9 
You need to overlay editor node to add custom button, please check below:

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/operati... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-overlay-customize-t... 

[BenBr9]

Hi

I want to add the button programmatically using an AEM bundle that will do the job. I don't want to manually do anything or configure anything in AEM. I want to create a bundle that once installed, my users will have a new button in the editor UI.

[daniel-strmecki]

Hi @BenBr9,

the solutions Arun shared will enable you to achieve exactly that. You can overlay the OOTB nodes in your custom code and deploy them as part of your AEM package.

Good luck,

Daniel

[BenBr9]

Can you maybe share / point me to some code reference?

I didn't understand what to do from the links above - it seems I need to add nodes manually or do something with CRXDE

[daniel-strmecki]

Hi @BenBr9,

any customization you do in the CRX/de can be exported with Package Manager (build -> download) and then added to your project codebase. You just need to set up the filters correctly and then your code will replace the definitions in the JCR database. These are the basics of AEM, maybe check some video tutorials on YouTube or Udemy in case you haven't used this approach before.

Good luck,

Daniel

[arunpatidar]

Hi @BenBr9 
The Manuals changes are just for local, once you are fine with overlay, just package it extract in your codebase inside ui.apps module and update the filters.

Example package with overlay : https://github.com/arunpatidar02/demo/blob/master/view-as-published-2.zip 

[BenBr9]

The link leads to 404

[arunpatidar]

Hi @BenBr9 

Here it is : https://github.com/arunpatidar02/aem63app-repo/blob/master/view-as-published-2.zip 

[BenBr9]

I downloaded the file but cannot unzip it - it says this is an unsupported format

Am I missing something?

[arunpatidar]

Hi @BenBr9 
You need to use terminal/CLI to unzip the package.

[BenBr9]

Which CLI? Some AEM tool I'm missing?

[arunpatidar]

Hi @BenBr9 
You can use System provides archive utilities, you don't need nay external tool, for example if you are using MAC then use unzip command from terminal

[BenBr9]

Ok. I took the package content and put it in my ui.apps and build it. I installed the bundle in AEM, but I don't see any changes in the actions menu of the editor UI.

Maybe my folder structure is incorrect? Maybe I should change something / adjust paths etc?

[arunpatidar]

Hi @BenBr9 
This was the sample package, it will not work. you can to overlay node from CRXDE and create a package like what I shared and put in your code.

The package I have shared was for https://medium.com/@arunpatidar26/custom-button-in-aem-sites-console-94cf36cbed0c 

[kautuk_sahni]

@BenBr9 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[BenBr9]

Unfortunately, I couldn't create the overlay as explained. I'm not sure what to do else, but I'm still looking into it.