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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

srinivas_chann1
Level 7
Level 7

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

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

View solution in original post

2 Replies
Manjunath_K
Community Advisor
Community Advisor

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

 

Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

View solution in original post

srinivas_chann1
Level 7
Level 7
Thanks for the input. Agree to your comments , could you provide any sample code will help me to write this
Arun_Patidar
Community Advisor
Community Advisor
$(document).ready(function(){
	const componentSelector =".mycomponent1"
	let componentInit = $(componentSelector).data("jsInit");
	if(componentInit == false){
		
	      // logic

	      // set data.-init to ture
	      $(componentSelector).data("jsInit", true);
	}
});