70
Views
8
Comments
Solved
device detection outsystemsUIWeb not working as expected
Question

So I have a webbpage meant for desktop and handheld device (Zebra scanner),
the GetDevice action from OutsystemsUIWeb detects the zebra device as a desktop. (wrong)

Looking into HOW this detection work, it read a cookie DEVICES_TYPE.
Anyone know where this cookie is made or even better, how to set it to correctly 'phone'?
The viewport of the device is 720x1060 so this might be an edge case.

Also the GetOS and GetBrowser actions return empty so can't dectect device specifics there either.

mvp_badge
MVP
Rank: #91
Solution

Patrice Oostermeyer wrote:

Thanks this info helped me to understand the inner workings. Not clear to me what the criteria are for the cookie to change in phone/tablet/desktop. Must be the viewport size, but what are the limits for each device? The Zebra scanner in this case has a 720 * 1060 resolution, that is misstaken for a desktop.

You're welcome, Patrice :)

Yes, you are correct the DEVICES_TYPE cookie value gets updated automatically based on the change in View-port resolution value

You can get the Viewport value using below mentioned JS code

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);


According to the above retrieved values, you can manually update/set the DEVICES_TYPE  cookie value using the SetCookie server action.


Regards,

Benjith Sam

mvp_badge
MVP
Rank: #91

Hi Patrice,

I don't have zebra device with me to test.. but below are some of the observation which I want to share...

Observations:

- In Traditional Web Application, under the hood OutSystems creates a cookie called DEVICES_TYPE to identify the device on which the application is accessed.

- On changing/Based on the resolution of the screen the DEVICES_TYPE cookie value automatically gets updated from Desktop to phone as shown below

- You can set the Cookie value manually using the SetCookie server action, available under the HTTPRequestHandler Extension module as shown below

- Define the SetCookie server action in the Preparation action flow or any other server action where you want to update the cookie value manually as shown below

Regarding to "GetOS and GetBrowser actions return empty so can't detect device specifics there either. " - Refer this Forum post

Hope this helps you!


Regards,

Benjith Sam

Rank: #82

Hi,

There's the other indirect way as well via using JS snippet.

You can use the JS snippet directly in action or on wb.

Ref JS Snippet:


https://dev.to/itsabdessalam/detect-current-device-type-with-javascript-490j#:~:text=userAgent%20is%20a%20property%20of,%2C%20tablet%2C%20mobile%20otherwise%20desktop.