Highlighted

Programmatically edit Wrapper DIV classes?

Avatar

Avatar

ronaldd85054752

Avatar

ronaldd85054752

ronaldd85054752

15-10-2018

Hey folks,

I'm working on a custom grid building component. The problem I'm having is that the wrapper div is negatively effecting my ability to build columns (the columns set a width of the parent, but on the author this looks weird, because the column's parent is actually the wrapper, not the row element)

I know I can remove the wrapper, but then the column isn't editable, which won't work for me. I know I could use the cq:htmlTag node to edit the tag, class and id - but because the size of the column is author-able, I need a way from the java side to add a class to the wrapper.

Any ideas or an alternate suggestion?

Thanks!

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

15-10-2018

Veena Vikraman  wrote a similar component that uses Sling Models and HTL for a grid component that is authored - Creating a custom Touch UI Grid Component for Adobe Experience Manager

Highlighted

Avatar

Avatar

ronaldd85054752

Avatar

ronaldd85054752

ronaldd85054752

18-10-2018

We're trying to implement a solution a bit more dynamic than this to allow grids to be more freely authored. I think we'd still like to see if there's a way to programmatically change the wrapper classes for a component OR use a component's HTL to include another component that has it's dialog as still being author-able.

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

18-10-2018

The only think i can think of is adding more sizes to the dialog and then having the back end Java ColumnControl code render those sizes.

Highlighted

Avatar

Avatar

ronaldd85054752

Avatar

ronaldd85054752

ronaldd85054752

18-10-2018

No - just the classes the wrapper component writes; but I need to be able to change them dynamically.

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

18-10-2018

I am not aware of an AEM specific API to change the DIV classes other then standard JS

html - Change an element's class with JavaScript - Stack Overflow

Highlighted

Avatar

Avatar

ronaldd85054752

Avatar

ronaldd85054752

ronaldd85054752

18-10-2018

Ok - Is there a way to include a component (parent) in another component (child) and have the child component's dialog and parsys still work?

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

18-10-2018

Highlighted

Avatar

Avatar

ronaldd85054752

Avatar

ronaldd85054752

ronaldd85054752

18-10-2018

The problem with that is that if we hide the wrapper completely; then the dialog doesn't work 😕

Also - I've tried `.getOptions(getRequest(), true).getCssClassNames().add("TEST_CELL");` for IncludeOptions and it doesn't seem to work.

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

19-10-2018

HI,

I tried above code in AEM 6.3, it does work but it does allow you to add extra decorative tag. I won't let you to add class.

Component jsp file -

<%@page session="false"%><%@ page import="com.day.cq.wcm.foundation.Placeholder,com.day.cq.wcm.api.components.IncludeOptions" %>

<%@include file="/libs/foundation/global.jsp"%>

<%

   IncludeOptions opts = IncludeOptions.getOptions(request, true);

   opts.setDecorationTagName("");

%>

Output with opts.setDecorationTagName(""); and opts.setDecorationTagName("arun-test");

Screenshot 2018-10-19 at 10.58.27 PM.png

Screenshot 2018-10-19 at 10.56.37 PM.png