How to prevent empty space in power apps when fields are hidden

[Lucy_Power311]

Hi everyone,

I have an app where fields are hidden depending on options users can choose. Power Apps does hide the fields but does not fill the empty space with other visible fields so there is empty space. Depending on the user's choice the empty space is very large, the user scrolls down a lot until the rest of the fields come. This is not a good user experience. Arranging the fields in a way that hidden fields come at the end of the screen does also make not much sense. Also switching between several screens is not a good solution, the user is supposed to see all his/her entries on one screen.  Is there any solution you might have for me?

Thanks a lot for your help!

Lucy_Power311

[iAm_ManCat]

Hi @Lucy_Power311,

If you have your items vertically above/below each other, you can use some logic in their y coordinates to move them up if another control is hidden, so for example if you have the following controls:

A

B

C

D

As an example, D's Y value then becomes:

If(
    A.Visible, 
    (A.Y + A.Height) +
    If(B.Visible,
        (B.Y + B.Height),
        0
    ) +
    If(C.Visible, 
        (C.Y + C.Height),
        0
    ), 
    0
)

So you can make the Y value of each item depend on whether each of the items above it are visible, that way they will automatically move up if one of the higher items is visible.

Hope this helps!

Cheers,

Sancho

[Lucy_Power311]

Hi @iAm_ManCat 

thanks that sounds great for items shown vertically! My items are shown in three columns and 15 lines, so 

A B C
D E F 
......

In worst case 9 lines have to be hidden and would be empty space within the screen. 
Any idea how to solve that?

Thanks a lot!
KR, Lucy

[iAm_ManCat]

Ok, well in that case you'd accommodate for each previous row's grouped visible values then,

so if it's

ABC

DEF

GHI

So for the second row's first item we look adding the heights of any visible items (the max is used to get the highest of all of the visible items), and if there aren't any then that will mean the second row will start at the Y value of the first

D.Y=

A.Y + Max(If(A.Visible, A.Y, 0), If(B.Visible, B.Y, 0), If(C.Visible, C.Y, 0))

E.Y=

D.Y

F.Y=

D.Y

Then when we move onto the next row (GHI) we only need to reference the previous row's values, as they will already be adjusted based on their own previous row:

G.Y=

D.Y + Max(If(D.Visible, D.Y, 0), If(E.Visible, E.Y, 0), If(F.Visible, F.Y, 0))

and so on and so on for all the rest of the rows - try it and then come back and ask if you encounter any issues 🙂

[Lucy_Power311]

Thanks @iAm_ManCat 
I will give it a try and let you know. 
It's surprising that there is no standard function in power apps, I think it's very common that items are hidden and the view shall adapt. A huge manual effort. 

[iAm_ManCat · Accepted solution]

Yes the power and curse simultaneously - we are given absolute control to the pixel level for canvas apps, but that also means standard functions like that can't exist for things like forms - you can make your form manually using containers and then Patch statements, but then you lose the ability of absolute pixel control as they will automatically adjust within the container and so if you want them laid out a certain way that's not really going to work, but it will allow it to automatically adjust

[iAm_ManCat · Accepted solution]

I've attached an example App with containers where you can see how it would be easier to determine the visibility as we can hide/show whole rows, however we then lose the ability to place items explicitly as they are now in a responsive container. Additionally, we would have to use a Patch command to submit rather than using a form's submit function.