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

Objective

Each view mode in the Adobe Experience Manager AEM Assets console displays a set of metadata based on the metadata schema associated with the assets.

However, you can display custom metadata in the List, Column, and Card view layouts by configuring existing metadata fields or adding fields using the Metadata Schema editor. The following sections describe how to extend the various layouts to render custom metadata.

Add custom metadata to assets

To add custom metadata prod:brandName, first register the namespace prod. Perform these steps to register the namespace prod:

  1. Navigate to the CRX explorer http://localhost:4502/crx/explorer, and log in with administrator credentials.
  2. Browse to the namespace editor page http://localhost:4502/crx/explorer/ui/namespace_editor.jsp
  3. Click New.
  4. In the URI box, add the namespace URI http://brand.com/retail/production.1
  5. Click Ok.
  6. Enter prod in the prefix textbox.1a
  7. Click Ok.
  8. Click Ok to close the conformation dialog.1b
  9. Click Apply to save the changes.

Perform these steps to add the custom metadata field prod:brandName using the metadata editor:

  1. From the Assets console, go to Tools > Assets > Metadata Schemas.
  2. Select the default form, and click Edit
  3. Drag the Single Line Text field to the form layout design area.
  4. Select the text field, and enter the values.
  5. Specify Brand as the value for Field Label.
  6. Specify ./jcr:content/metadata/prod:brandName as the value of Map to property.2
  7. Click Done to save the form.
  8. From the Assets console, select the asset(s), and click View Properties. The metadata editor is displayed for the selected asset(s).
  9. Specify a value in the custom metadata field, and save the form.3

Display custom metadata in Assets List View

  1. Navigate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Overlay 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 following properties to the node:5
  5. Overlay /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 following statement at line number 60 (before the displayLanguage row):

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

  1. Right-click the node /apps/dam/gui/coral/components/admin/contentrenderer/row/asset, and select Create > Create File.
  2. Add jsp with the following content:

<%@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 metadataPath = resource.getPath() + “/jcr:content/metadata/”;

    Resource metadataRes = resourceResolver.getResource(metadataPath);

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

%>

<td is=”coral-td” value=”<%= brandName %>”><%= brandName %></td>7

  1. Go to the Assets console, and select the List View The custom metadata field Brand is displayed between the Title and Locale columns.8

Display custom metadata in Column View

  1. Navigate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Overlay 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 following statement at line number 132 (before Modified check):

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

Note: Ensure that you use the closing expression %> appropriately within the scriptlet.9

  1. Include the prefix cq in the header section 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 Create > Create File.
  2. Add the file jsp with the following content:

<%@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 contentPath = slingRequest.getRequestPathInfo().getSuffix();       

    String metadataPath = contentPath + “/jcr:content/metadata/”;

    Resource metadataRes = resourceResolver.getResource(metadataPath);

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

%>

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

<coral-columnview-preview-value><%= xssAPI.encodeForHTML(brandName) %></coral-columnview-preview-value>10

  1. Go to the Assets console, and select Column View
  2. The custom metadata field Brand is displayed when the asset is selected.11

 

Display custom metadata in Card View

  1. Navigate to CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  2. Overlay 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 following statement at line number 46 (before the first property list document):

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

Note: Ensure that you use the opening (<%) and closing (%>) expressions appropriately within the scriptlet.12

  1. Right-click the node /apps/dam/gui/coral/components/admin/contentrenderer/card/asset, and select Create > Create File.
  2. Add the file jsp with the following content:

<%@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 contentPath = slingRequest.getRequestPathInfo().getSuffix();       

    String metadataPath = resource.getPath() + “/jcr:content/metadata/”;

    Resource metadataRes = resourceResolver.getResource(metadataPath);

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

%>

<coral-card-propertylist>

    <coral-card-property title=”Brand”><%= xssAPI.encodeForHTML(brandName) %></coral-card-property>

</coral-card-propertylist> 13

  1. From the Assets console, and select the Card View The custom metadata field Brand is displayed on the asset’s card.14

Note: The option Overlay Node is available on the toolbar at CRX DE Lite to overlay the node structure under /apps. It is enabled when the node is selected. Ensure you choose /apps as an Overlay Location and enable the Match Node Types option.

0 comments