Dynamic Text Size based on device type in SAP Build Apps

[sengupta01]

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?

[Dan_Wroblewski · Accepted solution]

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.

[sengupta01 · Accepted solution]

Hi Dan,

Thanks for your response!!

The system variable does not work, neither on desktop browser nor on mobile browser. 

"systemVars.runtime".

[sengupta01 · Accepted solution]

Hi Dan,

[sengupta01 · Accepted solution]

Hi Dan,

[Dan_Wroblewski]

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?

[sengupta01]

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

[Dan_Wroblewski]

Ahhh ... can you try orientation or device variables? The runtime would still be web since you are running in a browser. I don;t know how the variables work when you are on a mobile device but running in a browser.

[sengupta01]

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)

[Dan_Wroblewski]

That's great, as long as you found a solution.