AEM Assets Touch UI Customization – Part 2

Support for Customized columns in list view of AEM Assets

Consider a scenario where you want to add new columns to list view in Touch UI using Adobe Experience Manager (AEM Assets – digital asset management platform).  Similar feature is available for AEM sites (https://github.com/Adobe-Marketing-Cloud/aem-sites-extension-listview-columns). Follow the steps below to add custom columns to list view.

  • Overlaying ‘assetsavailablecolumns’ under /apps
    1. Overlay /libs/dam/gui/content/commons/listview/assetsavailablecolumns under /apps
    2. Create a node “custom” of type “nt:unstructured” under /apps/dam/gui/content/commons/listview/assetsavailablecolumns/
    3. Add the following properties  and save
Name Type Value
class String Custom
columnGroup String Other
default Boolean False
show-selector String .label .info .custom
sling:orderBefore String Comments
sling:resourceType String cq/gui/components/siteadmin/admin/pages/headers/deflt
sort-attribute String data-custom
sort-selector String .label .info .custom
sort-type String numeric
title String Custom

 

  • Overlaying ‘childasset’ under /apps
    1. Overlay /libs/dam/gui/components/admin/childasset/ under /apps
    2. Copy childasset.jsp from /libs/dam/gui/components/admin/childasset/childasset.jsp and paste it under /apps/dam/gui/components/admin/childasset/
    3. Open the childasset.jsp at /apps/dam/gui/components/admin/childasset/ and go to line 538
    4. Add the following line of code after line 538 and save the file
      <p class=”custom” data-custom=”<%=asset.getMetadata(“dam:custom”)%>” style=”text-align: center;”><%=asset.getMetadata(“dam:custom”)%></p>
  • See the custom column added in list view
    1. Upload an asset and go to properties
    2. Click on edit and under the basic tab, enter a value in the “custom” text field and save
    3. Switch to list view from the top right toolbar
    4. In the list view, click on the configure columns option under the “List View” switch
      Picture 1
    5. Scroll and check the “custom” option under the “other” section
    6. Refresh the page and now “custom” label can be seen as a column in list view

Picture 2
Caution: Make sure to hit save after every create/update/edit in nodes/properties

Read-on

Here are the other articles in the AEM Assets Touch UI Customizations series:

  • AEM Assets Touch UI Customizations Part 1
  • AEM Assets Touch UI Customizations Part 2 (current)
  • AEM Assets Touch UI Customizations Part 3
0 comments