Customize AEM Component Console Page

[aemUser2345]

I would like to have a download button in the aem component console so that I can download it as an excel sheet. Here's the component console url: http://localhost:4502/libs/wcm/core/content/sites/components.html

Is this possible? If so, is there any example on where to add the code?

Thanks!

[partyush · Accepted solution]

Hi @aemUser2345 

Yes, it's possible to add a download button to the AEM component console to download the component data as an Excel sheet.

To achieve this, you can add a custom button to the component console toolbar that triggers a JavaScript function. This JavaScript function can fetch the component data from the server and create an Excel sheet from it.

Here's an example code snippet to add a download button to the component console toolbar:

(function() {
    var tb = CQ.Ext.getCmp('cq-siteadmin-quicktools');
    var btn = new CQ.Ext.Button({
        text: 'Download as Excel',
        iconCls: 'cq-siteadmin-tab cq-siteadmin-tab-page',
        handler: function() {
            var compPath = CQ.WCM.getPagePath() + '/jcr:content/' + CQ.WCM.getContentPath();
            var url = '/bin/myapp/downloadExcel.json?path=' + encodeURIComponent(compPath);
            window.open(url, '_blank');
        }
    });
    tb.insert(0, btn);
})();

In this code snippet, we are adding a button to the cq-siteadmin-quicktools toolbar, which is the toolbar at the top of the component console. The button has a text label, an icon, and a click handler that fetches the component data from the server and triggers a download of an Excel sheet.

You'll need to modify the url variable to point to a URL that can fetch the component data and generate an Excel sheet from it. In this example, the URL is /bin/myapp/downloadExcel.json, and the component path is passed as a query parameter.

You'll also need to create a servlet or script at that URL that can fetch the component data and generate an Excel sheet. Here's some example code that uses Apache POI to generate an Excel sheet

@SlingServlet(paths = "/bin/myapp/downloadExcel")
public class DownloadExcelServlet extends SlingSafeMethodsServlet {
    
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        String componentPath = request.getParameter("path");
        Resource componentResource = request.getResourceResolver().getResource(componentPath);
        ValueMap componentProperties = componentResource.adaptTo(ValueMap.class);

        HSSFWorkbook workbook = new HSSFWorkbook();
        HSSFSheet sheet = workbook.createSheet("Component Data");

        int rowNum = 0;
        Row row = sheet.createRow(rowNum++);
        row.createCell(0).setCellValue("Property");
        row.createCell(1).setCellValue("Value");

        for (Map.Entry<String, Object> entry : componentProperties.entrySet()) {
            String propertyName = entry.getKey();
            Object propertyValue = entry.getValue();
            row = sheet.createRow(rowNum++);
            row.createCell(0).setCellValue(propertyName);
            row.createCell(1).setCellValue(propertyValue.toString());
        }

        response.setContentType("application/vnd.ms-excel");
        response.setHeader("Content-Disposition", "attachment; filename=\"component-data.xls\"");
        workbook.write(response.getOutputStream());
    }
}

In this code, we're creating a servlet at /bin/myapp/downloadExcel that fetches the component data from the path parameter, creates an Excel sheet using Apache POI, and writes it to the response as an attachment.

Note that this is just an example implementation, and you'll need to customize it to fit your specific use case.

[aemUser2345]

This is very helpful! Thank you!