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:
Access AEM Author Instance:
- Log in to your AEM author instance.
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.
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.
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:
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: 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:
@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:
<!-- /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.
