2 Replies Latest reply on Aug 1, 2012 2:48 AM by ravindarg

    Can any one explain the below code flow?


      Can any one explain the below code flow?


      I am doing this example by property predication..


      Especially can any one give me the description to below points,


      1)CQ.shared.XSS.getXSSValue() method

      2).As an argument of above method "values.meta(..)" what's happening here, What is 'values' here?

      3).Where is the CSS classes will be placed.

      4). articles are my child nodes I am able to access and display child nodes information but I am unable to access parent node details while displaying child nodes info. Can any one suggest me How to perform node traversing to access all nodes information available in a package.



      Below is the code snippet,


      <script type="text/javascript">


          CQ.Ext.onLoad(function() {

              var config = {

                  "xtype": "dataviewlens",

                  "text": "<%= xssAPI.encodeForJSString(name) %>",

                  "renderButtonTo": "lens-list-button-wrapper-<%= time %>",

                  "overflow": "visible",

                  "proxyConfig": {

                      "url": "/bin/wcm/contentfinder/view.json/content/dam"


                  "storeConfig": {

                      "baseParams": {

                          "mimeType": "image"



                  "items": {

                      "cls": "lens-dataview list",


                          '<table><tbody>' +

                              '<tpl for=".">' +

                                  '<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="format-cell"><div>{[CQ.shared.XSS.getXSSValue(values.meta["zno:articleTitle"] ? values.meta["zno:articleTitle"].replace("application/", "") : "")]}</div></td>' +



                                      '<td>Topic</td>' +

                                      '<td><div>' +

                                          '{[values.imageDimensions ? values.imageDimensions : ""]}' +                                   

                                          // 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>' +                               

                                  '</tr>' + 

                                  '<tr>'+'<td class="format-cell"><div>Page :{[CQ.shared.XSS.getXSSValue(values.meta["zno:articleStartingPage"] ? values.meta["zno:articleStartingPage"].replace("application/", "") : "")]}</div></td>' +'</tr>'+


                              '</tpl>' +                                              


                      "itemSelector": ".item"


                  "listeners": {

                      "afterlayout": function() {

                          var el = this.body || this.el;







              var lens = CQ.Util.build(config);

              CQ.search.Util.addLens(lens, "list");



        • 1. Re: Can any one explain the below code flow?
          Sham HC Level 7

          In the example above you have configured an AJAX proxy to load data from the url "/bin/wcm/contentfinder/view.json/content/dam".
          The xtype is dataviewlens which tells your Proxy to use a JsonReader to parse the response from the server into Model object.
          The dataviewlens internally uses GroupingStore and prepares a data which has metadata,id,path,shortpaths etc...  So values act as reference to store locator. You can see details at [1].  XSS service is used for validating and/or encoding individual blocks of content. The api details at http://dev.day.com/docs/en/cq/current/javadoc/com/adobe/granite/xss/XS SAPI.html

          Understanding extjs & using firebug breakpoints will help to to understand better.

          [1]    /libs/cq/search/widgets/source/widgets/DataViewLens.js

          1 person found this helpful
          • 2. Re: Can any one explain the below code flow?
            ravindarg Level 1

            Thanks Sham,



            Presently I am at child node but I want to get the parent node information. Presently I am getting this child node information by using the property predication.  And the css files related to this will be available in which location?


            Can anybody help me out how do we can set any specific node path to values object, where the values object is being cofigured. If this is opened to me my purpose will be solved.


            Can you tell me some good sites to get the better examples to understand the basics with clear steps and graphical representation.