Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Programmatically edit Wrapper DIV classes?

Avatar

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
ronaldd85054752
Level 2

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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

Avatar

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
ronaldd85054752
Level 2

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.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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.

Avatar

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
ronaldd85054752
Level 2

18-10-2018

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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

Avatar

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
ronaldd85054752
Level 2

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?

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

18-10-2018

Avatar

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
ronaldd85054752
Level 2

Likes

0 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
ronaldd85054752
Level 2

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.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,428 likes

Total Posts

3,300 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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