Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 8

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

Avatar

Correct answer by
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.

 



Arun Patidar

View solution in original post

4 Replies

Avatar

Level 8

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

 

Avatar

Correct answer by
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.

 



Arun Patidar

Avatar

Level 8
Thanks for the input. Agree to your comments , could you provide any sample code will help me to write this

Avatar

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);
	}
});


Arun Patidar