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

Touch UI CSS class

Avatar

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

48 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

48 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile
ashishkhadpe
Level 2

27-08-2020

Hi All,

 

We have few mark up defined in our CSS library as below in CQ edit mode : 

 

 

.cq-wcm-edit .formBuilder .section.hiddenField,
.cq-wcm-edit .formBuilder .section.hiddenFieldMulti {
    display: block;
}

 

 

I assume that .cq-wcm-edit only works with AEM classic UI. Any help on how we can migrate this to touch UI or any similar class we can use to define.

 

Thanks in advance. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 10
MVP
Varun_Shakya
MVP

Likes

119 likes

Total Posts

96 posts

Correct Reply

24 solutions
Top badges earned
Give Back 10
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Give Back 10
MVP
Varun_Shakya
MVP

Likes

119 likes

Total Posts

96 posts

Correct Reply

24 solutions
Top badges earned
Give Back 10
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
Varun_Shakya
MVP

27-08-2020

I would say first you check the purpose of this CSS class why they have added in classic UI. 

And then to implement the same for Touch UI dialog.

There could be a case where you might not need this in touch UI dialog or there could be a different way to serve the purpose. 

 

 

Answers (3)

Answers (3)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

27-08-2020

Hi @ashishkhadpe 

 

Just like .cq-wcm-edit, there is a class ". aem-AuthorLayer-Edit" added to <html> node of the page added in iframe in Touch UI mode.

 

You can easily use this class to replace classic based css.

 

Screenshot from 2020-08-27 18-13-35.png

 

Hope it helps!

Thanks!

Nupur

Avatar

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

48 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 2
ashishkhadpe
Level 2

Likes

4 likes

Total Posts

48 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 3
Boost 1
View profile
ashishkhadpe
Level 2

27-08-2020

Make use of : 

aem-AuthorLayer-Edit

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

505 likes

Total Posts

642 posts

Correct Reply

213 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

505 likes

Total Posts

642 posts

Correct Reply

213 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

27-08-2020

Hi @ashishkhadpe,

In touch UI, WCM mode is known as layers and the same is saved in cookies in the name "wcmmode". We should listen to the event named - cq-layer-activated -> get the cookie value -> write CSS via jQuery targeting specific layer (In this case, it is Edit)

Sample script for reference:

 $(document).on("cq-layer-activated", function(){
		var wcmmodeVal = $.cookie("wcmmode");
        console.log("WCM Mode = "+wcmmodeVal);
        if(wcmmodeVal == "edit"){
        	$(".cq-droptarget").css("border", "2px solid red"); // Target your desired class and write CSS accordingly
        }

    });