Dynamically change column count of an Edit-/Detailform depending on screen orientation

[Mahar92]

Hello there.

I am currently making the App I am creating responsive, so that it works both on vertical and horizontal screens (in the settings, however, the App display mode is set to portrait).

This is how the EditForm looks like on a mobile phone:

This is how it looks like on a computer screen:

 

It would be ideal, however, if I could display multiple columns in horizontal mode while there is only one column in vertical mode. Fortunately, the form has the property "Columns", where I can adjust just that:

The problem is, however, that I cannot seem to change this property dynamically. It simply does not show up in the list of properties. Hence I end up with a fixed number of columns regardless of the screen orientation. Is there a solution to this?

[RusselThomas · Accepted solution]

Hi @Mahar92 ,

You cannot dynamically edit the "Columns" property, but if you disable "Scale to fit" in the settings, you can dynamically control your form fields using references to the orientation or screensize.  If you're already using orientation, then it should be disabled already as this is a dynamic layout feature, but in case not, please create a backup of your app before changing the layout settings.

A few things to remember:

• To keep things neat, try and ensure your form width is always a multiple of a standard card width.  In other words, if your cards are 640 wide in portrait (default for mobile I think), always ensure your form width is precisely a multiple of 640 wide - never more, never less - no matter what the screen width is.  This reduces 'blank spots' on the right hand side of your form where a card just can't fit there, so instead you're left with the blank space.
• The Y-position of cards are funny in that they ultimately express their order of appearance as opposed to what you'd normally expect - i.e. pixel coordinates - cards are sorted according to this value, so you can use/abuse this to get the results you want.

Try this;

• Disable scale to fit if in your settings if it's not already off (remember to backup first).
• The next two steps are optional if you want to reduce whitespace in your form - if you don't care, just set your Form Width to Parent.Width.  If you do care, and assuming a default portrait screen width of 640, set your Form Width to the following;

If(Parent.Orientation = Layout.Vertical, Parent.Width, RoundDown(Parent.Width/640, 0) * 640)

This will ensure that your form will always be a multiple of 640 wide. 

• If you do this, then another thing to sort out is to center the form on the page - because the multiple of 640 will always be smaller than the actual width of the screen (thanks to RoundDown) then your form will end up hanging onto the left of the screen.  To avoid this, center it but setting the  X: property of your form to 

(Parent.Width - Self.Width)/2

As I said, the previous two steps are not necessary if you don't care about white space in your form.

Next you have two options - a slightly tricky easy way, or a easier but more tedious way.

The objective is to set all card Y: properties to 0.  The slightly tricky easy way requires you to select all the cards in your form- it's tricky because you cannot do this using control + click on the canvas itself.  You must use the tree navigation on the left and, holding down control, select each card.  Note that the very first control + click clears the current selection, so you need to control + click the first card you were on to include it in the selection.

With them all selected, use the property navigation dropdown next to the formula bar to select the Y property.

Set this to 0. 

Or select them one by one and set each Y: property to 0 - up to you 😁

Try that and see if you get any joy?  (A good way to test is to play the app from studio and just resize your browser window)

Kind regards,

RT

[Mahar92]

First of all, Russel, thank you very much vor taking your time!

The key to solving this is, as you have said, applying the same Y value to multiple controls. I am now very happy with how I can make the app compatible in all orientation modes. Have a look:

[RusselThomas]

Looks good!