AEM tool creation

[Mahesh_Gunaje]

Hello everyone,

I was checking some tutorial for creation of AEM tools.  Let me know, if anyone has link to study more about AEM tool.

FYI:  I was referring to this tutorial. But, no luck 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/creating-tool-page-in-gran...

cc @kautuk_sahni 

[AsifChowdhury · Accepted solution]

Hi @Mahesh_Gunaje 

You can have a look if not found yet. I have successfully created a custom tool using this doc.

https://medium.com/@vsr061/create-custom-aem-menu-tools-with-granite-ui-shell-53c56e435f8a

Procedure: 

Step 1: Understanding Sling Resource Merger

1. Introduction to Sling Resource Merger:
   • Learn about the purpose and functionality of Sling Resource Merger in AEM.
2. Overlays:
   • Understand how overlays work, allowing customization without modifying /libs.
3. Overrides:
   • Explore overrides for customizing component dialogs, ensuring compatibility during upgrades.
4. Setting Up Overlays:
   • Create a similar node structure under /apps by overlaying nodes from /libs, specifically focusing on customizing the Tools menu.

Step 2: Exploring Granite UI

1. Introduction to Granite UI:
   • Learn about Granite UI and its advantages for developing AEM interfaces.
2. Project Setup:
   • Set up an AEM multi-module Maven project.
3. Creating Landing Page:
   • Develop a page under /apps/excel-to-json/components/content using Granite UI Shell Page component.
4. Integration of Granite Components:
   • Integrate Granite Server-Side components like FileUpload and PathField for uploading Excel files and selecting storage paths for converted JSON.

Step 3: Implementing Functionality

1. Upload and Conversion:
   • Implement functionality to upload Excel files via a Servlet and convert them to JSON format.
2. Rendering Custom Tools Menu:
   • Add custom nodes under the Tools menu, specifying unique IDs and titles for each item.

Step 4: Finalizing the Landing Page

1. Page Properties:
   • Configure page properties such as head, title, and content for the landing page using Granite UI Shell Page.
2. Client Libraries Integration:
   • Include necessary JavaScript and CSS libraries using the IncludeClientlibs component.
3. Rendering:
   • Test and render the final landing page with the implemented functionalities.

Step 5: Review and Maintenance

1. Testing:
   • Thoroughly test the custom tools and landing page for functionality and compatibility.
2. Maintenance:
   • Ensure easy maintenance and future upgrades by adhering to best practices and avoiding modifications to core AEM files.

I hope it will help you out.

[Mahesh_Gunaje]

Thanks a lot @AsifChowdhury   for your explanation. Let me go through the document.

1 query: If I need more customization, as per my knowledge, instead of Granite UI Shell Page, its better to go ahead with calling the html file???. Then, there display the necessary fields, adding the clientlib.  I heard, html file and the logic here gives more flexibility to AEM developers ?

Thanks

[AsifChowdhury]

Hi @Mahesh_Gunaje 

Yes you are right. It's just a sample. If you integrate a html file instead of shell page you can work just like a component, each of everything you can do with html like a you are working with just a component.

[kautuk_sahni]

@AsifChowdhury Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.