Programmatically edit Wrapper DIV classes? | Community
Skip to main content
Ronald_Diemicke
Level 2
Oct 15, 2018 9:09 PM UTC

Programmatically edit Wrapper DIV classes?

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

18 replies

Show previous replies
Ronald_DiemickeAuthor
Level 2
Oct 18, 2018 9:15 PM UTC

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.

Translate
arunpatidar
arunpatidar
New Participant
Oct 18, 2018 4:40 PM UTC

Hi,

There is Java API which you can use to handle decoration tags

com.day.cq.wcm.api.components ("The Adobe AEM Quickstart and Web Application.")

https://www.codermag.net/2016/02/remove-component-wrapper-divs-in-cqaem.html

Translate
Arun Patidar
Ronald_DiemickeAuthor
Level 2
Oct 18, 2018 3:16 PM UTC

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?

Translate
smacdonald2008
smacdonald2008
Level 10
Oct 18, 2018 3:11 PM UTC

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

Translate
Ronald_DiemickeAuthor
Level 2
Oct 18, 2018 3:06 PM UTC

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

Translate
smacdonald2008
smacdonald2008
Level 10
Oct 18, 2018 3:04 PM UTC

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.

Translate
Ronald_DiemickeAuthor
Level 2
Oct 18, 2018 2:46 PM UTC

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.

Translate
smacdonald2008
smacdonald2008
Level 10
Oct 15, 2018 9:29 PM UTC

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

Translate
Terms & ConditionsAccessibility statement

Loading footer...