Hi ,
I'm trying to customize cq/search/lenses/list component to display products list instead of dam assets. . Following the same approach as implemented for geometrixx assetviewer. I'm using list lens along with the querybuilder component . So i have configured querybuilder component to look up at etc/commerce/products and the component correctly returns json representing the product structure . From firebug console , I'm pasting the Url which gets executed by the querybuildercomponent .
Now i'm trying to customize list.jsp from /apps/cq/search/components/lenses/list . It uses xtype 'dataViewLens' which extends from 'lens' . So i assumed that in "items" i can iterate through the json records and print them . Since the superType 'lens' class has default json renderer declared and which do not mention all the fields that i would like to print, i overridded the renderer to declare all my required fields . However it seems the iteration is happening incorrectly and am not able to access the fields returned from json . I'm very beginner with extjs . (Nested image object inside is considered as separate object and new row is getting created ) . Can i get any pointers on how to customize this list lens component to print out product details ?
My version of list.jsp
--------------------------------------------
List Lens component --%><%@ page import="java.util.Calendar" %> <% %><%@include file="/libs/foundation/global.jsp"%><% Long time = Calendar.getInstance().getTimeInMillis(); String name = properties.get("name", "List"); String dateFormat = properties.get("dateFormat", "d-M-Y H:i"); String textCreated = properties.get("textCreated", "Created:"); String textModified = properties.get("textModified", "Modified:"); %> <div id="lens-list-button-wrapper-<%= time %>" class="lens-button-wrapper"></div><!-- --><script type="text/javascript"> CQ.Ext.onLoad(function() { var config = { "xtype": "dataviewlens", "text": "<%= xssAPI.encodeForJSString(name) %>", "renderButtonTo": "lens-list-button-wrapper-<%= time %>", "overflow": "visible", "items": { "cls": "lens-dataview list", "tpl": '<table><tbody>' + '<tr><td class="padding-cell top"><div /></td></tr>' + '<tpl for=".">' + '<tr><td class="padding-cell"></td><td colspan="4" class="line"></td><td class="padding-cell"></td></tr>' + '<tr class="item" ' + ' ondblclick="CQ.search.Util.resultDblClick(event, \'{[CQ.shared.XSS.getXSSValue(values.id)]}\',\'{[CQ.shared.XSS.getXSSValue(values.path)]}\');"' + ' qtip="{[CQ.shared.XSS.getXSSValue(values.shortPath)]}<br/>' + '{[CQ.shared.XSS.getXSSValue(values.name)]}"' + '>' + '<td class="padding-cell"><div /></td>' + '<td class="thumbnail-cell"><div style="background-image:url(\'{[CQ.HTTP.externalize(values.path,true)]}.thumb.48.48{[values.ck ? "." + values.ck : ""]}.png\');" /></td>' + '<td class="title-cell"><div><span class="title">{[CQ.shared.XSS.getXSSValue(values.price)]}</span>{[CQ.shared.XSS.getXSSValue(values.identifier)]}</div></td>' + '<td class="title-cell"><div><span class="title">{[CQ.shared.XSS.getXSSValue(values.id)]}</span>{[CQ.shared.XSS.getXSSValue(values.title != values.name ? values.title : "")]}</div></td>' + '<td class="format-cell"><div></div></td>' + '<td class="last"><div>' + '{[values.imageDimensions ? values.imageDimensions : ""]}' + '<br/>' + // if available show mod date, otherwise creation date '{[values.modificationDate ? ' + '"<%= xssAPI.encodeForJSString(xssAPI.encodeForHTML(textModified)) %> " + values.modificationDate.format("<%= xssAPI.encodeForJSString(dateFormat) %>") + "<br/>"' + ':' + 'values.creationDate ? ' + '"<%= xssAPI.encodeForJSString(xssAPI.encodeForHTML(textCreated)) %> " + values.creationDate.format("<%= xssAPI.encodeForJSString(dateFormat) %>") + "<br/>"' + ':' + '""]}' + '</div></td>' + '<td class="padding-cell"><div /></td>' + '</tr>' + '</tpl>' + '<tr><td class="padding-cell bottom"><div /></td></tr>' + '</tbody></table>', "itemSelector": ".item" }, "reader": new CQ.Ext.data.JsonReader({ "totalProperty": "results", "root": "hits", "fields": [ "price", "path","title", "identifier" ], "id": "path" }), "baseParams": { }, "listeners": { "afterlayout": function() { var el = this.body || this.el; if(el){ el.setOverflow("visible"); } } } }; var lens = CQ.Util.build(config); CQ.search.Util.addLens(lens, "list"); }); </script>
Thanks in advance
.
Solved! Go to Solution.
Views
Replies
Total Likes
If you are not comfortable with extjs -- you can use other JS frameworks and plugins with CQ. That is one of the nice aspects of CQ -- it's flexible.
For example -- see this community article that talks about using QueryBuilder API and then writing the results to a JQuery Grid:
http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-aem-applications-that-use.html
However -- instead of using a Grid -- you can use a JQuerry List plugin:
Views
Replies
Total Likes
If you are not comfortable with extjs -- you can use other JS frameworks and plugins with CQ. That is one of the nice aspects of CQ -- it's flexible.
For example -- see this community article that talks about using QueryBuilder API and then writing the results to a JQuery Grid:
http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-aem-applications-that-use.html
However -- instead of using a Grid -- you can use a JQuerry List plugin:
Views
Replies
Total Likes
Hi ,
We have a use case which is very closely related in terms of functionality to ''Geometric asset viewer' . The only difference I saw was to display products instead of dam assets . So I was going in the approach to use the existing ones and change only the display logic minorly to render the products (also to improve my knowledge on extjs). Thanks for your pointers on changing the script framework . .Switching to jquery probably may take more modifications but have some handy knowledge on it .
However with using extjs the point where I'm struck is that , I'm not able to retrieve all the attributes from my json response . I'm able to fetch attributes 'id' and 'path' but not 'resourceType','Identifier','jcr:description' which are present in my json response .I also tried to override ' preparedata ' method but still not able to retrieve all attributes . I'm definitely missing something here but couldn't figure it out yet . Anything that that you guys might see missing ?
Thanks in advance
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies