Responsiveness of canvas power apps integrated on microsoft teams

[Anonymous]

I have an canvas app built on tablet mode & then integrated on Microsoft teams for users accessibility. But the app isn't responsive on mobile mode nor rotating in landscape (as there is no rotation feature on teams ,as per references). So need to make the app responsive . I started making use of containers, but as I have many controls in a single screen , how do we calculate the HEIGHT, WIDTH , X, Y properties for those controls dynamically, as it varies for each & every control to calculate dynamic formulas rather than static values.

Please do mention the way of doing it as this seem to be lengthy & confusing process for the whole app or what could be more easier process to achieve single app being responsive on tablet & mobile mode on teams interface.

Attaching screenshot for references of app on mobile ( not responsive & very small in design) & tablet mode.

[TheRobRush]

You will need to make those controls widths values like

App.Width

for full width, or for lets say an control thats like half the width of a screen

App.Width*.5

Similarly Height will be a variable like App.Height or App.Height*.75 (75% of app height)

For placing these controls you will need X & Y values that also are formulated. For example, this will center a control horizontally

App.Width/2-Self.Width/2

I find it helps as well to do a check in the Apps OnStart to see if app height is greater or width is greater (portrait or landscape) and set a variable I can reference throughout the app to let me further adjust where things appear on the screen for apps that I may want have slightly different layouts in portrait vs landscape. I'd recommend asking your team to remain in whichever layout they start their app in, as while there IS support for going from portrait to landscape mode baked into PowerApps, it really does not function all that will and will often get thrown off. You can also set custom numbers for your various screen SIZE ranges, and change your text size for different size screens so that everything looks beautiful no matter the device.

[Anonymous]

Thanks a lot @TheRobRush for your quick response.  So you suggest using the containers & then calculate the height , width , X& Y properties or without containers to calculate height ,width etc.. properties?

The easiest way for the scenario I mentioned please. And the explanation I asked in the separate message please.

Quick response is really appreciated.

[TheRobRush]

I never really use containers, but you can. Just personal preference as they came along well after i started with powerapps and at this point I am just used to groups. I tend to use galleries for most things, and just set everythings x, y height and width all based on App.Size

[Anonymous]

@TheRobRush thanks again. Okay so above example formulas you mentioned is without containers right?

And did you do you any settings in the display settings of the app? Like do we need to disable/enable scale to fit or lock aspect ratio ..etc. To create this responsiveness in the app.

[TheRobRush]

Yes my suggestions provided were without containers, though it would apply to them as well. Here are the default settings I tend to use per app, though I do occasionally unlock the orientation for certain apps I foresee people wanting to use in either orientation, I find these settings provide the best ability to plan screen adaptiveness