Show/Hide Details of DisplayForm - Variable Height

[DefinitelyNoBot]

Hello everyone,

I have the following setting. In my app I have a screen which uses a display form to show the details of a gallery item. I have a button which shows/hides certain details of the item so the user can have more space for other elements of the screen. The OnSelect of the button is simple:

UpdateContext({var_showDetails_History: !var_showDetails_History})

The results look as follows:

Details hidden:

Details shown:

Now, the entries of the displayed item can have variable height but the above example has a hardcoded height for the form (note the space between the last line and the grey button). The height property of the display form in above examples is set to

If(var_showDetails_History; 365; ID_Arbeitsgeraete_DataCard1.Height)

and I tried to set the hardcoded 365 to

ID_Arbeitsgeraete_DataCard1.Height + Seriennummer_DataCard2.Height + Datum_Erhalt_DataCard2.Height +  Bemerkung_DataCard2.Height

which defines the height needed to display all entries.

This change results in no height changes when trying to expand the details. However, the first time after changing the property in the editor it shows the correct height and collapses properly when pressing the button, but it does not expand again.

The visibility property of the 1st row's entries is set to true and for the others it is set to var_showDetails_History, to avoid scrolling to the hidden details. My suspicion regarding the error is:

Details hidden -> press Button -> var_showDetails_History is updated -> height of the display form is updated -> visibility of the display form entries is updated ==> because the height is calculated when the entries are still invisible, it only has the height of the first row (which is always visible).

I tried the following OnView property for the screen to try capturing the height of the entries when visible but that did not work either:

UpdateContext({var_showDetails_History: true});;
UpdateContext({var_DisplayForm_maxHeight: ID_Arbeitsgeraete_DataCard1.Height + Seriennummer_DataCard2.Height + Datum_Erhalt_DataCard2.Height +  Bemerkung_DataCard2.Height});;
UpdateContext({var_showDetails_History: false})

Any ideas or hints on how to solve this would be highly appreciated.

[Drrickryp]

@DefinitelyNoBot 

Does this solution work for you? https://powerusers.microsoft.com/t5/Building-Power-Apps/Collapsible-Power-App-Sections-with-Form-Ele... 

[DefinitelyNoBot]

@DrrickrypThank you for the suggestion! It is neat to have the expansion bar within the display form and I learned and implemented something new there. Unfortunately, that does not address the problem of the variable form height (meaning that the expanded form can have different sizes depending on the entry you are looking at).

Since opening the app again today, the app behaves differently than described above. It now updates the form height when trying to expand. It somehow retains the height from a previously viewed entry for the first expansion. The reproduction of the bug goes as follows:

Start app --> select item (Item1) to view from gallery (main screen) --> display form for Item1 the shows in collapsed form (view screen) --> expand display form: form expands but not to the correct height --> collapse display form: works as intended --> expand display form: works as intended [--> optional: collapse the form again] --> go back to main screen and select different item (Item2)--> display form for Item2 the shows in collapsed form (view screen) --> expand display form: form expands but with the expanded height for Item1 --> collapse form: works as intended --> expand form: works as intended

In short: the first expansion of the form seems to take the height values of the previously selected item and it does not matter whether or not I collapse the form of Item1 before going back to the main screen and selecting Item2.

I have not found any documentation on the internal processing order of PowerApps so far. Does anyone know about further information in that regard? I am completely self taught so far, so I don't know if this is covered in any of the Microsoft courses that exist on PowerApps.

[DefinitelyNoBot · Accepted solution]

Okay, so I found something that works. It is a pretty dirty workaround in my opinion, so if anyone has a better suggestion, please let me know!

In my last post I described that the problem disappears after clicking the button again until I change the screen again. So I implemented a hidden timer which literally presses the button three times to expand and collapse the form. Since it does not look nice/well-designed to see the form expanding and collapsing I added an intransparent loading overlay. I did this as follows:

Screen property

• OnVisible: UpdateContext({var_showDetails_History: false; var_TimerReps: 0})

Timer properties

• Duration: 10
• OnTimerEnd: If( var_TimerReps <4; Select(box_OnSelectCover_1));; UpdateContext({var_TimerReps: var_TimerReps +1})
• Repeat: If(var_TimerReps <5; true; false)
• Reset: true

 Overlay property:

• Visible: If( var_TimerReps < 5; true; false)

The Overlay takes an extra repetition to disappear so that the last collapse is not accidentally shown.

Maybe this is helpful to someone at some point 😉