Generated DIV section modification in ADOBE CQ

[sreenu539]

I need to have custom css class name on a CQ generated DIV.

custom css class name is "template name" based on what page the component gets added.

For example :

1) To have Edit bar to be able to delete/edit component on a page "cq no decoration should be set to FALSE or should not be present on the component"
    
    Impact : There will be CQ GENERATED DIV ( such as <div id="cq-gen85" class="sectionTitle parbase section"> ) below which all the component generated code get placed.

2) Custom DIV (such as <div class="sectionTitle parbase section CUSTOM_CSS_CLASS_NAME"> )with custom style names could be generated using cq:HTMLTag instead of having CQ GENERATED DIV.

   costraint ? : custom css class names should be known before the hand when writing cq:HTMLTag
   
   requirement : This does not meet the requirement of having dynamically generated css class name (for example : css_product, here the "product" is template name, template name is available only at the run time, not while adding cq:HTMLTag )
   

Any ideas on how to do this ? 

Thank you,

Sri

[Runal_Trivedi · Accepted solution]

You can use componentStyles xtype in your dialog to get styles configuration.

There you can have a drop down of style class to be applied. Drop down mean xtype-selection, values of styles dropdown can be provided using JSON call and with optionsProvider property of xtype-selection widget.

i.e. drop down values can be autogenerated using optionsProvider and JSON call.

With componentStyles xtype what ever values you select gets applied to autogenerated div class along with its standard generated class values.

OOTB textImage component makes use of same. - /libs/foundation/components/textimage/dialog/items/tab4

- Runal