The Asset Share page is used to search for assets based on their metadata. You can customize the search, search results, and what actions users can take.
- Geometrixx Sample Page: /content/geometrixx/en/press.html
- Sample Template: /apps/geometrixx/templates/assetshare
- Sample Page Component: /apps/geometrixx/components/assetshare
Adobe Experience Manager (AEM) Assets components use an extension of the WCM edit clientlib. The clientlibs are usually loaded in init.jsp.
Compared to the default clientlib loading (in core's init.jsp), an AEM Assets template must have the following:
- The template must include the cq.dam.edit clientlib (instead of cq.wcm.edit).
- The clientlib must also be included in disabled WCM mode (for example, loaded on publish) to be able to render the predicates, actions, and lenses.
In most cases, copying the existing sample init.jsp (/apps/geometrixx/components/assetshare/init.jsp) should meet these needs.
Some of the AEM Assets components use the AEM widgets library. To be rendered properly in the content context, an additional style sheet has to be loaded. The tag action component requires one more.
<link href="/etc/designs/geometrixx/ui.widgets.css" rel="stylesheet" type="text/css">
The sample page components require all selectors to start with .assetshare of static.css (/etc/designs/geometrixx/static.css). Best practice: Copy all .assetshare selectors to your style sheet and adjust the rules as desired.
The Geometrixx sample page includes the default AEM Assets query builder component (/libs/dam/components/assetshare/querybuilder) with two columns (in /apps/geometrixx/components/assetshare/body.jsp):
- left column for predicates and actions
- right column for the lens deck that displays the current lens
- top bar with search field, paging, and lens switcher
To achieve one of the following, you have to create (and include) your own component:
- different layout
- different default values for the Query Builder, for example, limit (It is possible to set the values available in the Query Builder Properties dialog box. The default values are only applied as long as no values have been set.)
The best practice is to copy the existing component to your project folder in /apps and adjust it.
AEM Assets comes with a set of predefined actions that can be used to customize an Asset Share page. Customizing an Asset Share in this way is covered in Creating and Configuring an Asset Share Page.
In addition to using pre-existing actions, AEM developers can also create their own actions.
Creating custom actions requires basic knowledge about the Widgets framework.
The best practice is to copy an existing action and adjust it. Sample actions are located in /libs/cq/dam/assetshare/components/actions. See also Developing components.
-
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" jcr:title="Image Formats" sling:resourceSuperType="foundation/components/parbase" allowedParents="[*/parsys]" componentGroup="Asset Share"/>
-
<%-- Sample action component --%><%@include file="/libs/foundation/global.jsp"%> <script type="text/javascript"> // Note: Functions should be defined in a global script block. The script inside // the component will be loaded in every paragraph that uses this component. // alert the title and path of the selected assets. function alertSelectedAssets() { var selection = CQ.search.Util.getSelection(); if (selection.length == 0) { CQ.dam.Util.alertNoSelection(); return; } var msg = ""; for (var i = 0; i < selection.length; i++) { msg += "Title: " + selection[i]["jcr:content"]["metadata"]["dc:title"] + "\n"; msg += "Path: " + selection[i]["jcr:path"] + "\n\n"; } alert(msg); } </script> <a href="javascript:alertSelectedAssets();">Sample Action</a>