How do I add a custom button in the AEM toolbar? | Community
Skip to main content
vigiaemnewbie
vigiaemnewbie
Level 2
December 21, 2018
Solved

How do I add a custom button in the AEM toolbar?

  • December 21, 2018
  • 7 replies
  • 7488 views

I need to add two custom buttons along with the "Edit" and "Preview" buttons on the AEM toolbar at the top. One button will push the content to a preview environment and one button will push the content to the production environment after the approval of an authorized member.

    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 arunpatidar

    You may need to overlay /libs/wcm/core/content/editor/jcr:content/content/items/content/header/items/headerbar/items

    and add two new node of resourceType granite/ui/components/coral/foundation/button

    I never tried this but you can check existing flow in order to make it work properly

    7 replies

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    December 21, 2018

    You may need to overlay /libs/wcm/core/content/editor/jcr:content/content/items/content/header/items/headerbar/items

    and add two new node of resourceType granite/ui/components/coral/foundation/button

    I never tried this but you can check existing flow in order to make it work properly

    Arun Patidar
      smacdonald2008
      smacdonald2008
      Level 10
      December 21, 2018

      this write up will help you too -- Experiencing Adobe Experience Manager - Day CQ: AEM 62 - Add Start Workflow Select to Assets Console Action Bar

      vigiaemnewbie
      vigiaemnewbieAuthor
      Level 2
      December 24, 2018

      Thanks Arun,

      I was able to overlay the buttons and add my own two buttons for preview build and production build. I need to trigger a workflow when I click these buttons. I have copied the "Preview" button node and modified according to my needs but it seems this node is using the below properties to trigger the preview mode during authoring. How can I trigger my workflow from this node, i.e., when the author clicks on these respective buttons on the authoring screen?

      Node properties:

      How the buttons appear on the authoring page:

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      December 24, 2018

      Hi,

      On click of those buttons you can invoke servlet using ajax call which will trigger the workflows.

      you can return response as well to show details in Alert  like Documentation | CoralUI

      Arun Patidar
      vigiaemnewbie
      vigiaemnewbieAuthor
      Level 2
      December 24, 2018

      But where do I put my script that makes the call? I am not able to find where AEM is triggering actions for the already existing buttons on the page, although it is clear that the "granite:class" property is populating the class attribute when the AEM user interface is rendered in authoring and AEM is using these classes to identify when it is clicked to trigger the preview or edit mode, but where are these scripts and how can I add my ajax call under /apps/?

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      December 24, 2018

      Hi,

      You need to create clientlibs with category of 'cq.authoring.editor' there you can call servlet based on onclick.

      You can give any unique class(granite:class) or id(granite:id) and based on that you can register Javascript on click event for those two buttons.

      Arun Patidar
      vigiaemnewbie
      vigiaemnewbieAuthor
      Level 2
      December 27, 2018

      Thanks Arun,

      Assigned a granite:id to each of my buttons and triggered an ajax call on click.

      Terms & ConditionsAccessibility statement

      Loading footer...