In AEM 6.0 SP2, when using the touch UI on a component that uses the "Component Styles" functionality, the component does not apply the new class to the component until after a page refresh. To reproduce this issue:
This is happening in our new site as well with our own custom components that use the Component Styles dialog functionality and it is very annoying for authors. The only work-around we've found is to add a cq:listeners to refresh the page automatically, but this is a very poor work-around since unless the component is at the top of the page, the author has to scroll back to where they were editing. Is there a work-around or a patch to fix this issue so in-place update of the component style works without full page refresh?
Solved! Go to Solution.
Views
Replies
Total Likes
Hi,
In OOTB componentof "text-image" when you update the direction field value of the dialog,at run time there will be ajax call and page is refreshed.
Then the functionality will appear on the page.
So i updated my custom component without calling ajax call and takes value from the dialog and set it into the code below.
String divId = "cq-textimage-jsp-" + resource.getPath(); String imageHeight = image.get(image.getItemName(Image.PN_HEIGHT)); String direction=properties.get("selectdirection",""); // div around image for additional formatti if(direction.equals("image_right")){ %><div class="image" style="float:right;margin:0 8px 8px 0;"id="<%= xssAPI.encodeForHTMLAttr(divId) %>"><%} else if(direction.equals("image_left")){ %><div class="image" style="float:left;margin:0 8px 8px 0;"id="<%= xssAPI.encodeForHTMLAttr(divId) %>"><%} image.draw(out); %><br></div><% %><cq:text property="image/jcr:description" placeholder="" tagName="small" escapeXml="true"/>
From the below image you can see the updated values.
Node name:componentstyle
Name:name
Type:String
Value:./selectdirection
[img]imagedirection.PNG[/img]
Views
Replies
Total Likes
Hi,
In OOTB componentof "text-image" when you update the direction field value of the dialog,at run time there will be ajax call and page is refreshed.
Then the functionality will appear on the page.
So i updated my custom component without calling ajax call and takes value from the dialog and set it into the code below.
String divId = "cq-textimage-jsp-" + resource.getPath(); String imageHeight = image.get(image.getItemName(Image.PN_HEIGHT)); String direction=properties.get("selectdirection",""); // div around image for additional formatti if(direction.equals("image_right")){ %><div class="image" style="float:right;margin:0 8px 8px 0;"id="<%= xssAPI.encodeForHTMLAttr(divId) %>"><%} else if(direction.equals("image_left")){ %><div class="image" style="float:left;margin:0 8px 8px 0;"id="<%= xssAPI.encodeForHTMLAttr(divId) %>"><%} image.draw(out); %><br></div><% %><cq:text property="image/jcr:description" placeholder="" tagName="small" escapeXml="true"/>
From the below image you can see the updated values.
Node name:componentstyle
Name:name
Type:String
Value:./selectdirection
[img]imagedirection.PNG[/img]
Views
Replies
Total Likes
Thanks Techaspect. I had considered doing a work around like that, but it is happening on several components and I didn't want to rewrite the server logic for all of them to include the component styles, which should be applied automatically (and is applied on page load, just not on an AJAX update of the component). However, I was able to track down the client script that was causing the problem. In libs/cq/gui/components/authoring/clientlibs/editor/js/edit/edit.actions.js, in the _updateDom function, it appears to have some code that deals with “legacy” class information based on the component type. It overrides the class attribute that was returned by the ajax call. It sets it to “section” plus those classes defined by the component type, but does not include the class from the component style setting. I changed the following line (line #102) from:
val = 'section ' + val;
to:
val = 'section ' + val + ' ' + domElem.attr(attr);
to preserve the classes returned from the server (including the component styles selection). It ends up having some duplicate names in the class, but it works. NOTE: I made this change by creating an “overlay” in the apps tree and modifying the js file there. There may be a cleaner way to do this, like finding the component style class(es) somewhere in metadata, but this works and only results in duplicate names in the class attribute when authoring. In any case, this seems like a bug in the edit.actions.js code.
Views
Replies
Total Likes