cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
keathley
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

@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). 

SharePointList.png

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

CreateAppMenuItem.png

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

Attachments.png

 

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

FirstToggle.png

 

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:

VisibleSet.png

 

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

t1on.png

 

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.

SizeDiscrepancy.png

 

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

Parent.Width - 60

NoteWidth.png

 

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.

setxontoggle.png

 

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

changeX.png

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.

dragwidth.png

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

IMG_9686.PNG

 

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

IMG_9685.PNG

15) Select the t1 toggle and turn it off

IMG_9686.PNG

 

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.

IMG_9688.PNG

 

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

122


fixheight.pngfixt3height.png

 

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.

IMG_9689.PNG

 

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
Level 10

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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.

Microsoft Employee
@8bitclassroom
mr-dang
Level 10

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

@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.

 

Microsoft Employee
@8bitclassroom
keathley
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

@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

PowerApps Staff tahoon
PowerApps Staff

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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 buttonsEditScreen.PNG
  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.

 

IMG_0286.PNGWhen the EditScreen is first opened.IMG_0287.PNGField 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
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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

 

thanks,

Joey

PowerApps Staff tahoon
PowerApps Staff

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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
Level: Powered On

Re: Toggle Visibility Issue In Improved App Rendering (final validation) Mode

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 :-).

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 407 members 5,504 guests
Please welcome our newest community members: