3 Replies Latest reply on Jun 11, 2013 3:54 AM by jamesherrieven

    Programatically trying to alter component "decoration tags" in CQ5.6

    jamesherrieven

      Hi,

       

      I've been evaluating CQ5 for the last week, and one of my key desires (at this stage) is to be able to modify the values added to the class attribute of the "decoration tags" that are wrapped around the components when they are rendered - this will be important in being able to offer a responsive design experience in edit mode...

       

      The options I have explored are:

       

      Adding cq:noDecorate to the components - this removes the decoration tag and the associated JavaScript, which, while I can then add my own wrapping decoration, I need the associated JS in order to actually perform the edit functions.

       

      Adding cq:htmlTag + cg:tagName + class nodes/attributes to the components - this provides what I need, in that I can define the wrapping tag name and add a class to the tag and the JS is still generated. However, this is applied at a configuration level - I need this to be possible on the fly (as the actual class name to be added will be user configurable).

       

      So, as I understand it, you can turn off decoration programatically using componentContext.setDecorate(false); which is supposed to the equivalent to cq:noDecoration. And it is - with the buggy exception that it doesn't remove the opening decoration tag... This then causes all sorts of nested mess. As mentioned above this wouldn't work for me anyway as the JS is removed too and I need this.

       

      The next step was to try componentContext.setDecorationTagName("mytag"); to see whether there is a way to hook into the decoration tags this way.

       

      Using componentContext.setDecorationTagName(""); is supposed to remove the decoration tags. What is appears to do is again only remove the closing tag! It does however leave the JavaScript, and whilst I can manually close the decoration block, I still can't modify the opening tag - which is the actual aim.

       

      Incidentally, using componentContext.setDecorationTagName("mytag"); simply changes the closing tag to "</mytag>" and again it leaves the JS and the opening tag detail untouched.

       

      This area feels very buggy to me and as a new CQ user it raises concerns that this is indicative of CQ5 as a whole - Would this be fair or am I missing something?

       

      Regards

      James

        • 1. Re: Programatically trying to alter component "decoration tags" in CQ5.6
          orotas Level 4

          Are you making the componentContext call inside of you component? If so that's the problem. By the time your component JSP executes that opening tag has already been printed in the HTML, which is why only the closing tag is removed. To make this approach work you need to make the componentContext call before you component is included (either in the template or in the parsys).

          • 2. Re: Programatically trying to alter component "decoration tags" in CQ5.6
            jamesherrieven Level 1

            Hi Oratas

             

            I did wonder whether that was it, so i moved the componentContext call up a level.

             

            In the instance where this was moved to the template, along with the <cq:include path="image" resourceType="app/components/image" /> include, this had no impact on the rendered component.

             

            In the intance where this was moved into the parsys component, it basically wiped the closing decoration of the parsys and didn't affect the child components.

             

            This suggests the the componentContext call does actually need to be inside the component...

            • 3. Re: Programatically trying to alter component "decoration tags" in CQ5.6
              jamesherrieven Level 1

              Incidentally, using IncludeOptions.getOptions(request, true).setDecorationTagName(""); in the parsys component, just before rendering each child component (<sling:include resource="<%= par %>"/>) does wipe both opening and closing decoration tags for the component and (strangely) it leaves the decoration JavaScript...

               

              Which means I can add a closing tag after each rendered component in the parsys component; create an opening tag in the component itself, with the custom class name coming from the configuration of the actual component instance...

               

              Whilst this achieves what I want, it feels very hacky and each non-parsys component needs the IncludeOptions.getOptions(request, true).setDecorationTagName(""); explicitly called before it is included + an extra closing tag needs to exist in the parent code after the component include tag.