Skip to Content (Press Enter)
UserImage.jpg
Ayumu Inomata
75Views
4Comments
Is it okay to edit the class of the body tag with JS?
Question
JavaScript
Reactive
CSS
Forge
OutSystems UI
Application Type
Reactive
Service Studio Version
11.54.50 (Build 63188)
Platform Version
11.18.1 (Build 37828)

I am developing a tablet-oriented theme that inherits the OutSystemsUI (ver.2.14.0) theme in Reactive development.

The default desktop and tablet screen width boundary of OutSystemsUI is 1024px, and

since the tablet screen width I am considering is 1080px, it will be judged as a desktop if left as default.

I used the SetDeviceBreakpoints action to change the settings, but

when I tested it on a real tablet, it was judged as a desktop, not a tablet.

There is a possibility that this phenomenon is a bug, so I am separately contacting support.

If this issue cannot be resolved, I am considering adding a tablet class to the body tag by

deleting the desktop class with JS and adding a tablet class, but is there a problem?

I feel there might be a risk myself, but I can't find any concrete evidence.

If anyone has any knowledge on this, please post.

0
0
05 Jun 2024
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @ayumu inomata 

A couple of questions:

  1. are you using the SetDeviceBreakpoints client action in the OnApplicationReady system event? Can you share an example?
  2. are you testing on an iPad Pro-like tablet? If so, by design, in landscape it will always be set as Desktop so it's not an issue but a rule.

Cheers,
GM

0
0
05 Jun 2024
Copy Link
UserImage.jpg
Ayumu Inomata

Thank you for your answer.


I have also conducted verification using the SetDeviceBreakpoints client action in OnApplicationReady.

The verification screen I created is as follows.

  1. Call the SetDeviceBreakPoints action in the Screen's OnReady event or OnApplicationReady
  2. In the Screen's OnReady event, get the class assigned to the body tab in JS and Assign it to the Screen's local variable
  3. Output the assigned local variable in the Screen's Expression

Under the following conditions, I am getting the expected results.

  • When changing the screen width in Chrome's emulator
  • Different environment (my PE environment) ×  OutSystemsUI (ver.2.14.0)  × the same tablet


I tested it on an iPad (9th generation).

TestScreenSample.png
1
0
06 Jun 2024
Copy Link
UserImage.jpg
Ayumu Inomata

I used the SetDeviceBreakpoints action to change the settings, but

when I tested it on a real tablet, it was judged as a desktop, not a tablet.

There is a possibility that this phenomenon is a bug, so I am separately contacting support.

→I received an answer from support.

　This behavior is caused due the RPM-1764, already solved on 11.25 platform version, that even applying the new classes, the old classes are never removed from the body HTML element; (RPM-1764

　registerDeviceClassGetter does not apply the new breakpoints immediately)

　A workaround was introduced and I am verifying it.

0
0
07 Jun 2024
Copy Link
UserImage.jpg
Ayumu Inomata

I received an answer from support.

Editing the body tag is not recommended. It may cause conflicts within the system and may not be a reliable solution in the long run.

0
0
14 Jun 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.