AEM tool creation | Community
Skip to main content
M
Mahesh_Gunaje
Level 7
February 17, 2024
Solved

AEM tool creation

  • February 17, 2024
  • 2 replies
  • 1728 views

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-granite-ui-for-aem-6-x/m-p/181600#M2531

 

cc @kautuk_sahni 

 

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 AsifChowdhury

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.

2 replies

AsifChowdhury
Community Advisor
AsifChowdhuryCommunity AdvisorAccepted solution
Community Advisor
February 17, 2024

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.

    M
    Mahesh_GunajeAuthor
    Level 7
    February 17, 2024

    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
      Community Advisor
      AsifChowdhuryCommunity Advisor
      Community Advisor
      February 17, 2024

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        February 21, 2024

        @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.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...