Extend Asset List, Column, and Card view (for AEM 6.2)

Objective

Each view mode in the Adobe Expe­ri­ence Man­ag­er AEM Assets con­sole dis­plays a set of meta­da­ta based on the meta­da­ta schema asso­ci­at­ed with the assets.

How­ev­er, you can dis­play cus­tom meta­da­ta in the List, Col­umn, and Card view lay­outs by con­fig­ur­ing exist­ing meta­da­ta fields or adding fields using the Meta­da­ta Schema edi­tor. The fol­low­ing sec­tions describe how to extend the var­i­ous lay­outs to ren­der cus­tom meta­da­ta.

Add custom metadata to assets

To add cus­tom meta­da­ta prod:brandName, first reg­is­ter the name­space prod. Per­form these steps to reg­is­ter the name­space prod:

  1. Nav­i­gate to the CRX explor­er http://localhost:4502/crx/explorer, and log in with admin­is­tra­tor cre­den­tials.
  2. Browse to the name­space edi­tor page http://localhost:4502/crx/explorer/ui/namespace_editor.jsp
  3. Click New.
  4. In the URI box, add the name­space URI http://​brand​.com/​r​e​t​a​i​l​/​p​r​o​d​u​c​t​ion.1
  5. Click Ok.
  6. Enter prod in the pre­fix textbox.1a
  7. Click Ok.
  8. Click Ok to close the con­for­ma­tion dia­log.1b
  9. Click Apply to save the changes.

Per­form these steps to add the cus­tom meta­da­ta field prod:brandName using the meta­da­ta edi­tor:

  1. From the Assets con­sole, go to Tools > Assets > Meta­da­ta Schemas.
  2. Select the default form, and click Edit
  3. Drag the Sin­gle Line Text field to the form lay­out design area.
  4. Select the text field, and enter the val­ues.
  5. Spec­i­fy Brand as the val­ue for Field Label.
  6. Spec­i­fy ./jcr:content/metadata/prod:brandName as the val­ue of Map to prop­er­ty.2
  7. Click Done to save the form.
  8. From the Assets con­sole, select the asset(s), and click View Prop­er­ties. The meta­da­ta edi­tor is dis­played for the select­ed asset(s).
  9. Spec­i­fy a val­ue in the cus­tom meta­da­ta field, and save the form.3

Display custom metadata in Assets List View

  1. Nav­i­gate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Over­lay the node /libs/dam/gui/content/commons/availablecolumns under apps.
  3. Add a node with the name brand and type nt:unstructured.4
  4. Add the fol­low­ing prop­er­ties to the node:5
  5. Over­lay /libs/dam/gui/coral/components/admin/contentrenderer/row/asset under apps.
  6. Copy the file jsp from /libs/dam/gui/coral/components/admin/contentrenderer/row/ to /apps/dam/gui/coral/components/admin/contentrenderer/row/asset.
  7. Edit the file jsp copied under /apps, and include custom.jsp by adding the fol­low­ing state­ment at line num­ber 60 (before the dis­play­Lan­guage row):

<cq:include script = “custom.jsp”/>6

  1. Right-click the node /apps/dam/gui/coral/components/admin/contentrenderer/row/asset, and select Cre­ate > Cre­ate File.
  2. Add jsp with the fol­low­ing con­tent:

<%@page session=“false”%><%

 %><%@page import=”

            org.apache.sling.api.resource.Resource,

            org.apache.sling.api.resource.ResourceResolver,

        org.apache.sling.api.resource.ResourceUtil”%><%

%><%@taglib prefix=“sling” uri=“http://sling.apache.org/taglibs/sling/1.0”%><%

%><%@taglib prefix=“cq” uri=“http://www.day.com/taglibs/cq/1.0”%><%

%><%@taglib prefix=“ui” uri=“http://www.adobe.com/taglibs/granite/ui/1.0”%><%

%><cq:defineObjects /><%

    String meta­data­Path = resource.getPath() + “/jcr:content/metadata/”;

    Resource meta­dataRes = resourceResolver.getResource(metadataPath);

      String brand­Name = ResourceUtil.getValueMap(metadataRes).get(“prod:brandName”, “”);

%>

<td is=“coral-td” val­ue=”<%= brand­Name %>”><%= brand­Name %></td>7

  1. Go to the Assets con­sole, and select the List View The cus­tom meta­da­ta field Brand is dis­played between the Title and Locale columns.8

