18 Replies Latest reply on Jul 15, 2013 5:07 AM by callmemagnus

    Changing the CQ5 generated div tag around components

    giang.phan

      We are going to use CQ5 as a content platform to be consumed by another service which is the end-point for our users. As in we will be providing HTML for small sections of the front facing websites.

       

      To alleviate any issues that might come up from this integration, we are going to add a prefix to all our CSS classes, ids, and put all our JavaScript in namespaces. The problem is the cq:include tag creates a <div> element around the component's JSP code and then adds the component name, super types, and JCR node title as CSS classes for this div. For example:

       

      <div class="parbase image tout-image">
          <img src="..." class="prefix-our-image" />
      </div>
      <div class="subtitle tout-subtitle">
          <div class="prefix-our-subtitle-div prefix-subtitle">
              <h2>Header Subtitle</h2>
          </div>
      </div>
      

       

      Is there any way we can change the default behavior of CQ5 to prefix the css classes and IDs? At least in non-edit mode as to not break the author experience as seen by setting cq:noDecoration to true. We tried cq:cellName but didn't see that changing anything. We are using CQ5.4.

        • 1. Re: Changing the CQ5 generated div tag around components
          giang.phan Level 1

          I was informed these wrapper divs arent generated on publish. If this is true then thanks anyway!

          • 2. Re: Changing the CQ5 generated div tag around components
            G. Walt Adobe Employee

            I don't think that it is possible to add a prefix to the wrapper DIV element that CQ adds.

             

            You'll need to implement your logic manually, setting the cq:noDecoration=true property to your components, and adding a code like the following to each component:

             

            <%@ include file="/libs/foundation/global.jsp" %>
            <%@ page contentType="text/html; charset=utf-8" import="com.day.cq.wcm.api.WCMMode" %>
            <% 
            String classNames = componentContext.getCssClassNames();
            if (WCMMode.fromRequest(request) == WCMMode.DISABLED)
                 classNames = classNames.replaceAll("[a-zA-Z0-9_\\-]+ ?", "prefix-$0");
            %>
            <div class="<%= classNames %>">
                 <%-- Component Content Goes Here --%>
            </div>
            
            
            1 person found this helpful
            • 3. Re: Changing the CQ5 generated div tag around components
              G. Walt Adobe Employee

              Unless you have some specific configuration, these wrappers are also generated on the publish server.

              • 4. Re: Changing the CQ5 generated div tag around components
                giang.phan Level 1

                Walt,

                 

                You are right about publish configurations (still there after testing) and your solution looks like the best. Thanks!

                • 5. Re: Changing the CQ5 generated div tag around components
                  giang.phan Level 1

                  Walt,

                   

                  I tried your solution, but it breaks the editing of the component if cq:noDecoration is set to true even though I am generating the div tags with the same CSS classes around it. How does ExtJS know how to attach to the component for editing?

                  • 6. Re: Changing the CQ5 generated div tag around components
                    Shelly Goel

                    Hi,

                     

                    trying using below code in your component's sript

                     

                    <%@page import="com.day.cq.wcm.api.components.IncludeOptions"%>

                    <%@page import="com.day.cq.wcm.api.WCMMode"%>

                    <%

                              if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {

                     

                     

                                        IncludeOptions.getOptions(request, true).forceSameContext(

                                                            Boolean.TRUE);

                              }

                    %>

                     

                    Thanks

                    Shelly

                    • 7. Re: Changing the CQ5 generated div tag around components
                      giang.phan Level 1

                      Shelly,

                       

                      What does IncludeOptions.forceSameContext() exactly do? According to Java docs it says forces the same edit context for the next included component. Should I put this in the main page component that includes these smaller components outside the context of the generated <div> decoration?

                       

                      Right now I am trying a different approach by only including the <div> decoration if edit mode is on in each component's JSP like so:

                       

                       

                      <!-- 
                         -   Book keeping stuff defined in our own global jsp files which includes CQ5 global
                        -->
                      <%@page import="org.apache.commons.lang.StringUtils"%>
                      <c:set var="isEditMode"><%= WCMMode.fromRequest(request) == WCMMode.EDIT %> </c:set>
                      
                      
                      <c:if test="${isEditMode}">
                      <div class="<%= StringUtils.join(componentContext.getCssClassNames(), ' ') %>">
                      
                      </c:if>
                      
                      <!-- Component code goes here -->
                      
                      <c:if test="${isEditMode}">
                      </div>
                      </c:if>
                      

                       

                      What do you think about this approach? Is there anything wrong with it? What will the IncludeOptions do? Thanks.

                      • 8. Re: Changing the CQ5 generated div tag around components
                        Shelly Goel Level 1

                        It is having similar result as the code you have written i.e. it will add the wrapper divs (generated for the component to show edit dialogs etc.) only in edit mode.

                        Its upto you to chose either of the ways.

                        • 9. Re: Changing the CQ5 generated div tag around components
                          utrive

                          Hi Shelly,

                          I applied your suggestion to my jsp. But it still doesn't work. I added cq:noDecoration=true & added foll. lines of code to my jsp. It dosn't let me edit the component in edit mode.

                           

                          %@page import="com.day.cq.wcm.api.components.IncludeOptions"%>

                          <%@page import="com.day.cq.wcm.api.WCMMode"%>

                           

                           

                          <%-- Set Vars --%>

                          <c:set var="titleLines" value="<%= properties.get("./titleLines", String[].class) %>" />

                          <c:if test="${empty titleLines}">

                              <%-- Use page title if no title lines have been set --%>

                              <c:set var="titleLines" value="<%= new String[]{resourcePage.getTitle()} %>" />

                          </c:if>

                           

                          <%-- Component Markup --%>

                          <c:if test="${not empty titleLines}">

                          <header class="${componentName}-component ${componentName}-header ${fn:trim(compClassId)} page-header">

                              <h1 class="${componentName}-headline page-title">

                                  <c:forEach var="title" varStatus="loop" items="${titleLines}">

                                      <c:if test="${not empty title}">

                                      <span class="${componentName}-line ${componentName}-line-${loop.count}  ${namespace}line${loop.count}">${fn:escapeXml(title)}</span>

                                      </c:if>

                                  </c:forEach>

                              </h1>

                          </header>

                          </c:if>

                           

                          <c:if test="${isEditMode}">

                              ${editComponentTitleLabel}

                              <c:if test="${empty titleLines}">

                                  ${fn:replace(editComponentErrorLabel, "{0}", "Please specify a title")}

                              </c:if>

                          </c:if>

                           

                          <%

                           

                          if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {

                               IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);

                          }

                          %>

                          • 10. Re: Changing the CQ5 generated div tag around components
                            Shelly Goel Level 1

                            You dont have to set cq:noDecoration=true with this code.

                             

                            So, if you add this code in your component's script, edit mode will work as normal and in preview mode you will not get the additional markup like

                             

                            <div class="componentname supertypename section">

                            • 11. Re: Changing the CQ5 generated div tag around components
                              utrive Level 1

                              Thanks for the reply Shelly.

                               

                              I did removed the noDecoration property & applied your code to JSP but still see,

                                <div class="title touts-title" data-component-container="true">

                              in the preview mode. We want this to go away in preview.

                              • 12. Re: Changing the CQ5 generated div tag around components
                                utrive Level 1

                                Sorry I applied the changes to global component include level & that did it. Thanks a lot Shelly.

                                • 13. Re: Changing the CQ5 generated div tag around components
                                  Anup Sheth

                                  Hi Shelly,

                                   

                                  The solution you have suggested only work for the next component that is included. If I have more than one component included in the script then it will generate wrapper div for remaining components.

                                   

                                  For code given below

                                   

                                  <%

                                  IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);

                                  %>

                                  <cq:include path="componenet1" resourceType="/app/content/component1" />

                                  <cq:include path="componenet2" resourceType="/app/content/component2" />

                                   

                                  <div> tags are not generated for component1 but they are for component2. As per the API documentation it only forces the same context on next included component.

                                   

                                  Is there a way to disable it for all the components that are being included?

                                   

                                  I am trying to generate xml from the component and div tags are spoiling my work.

                                   

                                  Thanks,

                                  Anup

                                  • 14. Re: Changing the CQ5 generated div tag around components
                                    snayakar Level 1

                                    Hi Anup,

                                     

                                    You are are right.  the previous code work only  for the next component that is included.

                                     

                                    But try this solution:

                                     

                                    Add the below code in to global.jsp, which you include for all the component jsp's.

                                     

                                    if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {

                                           IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);

                                     

                                    This will not generate any more extra  <div> tags  for any number of components you add.

                                     

                                    Hope this helps.

                                    1 person found this helpful
                                    • 15. Re: Changing the CQ5 generated div tag around components
                                      Anup Sheth Level 1

                                      Hi Sanyakar,

                                       

                                      That work like a treat. Thanks for help.

                                       

                                      Anup

                                      • 16. Re: Changing the CQ5 generated div tag around components
                                        callmemagnus

                                        I don't get it at all.

                                         

                                        I'm trying to include a component in a foreach loop. The components generates JSON content.

                                         

                                        I tried:

                                        1) noDecoration, but that breaks the other view of my component (edit mode)

                                        2) the IncludeOptions trick, but it only works for the first item in my foreach.

                                         

                                        How can I proceed ?

                                        • 17. Re: Changing the CQ5 generated div tag around components
                                          Anup Sheth Level 1

                                          Hi Magnus,

                                           

                                          Every single component of yours include global.jsp or similar script that makes cq objects available along with inclusion of tag libraries.

                                           

                                          If you put the

                                          <%IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);%>

                                           

                                          Then this code will be included in each and every of your component and hence the generation of extra <div> will be avoided. But this has implication in Edit mode.

                                           

                                          What I usually do is i create globaljson.jsp and globalxml.jsp for this purpose and create separate renderer xml.jsp and json.jsp in each component.

                                           

                                          Include respective global*.jsp in this script. This should solve your problem. Your normal component.jsp will include normal global.jsp and json or xml renderer will included respective global script with above code snippet.

                                           

                                          Regards,

                                          Anup

                                          • 18. Re: Changing the CQ5 generated div tag around components
                                            callmemagnus Level 1

                                            Thanks,

                                             

                                            I finally manage to do it by creating a hidden version of the component. That version is only used to show this JSON, therefore I use the noDecoration trick.

                                             

                                            --

                                            Magnus