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

[keathley]

@mr-dang Okay I have finally narrowed this down, and I am certain it is a bug at this point.  I have also reproduced the issue in a new app.  I will comment on this again at the end of the post to explain my statement (the bug may be in app creation and not render).  Appologies up front for the lenght of the post.  I believe it would help to document step by step how to recreate the issue.

1) Create a new SharePoint list (5 columns, each a yes/no with default of no; I forgot to turn off allow attachments, so I will deal with it in a later step). 

2) Create a PowerApp from the SharePoint -> PowerApps -> Create an App menu item

3) On the Edit screen, remove / delete the Attachments card.

4) Find the name of the first toggle (here we will see it is DataCardValue8)

5) Set the visible property of each of the t2-t5 datacards to the following:

DataCardValue8.Value

Each of t2, t3, t4 and t5 are now hidden:

6) Hold ALT and toggle t1 to "on"; making t2-t5 visible again

7) Select the t2 data card, and review the "Height" property on both the formula bar and the properties panel.  Note that they have 50 and 122 respectively. I believe this is the root of the problem.

😎 Select the t2 label (not the data card) and note that its width is 

Parent.Width - 60

9) Note that my next couple of screenshots were done out of order (you will note that the label has already moved to the right even though it should not be yet by step order).  Follow the step not the image! 

Select t2's toggle button, and in the Properties panel on the right, change the Position X value from 30 to 100.

10) Select the t2 label, and in the Properties panel on the right, change the Position X value from 30 to 100.

Note that the border for the t2 label now extends beyond the canvas.

11) Using your mouse drag the width of the t2 label back inside the canvas.  I do not know if it matters or not, but I also slightly changed it's height and then tried to put it back to the original height.

Note that its Width property is now your new width.  For me it is:

375

Side note that if you change the width formula instead of dragging, it does not seem to cause the issue.  I was able in one test to change the formula from 

Parent.Width - 60

to

Parent.Width - 60 - 100

and not reproduce the issue.

12) Save and publish the app.  Open the app on an iOS device (2 times; open close, open again allowing the app to update to the latest version if you have previously opened it).

13) Use the + icon to navigate to the edit screen

14) Select the t1 toggle and turn it on.  Note that everything looks as it should at this point.

15) Select the t1 toggle and turn it off

16) Select the t1 toggle and turn it on again.  At this point my screenshot may be off.  I believe I missed a shot where it would have been missing the t2 toggle.  However, note from this one that t3, t4, and t5 are missing.  For your view all may be missing.  Realizing I missed a screenshot, I repeated steps for t3 to correct it.  You will see later shots showing this.

17) Edit the app again, change the Height property of the t2 and t3 data cards to

122

18) Save and publish again.  Close and reopen the app on an iOS device 2 times.  Repeat steps to toggle t1 on, off and on again.  Note that both t2 and t3 are fixed now.  Repeat steps to fix t4 and t5 if you like.

Commentary:  I believe the root of the problem is that the default Height of the toggle data card is in a conflicted state.  The formula bar says 50, the properties window says 122.  If you then change the X value of the toggle (which has references to its parent's Y and Height properties) and then afterwards change the X value of the label, followed by dragging the label's width around a bit, you will introduce the issue.  From there the issue occurrs on all of the other toggles that have the same visible formula.  I suspect using the drag width feature is changing another property that I did not notice / pick up on.  At this point the height of 50 (which is clearly to small) becomes and issue, causing the other toggles to be hidden.

Okay, so is this a bug?  Clearly I can fix the issue by addressing the height of the data cards (setting them to a value that is not less than the needed height).  However, I believe it is a bug for 2 reasons:

1) Previous render mode handled, showing the full card.  One could argue that the previous render mode had the bug and should have been cutting the card off 🐵

2) The default height clearly should match the actual height of the rendered card.  I did not pick heights of 50 and 122, these came from app creation (the bug is likely that the default height should probably have matched the property window).  It's not clear to me how these can be disconnected to begin with...

Hopefully that is enough detail for you to trace down the root cause.  Again, this issue only exists on the Improved App Rendering mode.  

Let me know if you need anything more,

Joey

[mr-dang]

Thanks for the very detailed steps and screenshots, @keathley. I've linked this to the same ticket BUG 3070219 and notified the team. I'll get back with any updates.

[mr-dang]

@keathley, 

Our team was not able to replicate this on iOS from your steps. It would help to know the exact model of your iOS device and its version.

Here's some more specifics:

Regarding the discrepancy in height values (50 vs 122), this is a bug in the properties panel. The value shown in the Advanced panel and formula bar is the desired value (50). The value shown in the properties panel is the actual value (122), which takes into account the autoheight of the Label. They should be the same (50) in all panels, even though the actual height is bigger.

