Dynamic Form Resizing

[kriggo15]

I have a form on a screen with a pop-out menu. When the menu is collapsed, I'd like for it to resize and increase the amount of columns in a row. Example, the form has 3 columns when menu is out and form width is smaller and when menu is collapsed, form width is wider and has 4 columns.

Is this possible? I've been able to dynamically change the width of the columns but adjust the column count. I tried throwing the form in a layout container and it got all wonky.

[MasterB · Accepted solution]

HI @kriggo15 ,

I faced exactly the same problem. There is a dirty little hack you can do. It uses a Canvas/DataCard for the content area.

But you cannot just insert one.
Here is the hack:
Add a new screen of type "Scrollable"

Now cur the Canvas from this Screen

Now paste it to your screen you want your content.

Now you have to adjust the X property of the Canvas to you current or maybe changing Menu Width something like this (I use a custom build menu component...)

compLeftNavMenu_NewRequestForm.MenuWidth

For the Width of the Canvas Control set the Width of the Parent (which should be the screen then) minus the current menu Width

Parent.Width-compLeftNavMenu_NewRequestForm.MenuWidth

Now add all your stuff for the content area into this Canvas and it DataCards. Mine looks like this:
Unfold

Fold:

For the form use the Parent.Width (which then should be the DataCard of the Canvas as width) and rely either on the "Snap to column feature"

Or use percentage math on your form datacards to manuel control it.
Like Width of datacard and use the Parent.Width which is then the form that is dynamic to the DataCard which is dynamic to the Canvas Control which width is related to your menu width 😉 and multiply it by a dot Zero factor like:

Parent.Width*0,25

for 25% of the form width. Do this for 4 of Datacards and you will have 4 Grid columns in your form that will scale with the form width.

Hope this helps!

Code on!!!

Best

Jan aka MasterB