Professional Documents
Culture Documents
Customizing and Extending CQ DAM
Customizing and Extending CQ DAM
Adobe (www.adobe.comhttp://www.adobe.com/go/gnav_adobe_logo_en_us)
Products (www.adobe.comhttp://www.adobe.com/go/gnav_products_en_us) Solutions (www.adobe.comhttp://www.adobe.com/go/gnav_solutions_en_us) Learning
(www.adobe.comhttp://www.adobe.com/go/gnav_learning_en_us) Help (www.adobe.comhttp://www.adobe.com/go/gnav_help_en_us) Downloads
(www.adobe.comhttp://www.adobe.com/go/gnav_downloads_en_us) Company (www.adobe.comhttp://www.adobe.com/go/gnav_company_en_us)
Store (www.adobe.comhttp://www.adobe.com/go/gnav_store_en_us)
Adobe Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_en_us) for home and home ofce
Education Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_education_en_us) for students, educators, and staff
Business Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_business_en_us) for small and medium businesses
Other ways to buy (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_otherwaystobuy_en_us)
Conguring Clientlib
DAM 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), a DAM 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.
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
1/8
4/5/2016
<linkhref="/etc/designs/geometrixx/ui.widgets.css"rel="stylesheet"type="text/css"
Code samples are intended for illustration purposes only.
Query Builder
The Geometrixx sample page includes the default DAM 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 eld, paging, and lens switcher
To achieve one of the following, you have to create (and include) your own component:
dierent layout
dierent 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.
Customizing Search
CQ DAM comes with a set of predened predicates that can be used to customize an Asset Share page. Customizing
an Asset Share in this way is covered in Creating and Conguring an Asset Share Page
(www.adobe.com/docs/en/cq/5-6-1/dam/creating_and_conguringdamnderandasseteditorpages.html#par_title) .
In addition to using pre-existing predicates, CQ developers can also create their own predicates using the Query
Builder API (www.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam/query_builder.html) .
<?xmlversion="1.0"encoding="UTF8"?>
<jcr:rootxmlns:sling="http://sling.apache.org/jcr/sling/1.0(www.adobe.comhttp://sling.apache.org/jcr/sling/1.0)
jcr:primaryType="cq:Component"
jcr:title="TitlePredicate"
sling:resourceSuperType="foundation/components/parbase"
allowedParents="[*/parsys]"
componentGroup="Search"/>
Code samples are intended for illustration purposes only.
3. Add titlepredicate.jsp.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%
Sampletitlepredicatecomponent
%><%@pageimport="java.util.Calendar"%><%
%><%@includefile="/libs/foundation/global.jsp"%><%
StringelemId="cqpredicate"+Long.toString(Calendar.getInstance().getTimeInMillis())
%><divclass="predicatebox">
<divclass="title">Title</div>
<%Thewrapperfortheformelements.Allitemswillbeappendtothiswrapper.
<divid="<%=elemId%>"class="content"></div>
</div><scripttype="text/javascript">
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
2/8
4/5/2016
CQ.Ext.onLoad(function(){
varpredicateName="property"
varpropertyName="jcr:content/metadata/dc:title"
varelemId="<%=elemId%>"
//GetthepagewideavailableQueryBuilder.
varqb=CQ.search.Util.getQueryBuilder()
//createIdaddsacountertothepredicatenameusefulincasethispredicate
//isinsertedmultipletimesonthesamepage.
varid=qb.createId(predicateName)
//Hiddenfieldthatdefinesthepropertytosearchforinourcasethis
//isthe"dc:title"metadata.Thename"property"(or"1_property","2_property"etc.)
//indicatestheservertousethepropertypredicate
//(com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
qb.addField({
"xtype":"hidden",
"renderTo":elemId,
"name":id,
"value":propertyName
})
//Thevisibletextfield.Thenamehastobeliketheoneofthehiddenfieldabove
//plusthe".value"suffix.
qb.addField({
"xtype":"textfield",
"renderTo":elemId,
"name":id+".value"
})
//Dependingonthepredicateadditionalparametersallowtoconfigurethe
//predicate.Hereweaddanoperationparametertocreatea"like"query.
//Againnotethenamesettotheidandasuffix.
qb.addField({
"xtype":"hidden",
"renderTo":elemId,
"name":id+".operation",
"value":"like"
})
})
</script>
Code samples are intended for illustration purposes only.
4. To make the component available, you need to be able to edit it. To make a component editable, in CRXDE, add
a node cq:editCong of primary type cq:EditCong. So that you can remove paragraphs, add a multi-value
property cq:actions with a single value of DELETE.
5. Navigate to your browser, and on your sample page (for example, press.html) switch to design mode and enable
your new component for the predicate paragraph system (for example, left).
6. In Edit mode, the new component is now available in the sidekick (found in the Search group). Insert the
component in the Predicates column and type a search word, for example, Diamond and click the magnifying
glass to start the search.
NOTE
When searching, be sure to type in the term exactly, including the correct case.
<?xmlversion="1.0"encoding="UTF8"?>
<jcr:rootxmlns:sling="http://sling.apache.org/jcr/sling/1.0(www.adobe.comhttp://sling.apache.org/jcr/sling/1.0)
jcr:primaryType="cq:Component"
jcr:title="ImageFormats"
sling:resourceSuperType="foundation/components/parbase"
allowedParents="[*/parsys]"
componentGroup="Search"/>
Code samples are intended for illustration purposes only.
3. Add titlepredicate.jsp:
1
2
3
4
5
6
<%
Samplegrouppredicatecomponent
%><%@pageimport="java.util.Calendar"%><%
%><%@includefile="/libs/foundation/global.jsp"%><%
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
3/8
4/5/2016
%><%@includefile="/libs/foundation/global.jsp"%><%
StringelemId="cqpredicate"+Long.toString(Calendar.getInstance().getTimeInMillis())
%><divclass="predicatebox">
<divclass="title">ImageFormats</div>
<%Thewrapperfortheformelements.Allitemswillbeappendtothiswrapper.
<divid="<%=elemId%>"class="content"></div>
</div><scripttype="text/javascript">
CQ.Ext.onLoad(function(){
varpredicateName="property"
varpropertyName="jcr:content/metadata/dc:format"
varelemId="<%=elemId%>"
//GetthepagewideavailableQueryBuilder.
varqb=CQ.search.Util.getQueryBuilder()
//CreateauniquegroupIDwillreturne.g."1_group".
vargroupId=qb.createGroupId()
//Hiddenfieldthatdefinesthepropertytosearchforinourcase"dc:format"
//anddeclaresthegroupofpredicates."property"inthename("1_group.property")
//indicatestotheservertousethe"propertypredicate"
//(com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
qb.addField({
"xtype":"hidden",
"renderTo":"<%=elemId%>",
"name":groupId+"."+predicateName,//1_group.property
"value":propertyName
})
//DeclaretocombinethemultiplevaluesusingOR.
qb.add(newCQ.Ext.form.Hidden({
"name":groupId+".p.or",//1_group.p.or
"value":"true"
}))
//Theoptions
varoptions=[
{"label":"JPEG","value":"image/jpeg"},
{"label":"PNG","value":"image/png"},
{"label":"GIF","value":"image/gif"}
]
//Buildacheckboxforeachoption.
for(vari=0i<options.lengthi++){
qb.addField({
"xtype":"checkbox",
"renderTo":"<%=elemId%>",
//1_group.property.0_value,1_group.property.1_valueetc.
"name":groupId+"."+predicateName+"."+i+"_value",
"inputValue":options[i].value,
"boxLabel":options[i].label,
"listeners":{
"check":function(){
//Submitthesearchformwhenchecking/uncheckingacheckbox.
qb.submit()
}
}
})
}
})
Code samples are intended for illustration purposes only.
4. To make the component available, you need to be able to edit it. To make a component editable, in CRXDE, add
a node cq:editCong of primary type cq:EditCong. So that you can remove paragraphs, add a multi-value
property cq:actions with a single value of DELETE.
5. Navigate to your browser, and on your sample page (for example, press.html) switch to design mode and enable
your new component for the predicate paragraph system (for example, left).
6. In Edit mode, the new component is now available in the sidekick (found in the Search group). Insert the
component in the Predicates column.
Customizing Actions
CQ DAM comes with a set of predened actions that can be used to customize an Asset Share page. Customizing an
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
4/8
4/5/2016
<?xmlversion="1.0"encoding="UTF8"?>
<jcr:rootxmlns:sling="http://sling.apache.org/jcr/sling/1.0(www.adobe.comhttp://sling.apache.org/jcr/sling/1.0)
jcr:primaryType="cq:Component"
jcr:title="ImageFormats"
sling:resourceSuperType="foundation/components/parbase"
allowedParents="[*/parsys]"
componentGroup="AssetShare"/>
Code samples are intended for illustration purposes only.
3. Add sampleaction.jsp:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%
Sampleactioncomponent
%><%@includefile="/libs/foundation/global.jsp"%>
<scripttype="text/javascript">
//Note:Functionsshouldbedefinedinaglobalscriptblock.Thescriptinside
//thecomponentwillbeloadedineveryparagraphthatusesthiscomponent.
//alertthetitleandpathoftheselectedassets.
functionalertSelectedAssets(){
varselection=CQ.search.Util.getSelection()
if(selection.length==0){
CQ.dam.Util.alertNoSelection()
return
}
varmsg=""
for(vari=0i<selection.lengthi++){
msg+="Title:"+selection[i]["jcr:content"]["metadata"]["dc:title"]+"\n"
msg+="Path:"+selection[i]["jcr:path"]+"\n\n"
}
alert(msg)
}
</script>
<ahref="javascript:alertSelectedAssets()">SampleAction</a>
Code samples are intended for illustration purposes only.
4. To make the component available, you need to be able to edit it. To make a component editable, in CRXDE, add
a node cq:editCong of primary type cq:EditCong. So that you can remove paragraphs, add a multi-value
property cq:actions with a single value of DELETE.
5. Navigate to your browser, and on your sample page (for example, press.html) switch to design mode and enable
your new component for the predicate paragraph system (for example, actions).
6. In Edit mode, the new component is now available in the sidekick (found in the Asset Share group). Insert the
component in actions area.
Customizing Editors
The Asset Editor is the page that opens when an asset found through the Asset Share is clicked allowing the user to
edit such aspects of the asset as metadata, thumbnail, title and tags.
Conguration of the editor using the predened editing components is covered in Creating and Conguring an Asset
Editor Page (www.adobe.com/docs/en/cq/5-61/dam/creating_and_conguringdamnderandasseteditorpages.html#par_title_1) .
In addition to using pre-existing editor components, CQ developers can also create their own components.
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
5/8
4/5/2016
Conguring Clientlib
DAM 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), a DAM 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/asseteditor/init.jsp) should meet
these needs.
Conguring JS actions
Some of the DAM components require JS functions dened in component.js. Copy this le to your component
directory and link it.
1
<scripttype="text/javascript"src="<%=component.getPath()%>/component.js"></script
Code samples are intended for illustration purposes only.
<linkhref="/etc/designs/geometrixx/ui.widgets.css"rel="stylesheet"type="text/css"
Code samples are intended for illustration purposes only.
List<Resource>resources=FormsHelper.getFormEditResources(slingRequest)
if(resources!=null){
if(resources.size()==1){
FormsHelper.setFormLoadResource(slingRequest,resources.get(0))
}elseif(resources.size()>1){
}
}
ResourceloadResource=(Resource)request.getAttribute("cq.form.loadresource")
Stringtitle
if(loadResource!=null){
WCMMode.DISABLED.toRequest(request)
Stringpath=loadResource.getPath()
Assetasset=loadResource.adaptTo(Asset.class)
try{
ObjecttitleObj=asset.getMetadata("dc:title")
if(titleObjinstanceofObject[]){
23
Object[]titleArray=(Object[])titleObj
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
6/8
4/5/2016
Object[]titleArray=(Object[])titleObj
title=(titleArray.length>0)?titleArray[0].toString():""
}else{
title=titleObj.toString()
}
}
catch(NullPointerExceptione){
title=path.substring(path.lastIndexOf("/")+1)
}
}
else{
title=currentPage.getTitle()==null?currentPage.getName():currentPage.getTitle()
}
Code samples are intended for illustration purposes only.
In the HTML part, use the preceding title set (either asset or page title):
1
<title><%=title%></title>
Code samples are intended for illustration purposes only.
<?xmlversion="1.0"encoding="UTF8"?>
<jcr:rootxmlns:sling="http://sling.apache.org/jcr/sling/1.0(www.adobe.comhttp://sling.apache.org/jcr/sling/1.0)
jcr:primaryType="cq:Component"
jcr:title="ImageDimension"
sling:resourceSuperType="foundation/components/parbase"
allowedParents="[*/parsys]"
componentGroup="AssetEditor"/>
Code samples are intended for illustration purposes only.
3. Add samplemeta.jsp:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%
Samplemetadatafieldcomopnent
%><%@pageimport="com.day.cq.dam.api.Asset,
java.security.AccessControlException"%><%
%><%@includefile="/libs/foundation/global.jsp"%><%
Stringvalue=""
Stringname="dam:sampleMetadata"
booleanreadOnly=false
ResourceloadResource=(Resource)request.getAttribute("cq.form.loadresource"
if(loadResource!=null){
Sessionsession=slingRequest.getResourceResolver().adaptTo(Session.class
try{
session.checkPermission(loadResource.getPath(),"set_property")
readOnly=false
}
catch(AccessControlExceptionace){
readOnly=true
}
catch(RepositoryExceptionre){}
Assetasset=loadResource.adaptTo(Asset.class)
try{
value=asset.getMetadata(name).toString()
}
catch(NullPointerExceptionnpe){
}
}
%>
<divclass="form_row">
<divclass="form_leftcol">
<divclass="form_leftcollabel">SampleMetadata</div>
</div>
<divclass="form_rightcol">
<%
if(readOnly){
%><c:outvalue="<%=value%>"/><%
}
else{
%><inputclass="text"type="text"name="./jcr:content/metadata/<%=
}%>
</div>
</div>
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
7/8
4/5/2016
Customizing Renditions
In CQ DAM terminology a rendition is the form in which an asset is presented. In general, a particular asset may have
multiple renditions. For example, full-color image may have one rendition in its original size, another at a scaled-down
size and another that is both scaled down and converted to grayscale.
The renditions that a particular asset is available in can be customized and new renditions created.
(www.adobe.comhttp://www.adobe.com/go/gfooter_truste_logo)
Copyright 2009-2016 Adobe Systems Incorporated. All rights reserved.
Use of this website signies your agreement to the Terms of Use (www.adobe.comhttp://www.adobe.com/go/gfooter_terms_of_use) and Online Privacy Policy
(www.adobe.comhttp://www.adobe.com/go/gfooter_privacy_policy) .
https://docs.adobe.com/docs/en/cq/5-6-1/dam/customizing_and_extendingcq5dam.html
8/8