AEM 6.3 TO detect from desktop or mobile from which the request came in java?

Avatar

Avatar
Validate 25
Level 4
srinivas_chann1
Level 4

Likes

21 likes

Total Posts

222 posts

Correct reply

6 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
Level 4
srinivas_chann1
Level 4

Likes

21 likes

Total Posts

222 posts

Correct reply

6 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
srinivas_chann1
Level 4

12-11-2020

Hi ,

 

I am using a component twice due to mobile and desktop views  .Due to which the same JavaScript is getting called twice.

I am using JavaScript to hide based on css.

 

I wanted tp know if desktop or mobile view in java code, in this way i will be able to call the component only once based on views using slightly test logic.

 

Please let me know how to achieve it

 

Thanks

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,328 posts

Correct reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,328 posts

Correct reply

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

12-11-2020

If you have to use components twice just only for 2 different viewports then your design is wrong.

Anyways, you should not check the device from the backend due to caching, it will create other issues.

There can be a solution - 

Add a data attribute(data-js-init="false") in your component DOM. when js initialize/act on your component then change the value to true. write a condition on js it only acts on the component if js value is false.

 

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

140 likes

Total Posts

188 posts

Correct reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

140 likes

Total Posts

188 posts

Correct reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile
Manjunath_K
MVP

12-11-2020

Hi @srinivas_chann1 

Can you please share sample code or screenshot with detail, it will be helpful to understand your use case/problem which you are facing.

 

you can achieve this using single component, load both desktop & mobile view in sightly. using css media query hide/show desktop and mobile view based on viewport.

@media (max-width: 958px) {
//write css style to hide/show using different class names on desktop & mobile view html markup
}

 

you can identify mobile or desktop using User-Agent value in request header.

request.getHeader("User-Agent"); //Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36