Toggle Visibility BUG In Improved App Rendering (final validation) Mode

[keathley]

I have an app that has been working correctly, however recently toggle visibility has stopped working (not sure which update caused this; I will try to do some more research to narrow that down.)  I do know that the issue exists in 3.18091.15 (possibly earlier versions as well).

The app has a field / toggle that when true shows other fields / toggles.  Such that if "Other Permits" is true / yes, then a list of other toggles for the various permits is shown.  By default Other Permits is false / no and the other fields are hidden (as shown below).

Upon toggling the field to yes the other fields are shown (as shown below).

Upon toggling the field to no, and then yes again the other fields are shown, but their toggles are not (mostly, one toggle does appear) (as shown below).

Setting Improved App Rendering off resolves the issue.  Setting it back on again reintroduces the issue.

For reference, the visible field on one of these toggles simply references the Other Permits toggle's value.

OtherPermitRequiredSwitch.Value

This issue is witnessed on an iOS device.  It does not occur in a web browser.

Any help would be greatly appricated.

Joey

[eddyg · Accepted solution]

@tahoon, just seen a message today in PowerApps that says "Improved app rendering is now even better and will soon replace classic rendering. Please try it again and let us know what you think."
This is refering to the Advanced Setting "Improved app rendering (final validation)" which had to be truned off in order for the "Tab" effect discussed in this post, to render correctly on an iPhone. Turning this setting off enabled the app to render on an iphone correctly.
I now see that turning it off or leaving it on, does not render correctly on an iPhone any longer and setting the DataCard height manually does not work either. Hiding or making fields visible using a button to create a "Tab" like effect is now completly broken on the iPhone.
I see that the DataCard height is now correctly set when you create a new App but this correction is still not helping with the rendering on an iPhone. I've just created an new App to test from scratch to make sure.
Rendering on a web browser is 100% fine and works as expected.

Can you pass this message on the the development team somehow?

[tahoon]

To confirm, turning off Improved app rendering results in the same problem as when it is turned on? Are the results exactly the same?

I've forwarded this to the dev team. We will make sure that this scenario is addressed before Improved app rendering permanently replaces classic rendering.

[eddyg]

It seems like the datacardkey (Field Name) is being affected this time. The height of that field gets affected. You can't seem to set it manually either as I'm guessing there are all sorts of dependencies happening in the background. Even when you change the layout to Horizontal instead of vertical, it still does not display correctly.
This is now a major issue as there is no workaround either by turning off that feature or manually setting the whole datacard height. Basically hiding a field and showing it again breaks rendering on an iPhone. Once again easy to replicate the issue. Create a new app. On the Form Edit screen, create a button that sets a variable onselect to true or false [UpdateContext({btnHideField: !btnHideField})]. Then set the visibility of 2 or 3 DataCards to this variable. Run it on an iPhone and push the button to make the fields visible/hidden a few times and see what happens.

[tahoon]

@eddyg Have you tried setting the height of the data card to a number? It works for me when I do this. Unlock the data card and go to the Advanced properties panel. Set Height=200.

[eddyg]

@tahoon. I Just created a brand new app from a sharepoint list. Added the buttons to hide datacards. Then I took one of the datacards as a test and unlocked it and set the height to 200 as you recommended. Saved and published it.
See screenshots for results. The datacardkey, is still rendering incorrectly.

[tahoon]

Thanks for taking the time to make those screenshots. Yes, the autoheight Labels are still rendered incorrectly for improved app rendering. Setting the height of the data cards will only help prevent the cards from being squashed together at the top. A reliable workaround is to disable Autoheight on the controls in the card.

Also, when I disabled improved app rendering, it works fine. The labels and cards are the correct height. I followed the steps described by you a few posts back. Sorry in advance if you already did this, but can you verify that the app you are viewing on the iPhone has improved app rendering disabled? I find that the best way to do this is to save the app using a different name because the old app might be cached on the phone.

[eddyg]

Hi @tahoon,
I've put together a very simple app to demonstrate the rendering issue when switching visibility on and off on fields in a form. I've recorded making the app and running the app in a browser. Rendering works fine in the EditForm Screen.
Then I switch over to an iPhone and run the app on there and you can see on the EditForm Screen, the rendering breaks.
I specifically disabled improved app rendering as you suggested to show you that it is still rendering incorrectly. I've built this app with very few steps so that little is changed from the out-of-box generated app. The whole video is short at only 4 and a half minutes.

Please can you have a look at the video and tell me what I'm doing wrong.

[tahoon]

Thanks @eddyg for taking the time to record a video! Not many people will bother to do that.

Unfortunately, I am unable to access the video. I get the error "This video is unavailable". Did you make it public?

[eddyg]

Hi @tahoon, my apologies. The video is now public.

[eddyg]

I finally managed to get this to work. I had a suspicion that the reason it was rendering incorrectly is because any fields that need to be hidden should, at the start of the app, have their visibility property set to true. Only when you invoke the screen that you will be hiding the fields in, should you set the visibility property to false for those fields you want to hide.

There are three requirements to make this work:

1. Use Global Variables.

2. Set an individual variable per set of hidden fields. i.e. if you want to create an effect of 3 "tabs" using a single edit form then you need 3 variables.

3. Disable improved app rendering.

If you take the very same app I created in the video and make the following changes it will render correctly on an iPhone.

1. On the very first screen of the app, set property - OnVisible - Set(Scr1, true);Set(Scr2, true)

2. On the screen you want to hiding fields in (EditForm screen), set property - OnVisible - Set(Scr2, false)

3. Same screen as above, on the Back and Forward buttons, set property - OnSelect - (back) - Set(Scr1, true);Set(Scr2, false), (forward) - Set(Scr1, false);Set(Scr2, true)

4. On the Edit Form, set the DataCard properties of the individual fields - Visible - to either Scr1 or Scr2 according to when you want to make them visible.

Making those few changes will now render the app correctly on an iPhone.

I'm not sure if this is because the visibility on all fields needs to be set to true on the start of the app or because formula validation in the Visible property strictly requires a true/false variable type rather than logic validation such as Scr=1 which is still true or false logic but the variable is not of type true/false.

Anyhow, regardless of which method you use, turning on Improved App Rendering, breaks the rendering on an iPhone and browser. In my opinion there must be a bug with in the new rendering engine or iPhone App.

If this can be verified, then at least I know I'm not going mad and hopfully save someone hours of messing around.