Multiplatform App

Hi, I’m completely new to this do apologies for what I expect is a noob question but I want to create an app that is able to run on multiple devices and platforms eg phone, tablet, desktop, ios, android and browser.

I originally started laying out the ui on a full screen Web page which looked fine however when I previewed on an android phone the logo was too big for the screen area, fields incorrectly positioned etc.

Do need to create a separate interface per device type and platform or is there some setting in missing or something else?

If the is a tutorial(s) that would walk me through this and any other likely noob questions I am likey to encounter please let me know where I can find them.

Thanks in advance.

David

1 Like

There needs to be better documentation on this, but currently, you can change the binding type of e.g. a component’s width value to a formula function by clicking the link icon next to the style property.

Then, you can use the system variables (available under systemVars.* namespace in the formula editor) to set different rules based on screen size and even operating system/runtime type (so you can have different things for native mobile vs. mobile web, for example).

So, you could e.g. bind your component’s width to:

IF(systemVars.dimensions.viewport.width > 900, 800, 300)

This formula would result in behaviour where the component width is 300 if the viewport width is 900 or less, and 800 if it’s more than that. (Not the best real life example, but you get the gist.)

Another option is to make a two components, one for small screens and one for large, and us the Visible property (under the Advanced accordion) to show one on large screens and the other on smaller ones.

There’s a lot of ideas how we want to improve this to make it easier and more manageable, but formula functions bound to style properties/visible property should allow you to do pretty much everything already.

3 Likes

hello, could you please give an example of how the Advanced settings could be used for the 2 sets of different components?

Thank you