Assign multiple rendering scripts to a draggable component

[Krisgum]

Hey CQers ,

 I would like to know the best approach to have the same content displayed in a different ways in a portion of a web page for the draggable component which sits on a page component .

To elloborate  , I have defined a custom component named  'ProductsList' which by default has default jsp 'ProductsList.jsp'

The business logic for this component is to fetch all the products from JCR  . The display logic is that if the component is dragged and dropped on a parsys on a products page which is backed by a template and page components ( to include standard headers , navigations , side bars along with other custom components ) , the list of products should be displayed in a grid view . 

If the 'ProductsList' component is dragged and dropped on a 'Suppliers' page which is also backed by same template and page components   , the portion of the webpage should display the products in a list view (the page can be refreshed).

One way to achieve is to manipulate the display logic in Productslist.jsp to display either grid view or list view but i'm pretty sure that it wouldn't be the best way .

I'm assuming the best way might be to define two scripts at , 'productslist.jsp' and 'productslist.grid.jsp' and have them resolved using sling by 'extns' and 'selectors" , but  i'm  not sure where to add those selectors and get them resolved using sling .   Thanks in advance for giving any pointers on this .

cheers

[andyshreve]

One approach would be to simply build a component with that has an edit dialog that allows the author to choose either the grid display or the list display. Or have it use one display by default if the author has not chosen one.

The problem here is that there is no distinct way for you to detect that a page is product page or a suppliers page. Another method is to add a product/supplier radio field to the page properties dialog. The author would specify which type of page is desired and your component could use this page property to determine how to display.

[Ojjis]

I think what he means with having the component listen to the template is that the template needs to set some properties for the page which the component will "read" eg.
Template 1 (for the products page):

<% pageContext.setAttribute("pagetype","products"); %>

Template 2 (for the suppliers page):

<% pageContext.setAttribute("pagetype","suppliers"); %>

Then the productlist.jsp could simple read that property like:
 

<c:choose> <c:when test="CHECK FOR EITHER SUPPLIER OR PRODUCTS"> //Include the corresponding script (view) here </c:when> <c:otherwise> //Include the other  script (view) here </c:otherwise> //Add more variants in the future </c:choose

and then just include your different sub-scripts or views for displaying the list. This is quite similar to the original list component which you could look at as a reference. Good luck :)

[Krisgum]

 The way i was implementing is by adding a custom property for templates which i'm using back in my component.jsp to switch the rendering scripts . Looks like the best way may be on the similar lines . Thanks for your replies guys .

[justin_at_adobe · Accepted solution]

I would suggest using two different templates and then using that as the trigger to switch between scripts. If a single template is required, then you should find some other indication (a page property?) that allows your component's script to switch properly. Making this the responsibility of the author seems error-prone. 

[Krisgum]

Hey Guys ,

  Thanks for your replies

  Right now I'm following the approach which is similar to the one suggested by Andy but wanted a different approach on it . Lets say if the same component has to be displayed in a table approach in a different page i have to again configure the dialog for the component  . 

Justin when you mentioned two templates , how is that the change of the template can be recognized by my component ? I mean any sling way to recognize it ? I'm asking this because , in future if I come across a requirement to display the same component in a table way , I would like to just create a script at the component level 'Products.table.jsp'  and using sling (adding extns or selectors .. )it would pick up this script for rendering the component rather than controlling the logic for switching the scripts embedded in any jsp  . Would any such approach be possible to control the display of a component in a particular portion of a web page ?

[Ojjis]

[quote:postID=forum__wizo-hey_cqers_iwou__yl7s-since_a_templatedoe]

Since a template doesn't actually contain executable code, this isn't possible. Perhaps you mean setting these attributes in the page component, but that is a bit heavyweight IMHO as it requires creating a new page component.

What I was actually suggesting is to look at the cq:template property of the currentPage.

[/quote]

Ah yes, good point there Justin. I meant the page connected to the template.
And I totally agree on that it would be a bit overkill.. The template properties are probably the way to go :)

[justin_at_adobe]

Your component would need to have logic in it to look at the template of the containing page. If you wanted to have multiple scripts (which would probably be a good idea from a code management perspective), your main productlist.jsp could just do an include of the appropriate selector-based script.

[justin_at_adobe]

Since a template doesn't actually contain executable code, this isn't possible. Perhaps you mean setting these attributes in the page component, but that is a bit heavyweight IMHO as it requires creating a new page component.

What I was actually suggesting is to look at the cq:template property of the currentPage.