Display custom metadata in Column View

  1. Nav­i­gate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Over­lay the node /libs/dam/gui/coral/components/admin/contentrenderer/column/columnpreview under apps.
  3. Copy jsp from /libs/dam/gui/coral/components/admin/contentrenderer/column/columnpreview to /apps/dam/gui/coral/components/admin/contentrenderer/column/columnpreview.
  4. Edit the file jsp under /apps, and include custom.jsp by adding fol­low­ing state­ment at line num­ber 132 (before Mod­i­fied check):

<cq:include script = “custom.jsp”/>

Note: Ensure that you use the clos­ing expres­sion %> appro­pri­ate­ly with­in the script­let.9

  1. Include the pre­fix cq in the head­er sec­tion of jsp:

<%@taglib prefix=“cq” uri=“http://www.day.com/taglibs/cq/1.0”%>

  1. Right-click the node /apps/dam/gui/coral/components/admin/contentrenderer/column/columnpreview, and select Cre­ate > Cre­ate File.
  2. Add the file jsp with the fol­low­ing con­tent:

<%@page session=“false”%><%

 %><%@page import=”

            org.apache.sling.api.resource.Resource,

            org.apache.sling.api.resource.ResourceResolver,

        org.apache.sling.api.resource.ResourceUtil”%><%

%><%@taglib prefix=“sling” uri=“http://sling.apache.org/taglibs/sling/1.0”%><%

%><%@taglib prefix=“cq” uri=“http://www.day.com/taglibs/cq/1.0”%><%

%><%@taglib prefix=“ui” uri=“http://www.adobe.com/taglibs/granite/ui/1.0”%><%

%><cq:defineObjects /><%

    String con­tent­Path = slingRequest.getRequestPathInfo().getSuffix();       

    String meta­data­Path = con­tent­Path + “/jcr:content/metadata/”;

    Resource meta­dataRes = resourceResolver.getResource(metadataPath);

      String brand­Name = ResourceUtil.getValueMap(metadataRes).get(“prod:brandName”, “”);

%>

<coral-columnView-preview-label>Brand</coral-columnView-preview-label>

<coral-colum­n­view-pre­view-val­ue><%= xssAPI.encodeForHTML(brandName) %></co­ral-colum­n­view-pre­view-val­ue>10

  1. Go to the Assets con­sole, and select Col­umn View
  2. The cus­tom meta­da­ta field Brand is dis­played when the asset is select­ed.11

 

Display custom metadata in Card View

  1. Nav­i­gate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Over­lay the node /libs/dam/gui/coral/components/admin/contentrenderer/card/asset under apps.
  3. Copy jsp from /libs/dam/gui/coral/components/admin/contentrenderer/card/asset to /apps/dam/gui/coral/components/admin/contentrenderer/card/asset.
  4. Edit jsp under /apps, and include custom.jsp by adding fol­low­ing state­ment at line num­ber 46 (before the first prop­er­ty list doc­u­ment):

<cq:include script = “custom.jsp”/>

Note: Ensure that you use the open­ing (<%) and clos­ing (%>) expres­sions appro­pri­ate­ly with­in the script­let.12

  1. Right-click the node /apps/dam/gui/coral/components/admin/contentrenderer/card/asset, and select Cre­ate > Cre­ate File.
  2. Add the file jsp with the fol­low­ing con­tent:

<%@page session=“false”%><%

 %><%@page import=”

            org.apache.sling.api.resource.Resource,

            org.apache.sling.api.resource.ResourceResolver,

        org.apache.sling.api.resource.ResourceUtil”%><%

%><%@taglib prefix=“sling” uri=“http://sling.apache.org/taglibs/sling/1.0”%><%

%><%@taglib prefix=“cq” uri=“http://www.day.com/taglibs/cq/1.0”%><%

%><%@taglib prefix=“ui” uri=“http://www.adobe.com/taglibs/granite/ui/1.0”%><%

%><cq:defineObjects /><%

    String con­tent­Path = slingRequest.getRequestPathInfo().getSuffix();       

    String meta­data­Path = resource.getPath() + “/jcr:content/metadata/”;

    Resource meta­dataRes = resourceResolver.getResource(metadataPath);

      String brand­Name = ResourceUtil.getValueMap(metadataRes).get(“prod:brandName”, “”);

%>

<coral-card-prop­ertylist>

    <coral-card-prop­er­ty title=“Brand”><%= xssAPI.encodeForHTML(brandName) %></co­ral-card-prop­er­ty>

</co­ral-card-prop­ertylist> 13

  1. From the Assets con­sole, and select the Card View The cus­tom meta­da­ta field Brand is dis­played on the asset’s card.14

Note: The option Over­lay Node is avail­able on the tool­bar at CRX DE Lite to over­lay the node struc­ture under /apps. It is enabled when the node is select­ed. Ensure you choose /apps as an Over­lay Loca­tion and enable the Match Node Types option.

0 comments