Search code examples
overlayaemapache-felixaem-6

AEM column overlay classic UI - column list is changed

I was following the tutorial on how to customize AEM Console by adding a new column in classic UI. Everything works and I can see the new column displaying the data. Only one thing is bothering me:

Before the overlay, the OOTB column list is this one:

enter image description here

After the overlay:

enter image description here

Any idea how can I retain the OOTB list of columns?

Solution

  • The OOTB list of columns are driven from SiteAdmin.js in /libs/cq/ui/widgets/source/widgets/wcm

    Override this file under apps to add your custom column whilst retaining the other OOTB ones -

    • Copy SiteAdmin.js from /libs/cq/ui/widgets/source/widgets/wcm to /apps/cq/ui/widgets/source/widgets/wcm. The folders are of jcr:primaryType - nt:folder.

    enter image description here

    • Edit this file. Line 173 on my version(AEM 6.2 - shouldn't matter as this is to do with classic UI) lists the columns that are rendered. Add your custom column to the list. e.g. 

                  "columns": [
                CQ.wcm.SiteAdmin.COLUMNS["numberer"],
                CQ.wcm.SiteAdmin.COLUMNS["thumbnail"],
                CQ.wcm.SiteAdmin.COLUMNS["title"],
                CQ.wcm.SiteAdmin.COLUMNS["name"],
                CQ.wcm.SiteAdmin.COLUMNS["published"],
                CQ.wcm.SiteAdmin.COLUMNS["modified"],
                CQ.wcm.SiteAdmin.COLUMNS["scene7Status"],
                CQ.wcm.SiteAdmin.COLUMNS["status"],
                CQ.wcm.SiteAdmin.COLUMNS["impressions"],
                CQ.wcm.SiteAdmin.COLUMNS["template"],
                CQ.wcm.SiteAdmin.COLUMNS["workflow"],
                CQ.wcm.SiteAdmin.COLUMNS["locked"],
                CQ.wcm.SiteAdmin.COLUMNS["liveCopyStatus"],
                CQ.wcm.SiteAdmin.COLUMNS["starred"]
           ],

    • You should now define the logic for this new column ('starred'). Line number 2006 onwards (search for CQ.wcm.SiteAdmin.COLUMNS = {) in the same file, you'll find the logic for each of the columns listed in the previous point. Add logic for the custom column.

      "mime": { "header":CQ.I18n.getMessage("Kind"), "id":"mime", "hidden":true, "dataIndex":"mime" }, "starred": { "header":CQ.I18n.getMessage("Starred"), "id":"starred", "dataIndex":"starred", "hidden":true, "renderer": function(val, meta, rec) { console.log("Rec " + rec) return rec.json.starred; } }

    • rec.json.starred value is computed in the StarredListInfoProvider.java file from the tutorial linked in your question.

    • Save and you should see the OOTB columns along with your custom one.

    enter image description here

    • So from the tutorial, you just skip the overlay bit (Displaying the New Column section on the page) and use the override method mentioned above to retain all the OOTB columns.

    Additional Info

    • The third point i.e. logic for the custom column, I have added only hidden: true for now to make the column hidden by default and only be visible when you check it. There are several other public methods available in CQ.Ext.grid.ColumnModel that you can use to configure this further. Refer the Widgets API doc for more info.

    • The tutorial describes computing the custom column value on the server side, you can achieve this on the javascript front as well. You'll have to register a javascript file in a clientlib and make sure the categories value of the clientlib matches the categories value of the library file. In the case of SiteAdmin.js it is cq.widgets, so your custom clientlib should also have the same categories value.

    • When you override the file, at least on my machine I did not see the changes immediately, I had to delete the cached clientlibs under /var/clientlibs before I could see the changes. Use console.log, debugger or the usual chrome debugger to further understand logic behind this file.

    • Using a tool like FileVault to get these changes onto your filesystem and add it to version control so that it propagates to rest of the environments through build pipeline, got to add an entry in filter.xml under META-INF\vault for the overridden folder to get picked up by maven.

    • Overriding is usually not recommended as you might lose out on updates when Adobe releases a new version, but in this case SiteAdmin.js is specific to Classic UI and Adobe has stopped supporting Classic UI for good and in fact looking at removing Classic UI from 2019 release onwards. So I don't see any harm in overriding for this use case.