For data cards that contain autoheight elements, the Height property is actually for minimum height.

[keathley]

@mr-dang This was witnessed on an iPhone 6 plus (model MKTY2LL/A) running 11.x, as well as 12.0.1 (updated today to try to resolve another issue).

Regarding the autoheight comment you made, I worked around the issue in my app by setting the height to each of the affected toggle's data cards to 112.  The issue is not present when I do this.

I would just note that when reproducing it in a new app myself, I had one try on the first toggle that did not produce the issue.  When I tried again on the 2nd toggle it did.  I questioned the order of my steps.  I ended up with feeling that you need to "move" the toggle before you move the label.  I tried documenting this in my steps, but if you followed the images instead of the text content you may have fallen into what I did on the first round.  And of course that could have had nothing to do with it lol.

thanks,

Joey

[tahoon]

I wonder if it is a problem with the toggle control or the form. Have you tried with checkboxes instead of toggles? Both have the same functionality.

[eddyg]

I reported this problem earlier this year in June and had no joy. I posted 2 posts and both where kind of ignored.

Post 1

Post 2

This is a general problem when working with "hidden" fields. It's really easy to replicate this bug. I've done it three times today using different SharePoint Lists and different iPhones. When I tested on a Windows Phone, the bug does not occur.

This is the process I went through to replicate this bug:

1. Create a SharePoint List
2. Create a few fields. They can be plain single line text fields.
3. Go to PowerApps and create an App from the SharePoint List you created above and wait for it to generate the App.
4. Go to the EditScreen and select the EditForm
5. Reduce the size of the EditForm from the top of the screen so that you can add some buttons
6. Create three buttons at the top called General, Status, Files. This is just an example. Any names will do.
7. Enter the formula Set(tabSelect,"General") on each button's OnSelect property. Change the formula so that it correspondes with the button's name for the buttons, Status and Files.
8. Expand the EditForm to show all the data cards.
9. Set the Visible property of a few of the DataCards to If(tabSelect="General",true,false)
   
10. Set the Visible property of a few of the DataCards to If(tabSelect="Status",true,false)
11. Set the Visible property of a few of the DataCards to If(tabSelect="Files",true,false)
12. Set the EditScreen's OnVisible property to Set(tabSelect,"General")

That's it! Nothing else needs to be done. Save and Publish. Check the App by running it in a browser. As you click on each button, the corresponding "hidden" fields will be made visible while others are made hidden. In it's basic format, this is how you would create the illusion of tabs in an standard EditForm.

Then run the App on an iPhone. The first time you go in, the fields show fine on the "General Tab". Press the Status or Files buttons and the data portion of the fields no longer show.

Here are some screenshots of the App on the iPhone. First screenshot is when you first go to the EditScreen. Second screenshot is once you press either the Status or Files button and then press the General button again.

When the EditScreen is first opened.Field Data no longer showing

As mentioned, if you go to the App Settings, Advanced Settings and turn off "Improve app rendering (final validation)" and save and publish the app. The problem goes away on an iPhone and the app works as expected.
I'm almost certain this is a bug.

Tested on

iPhone 8

iPhone PowerApps Version - 3.18103.21

iPhone iOS - 12.0.1 (16A404)

For backward compatibility, I also tested on

iPhone 6

iPhone PowerApps Version - 2.0.720

iPhone iOS - 10.3.3 (14G60)

[eddyg]

Just got off the phone with Microsoft. They have confirmed that it's a bug and it's currently being reviewed.

The workaround that they have put in place is to use the setting under the App - App Settings, Advanced Settings, turn off "Improve app rendering (final validation)".

[keathley]

Thanks @eddyg for contributing to this!  Apprecite the follow up that it is being worked as a bug.

thanks,

Joey

[tahoon]

Thanks @eddyg for the detailed steps. I am able to reproduce the bug now.

The cause is that the Form is not calculating the height of autoheight controls correctly. It uses the DataCard.Height property. When creating an app from a Sharepoint list, DataCard.Height is set to 50 by default, which is too short to show the entire contents of the card. Normally, DataCard.Height will be ignored if there are autoheight controls inside the card, but improved app rendering does not do this when card visiblity is changed.

The workaround at the moment is to set a larger value to DataCard.Height or a formula like DataCard.Height = DataCardValue.Height + DataCardKey.Height.

[eddyg]

Thanks @tahoon.

Using this formula for the DataCard.Height seemed to have worked better for me:

ErrorMessage.Y+ErrorMessage.Height

At least I know I'm not going crazy :-).