Enable commenting for reviewers on AEM pages | Community
Skip to main content
J
Jangra98
Level 2
June 5, 2024

Enable commenting for reviewers on AEM pages

  • June 5, 2024
  • 3 replies
  • 1217 views

Hi everyone,
We have a requirement where a Content Owner / Reviewer is given the authoring URL, they should have the option to turn on annotations, enter a comment, save it and view others annotations.

We had the old forum links which speaks of this, but they are inaccessible now.

https://forums.adobe.com/thread/2325941

https://forums.adobe.com/thread/2325941#10931831

 

If anyone has any suggestions for this, please do share.
Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

HrishikeshKagne
Community Advisor
HrishikeshKagneCommunity Advisor
Community Advisor
June 6, 2024

Hi @jangra98 ,

To enable commenting and annotations for reviewers on AEM pages, you can leverage AEM's built-in annotation feature or develop a custom solution. Here's a detailed guide on how to achieve this using both approaches:

1. Using AEM Built-in Annotations

AEM provides built-in support for annotations which can be used to comment on pages. Here’s how you can enable and use this feature:

Step-by-Step Guide:

  1. Access AEM Author Instance:

    • Log in to your AEM author instance.

  2. Enable Annotations in Page Editor:

    • Open the page you want to review in the AEM Page Editor.
    • In the top toolbar, you should see an "Annotations" button (it looks like a pencil or speech bubble icon). Click on it to enable annotations.

  3. Add Comments:

    • With annotations enabled, click anywhere on the page where you want to add a comment.
    • A comment box will appear. Enter your comment and save it.
    • Other users with access to the page can view and respond to the annotations.

  4. View and Manage Annotations:

    • You can view all annotations on the page by clicking on the "Annotations" button.
    • To manage annotations, click on each annotation to edit or delete them.

2. Custom Annotation Solution

If you need more advanced features or a custom commenting solution, you might need to develop a custom component. Here’s a high-level approach to creating a custom annotation feature:

Step-by-Step Guide:

  1. Create a Custom Component for Annotations:

    • Define the Component: Create a new component in AEM for annotations, for example, /apps/your-project/components/annotations.

    • Component Dialog: Define a dialog for the component where users can enter their comments.

    • Component Script: Create the HTL (HTML Template Language) script to render the component on the page.

 

<!-- /apps/your-project/components/annotations/annotations.html --> <div class="annotation-component"> <h3>Annotations</h3> <div id="annotations-list"> <!-- Annotations will be dynamically loaded here --> </div> <textarea id="new-annotation" placeholder="Enter your comment"></textarea> <button id="save-annotation">Save Comment</button> </div>

 

Client-Side Javascript&colon; Add JavaScript to handle adding, displaying, and saving comments.

 

// /apps/your-project/components/annotations/clientlibs/js/annotations.js document.getElementById('save-annotation').addEventListener('click', function() { const comment = document.getElementById('new-annotation').value; if (comment) { // Save the comment to the server saveAnnotation(comment); } }); function saveAnnotation(comment) { // Implement AJAX call to save the comment to a JCR node or another storage // Example: POST request to a custom Sling servlet } function loadAnnotations() { // Implement AJAX call to load comments from the server // Example: GET request to a custom Sling servlet } // Load existing annotations when the page loads loadAnnotations();

 

Create a Custom Sling Servlet:

  • Servlet to Handle CRUD Operations: Create a Sling servlet to handle saving, retrieving, and managing comments.

 

@Component(service = Servlet.class, property = { Constants.SERVICE_DESCRIPTION + "=Annotation Servlet", "sling.servlet.methods=" + HttpConstants.METHOD_POST, "sling.servlet.paths=" + "/bin/annotations" }) public class AnnotationServlet extends SlingAllMethodsServlet { @Reference private ResourceResolverFactory resourceResolverFactory; @Override protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException { // Implement logic to save annotation } @Override protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException { // Implement logic to get annotations } }

 

 

Save Annotations in JCR: Save the annotations in the JCR repository under a specific path.

 

@Override protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException { String comment = request.getParameter("comment"); // Save the comment under a specific path in the JCR ResourceResolver resolver = request.getResourceResolver(); Session session = resolver.adaptTo(Session.class); try { Node rootNode = session.getNode("/content/annotations"); Node commentNode = rootNode.addNode(UUID.randomUUID().toString(), "nt:unstructured"); commentNode.setProperty("comment", comment); session.save(); response.getWriter().write("Comment saved"); } catch (RepositoryException e) { response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); } } @Override protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException { // Retrieve and return comments }

 

Register the Component and ClientLibs:

  • ClientLibs Configuration: Configure client libraries to include your JavaScript and CSS files.

 

<!-- /apps/your-project/components/annotations/clientlibs/.content.xml --> <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="[annotations]"> <js> <fileName>annotations.js</fileName> </js> <css> <fileName>annotations.css</fileName> </css> </jcr:root>

 

Include the Annotation Component on Pages:

  • Add the annotation component to the pages where reviewers need to comment

 

<!-- Include the annotation component --> <cq:include path="annotations" resourceType="your-project/components/annotations"/> ​

 


By using AEM's built-in annotations or developing a custom solution, you can enable content owners and reviewers to comment on AEM pages. The built-in feature is straightforward to use and sufficient for basic needs, while a custom solution offers greater flexibility and control over the functionality. Choose the approach that best fits your requirements.

Hrishikesh Kagane
kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
June 10, 2024

@jangra98 Did you find the suggestions from users 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!

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...