on 2024 Jul 19 8:05 AM
HI All,
I am currently working on a project in SAP Build Apps and have encountered an issue that I need your assistance with. Here’s a brief overview of the problem:
**Issue:**
I have a “Title” component in my application for which I have applied a style. Specifically, I have set the text size to "Header 1" using a dropdown in the style settings. While this size is perfect for desktop browsers, it appears too large on mobile browsers. I would like to dynamically change the text size to "Header 2" when the application is running on a mobile browser and revert it back to "Header 1" when it is on a desktop browser.
**Requirement:**
- On mobile browsers: Text size should change to "Header 2".
- On desktop browsers: Text size should remain as "Header 1".
Could you please guide me on how to achieve this dynamic adjustment based on the device type?
You could edit the style for the title, then open the Text Size area.
For the Font size, change the binding type to a Formula, and use a formula like this:
IF(systemVars.runtime == "web",theme.$textSize_title_3XL.fontSize,theme.$textSize_text_S.fontSize)
I'm not an expert on theming, so the values to set might be slightly different, but I started with the value that was already set and changed it to a different size under the "theme" object.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You should be able to select from the system variables.
This is systemVars.runtime for me, and I'm not sure why it would not work for you.
Are you working with a deployed version? Android?
P.S.: Why are there 2 empty replies on this thread?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Dan,
Yes, I am testing the app with the deployed version.
Its true that while running the deployed URl of app in desktop Browser the value of "systemVars.runtime" is retured as "web", but the problem is that the URl when it is running on Iphone Browser(Safari) or Android Phone Browser(Chrome) the value of "systemVars.runtime" is retured as "web" as well. So, with this system Variable we could not determine whether the Application is running on Desktop Browser or Mobile Phone Browser.
I have also tried with system Variable "systemVars.formFactor" but we are getting the response as "desktop" for both in Desktop and Mobile browser.
Thanks and Regards,
Abhishek Sengupta
I have tried with Orientation as well its gives response as undefined. But I have managed to find out a solution but dont know if thats the right way to achieve its or not. You can suggest if its correct.
I am using the below formula
IF(systemVars.dimensions.viewport.width < 768,Mobile,Desktop)
User | Count |
---|---|
62 | |
12 | |
7 | |
7 | |
7 | |
6 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.