AEM Assets Touch UI Customization – Part 2

Support for Customized columns in list view of AEM Assets

Con­sid­er a sce­nario where you want to add new columns to list view in Touch UI using Adobe Expe­ri­ence Man­ag­er (AEM Assets – dig­i­tal asset man­age­ment plat­form).  Sim­i­lar fea­ture is avail­able for AEM sites (https://​github​.com/​A​d​o​b​e​-​M​a​r​k​e​t​i​n​g​-​C​l​o​u​d​/​a​e​m​-​s​i​t​e​s​-​e​x​t​e​n​s​i​o​n​-​l​i​s​t​v​i​e​w​-​c​o​l​u​mns). Fol­low the steps below to add cus­tom columns to list view.

  • Over­lay­ing ‘asset­savail­ablecolumns’ under /apps
    1. Over­lay /libs/dam/gui/content/commons/listview/assetsavailablecolumns under /apps
    2. Cre­ate a node “cus­tom” of type “nt:unstructured” under /apps/dam/gui/content/commons/listview/assetsavailablecolumns/
    3. Add the fol­low­ing prop­er­ties  and save
Name Type Val­ue
class String Cus­tom
colum­n­Group String Oth­er
default Boolean False
show-selec­tor String .label .info .cus­tom
sling:orderBefore String Com­ments
sling:resourceType String cq/gui/components/siteadmin/admin/pages/headers/deflt
sort-attribute String data-cus­tom
sort-selec­tor String .label .info .cus­tom
sort-type String numer­ic
title String Cus­tom

 

  • Over­lay­ing ‘childas­set’ under /apps
    1. Over­lay /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 fol­low­ing 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 cus­tom col­umn added in list view
    1. Upload an asset and go to prop­er­ties
    2. Click on edit and under the basic tab, enter a val­ue in the “cus­tom” text field and save
    3. Switch to list view from the top right tool­bar
    4. In the list view, click on the con­fig­ure columns option under the “List View” switch
      Picture 1
    5. Scroll and check the “cus­tom” option under the “oth­er” sec­tion
    6. Refresh the page and now “cus­tom” label can be seen as a col­umn in list view

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

Read-on

Here are the oth­er arti­cles in the AEM Assets Touch UI Cus­tomiza­tions series:

  • AEM Assets Touch UI Cus­tomiza­tions Part 1
  • AEM Assets Touch UI Cus­tomiza­tions Part 2 (cur­rent)
  • AEM Assets Touch UI Cus­tomiza­tions Part 3
0 comments