Help! Form disappears or looks weird on edit mode.

[office365cbm]

Hi Everyone, 

Has any of you encountered this? And how did you fix it?  This is how my form looks like on edit mode when it should look like the second image.

 

[Pstork1 · Accepted solution]

There has been a recent issue for a few users where form and screen component widths got set to zero.  You can try to reset the values yourself using the treeview.  If that doesn't work please open a support ticket.  MS is aware of the issue and working on a fix.

[office365cbm]

Thanks a lot @Pstork1 , I have opened a ticket with Microsoft. 

[Pstork1]

Here are some steps that you can use while waiting for the fix from MS.

Steps to Self-Mitigate

Using a Previous Studio Version

Depending on when the user last saved their app, they may be able to use a previous version of the studio to fix their issue.

1. In the Portal (make.powerapps.com ), go to the list of apps. Select the "More commands" button for the affected app and select "Details"
2. In the versions tab, look at the "Power Apps release" column. Verify that either:
   a. The newest Version of the app has a Power Apps release of 3.21032.0 or lower (eg: 3.21031.0, 3.21025.0, 3.21024.0, etc...)
   b. You are willing to revert to a version of the app that has a release of 3.21032.0 or lower. In this case, select the "More Commands" button for that version of the app and choose "Restore"
• If neither of the previous two apply, the user must use the ALM tool (see below) or wait for the official fix to roll out.
3. Navigate to https://create.powerapps.com/v3.21032.45.181423928/studio/#noRegionRedirect 
• If the Studio opens in an incorrect environment:
1. Open a new incognito/guest window
2. Go to https://make.powerapps.com 
3. Select the desired environment
4. Navigate to https://create.powerapps.com/v3.21032.45.181423928/studio/#noRegionRedirect 
4. Go to Open > Power Apps (Browse Power Apps) > Select the affected app
5. Select the affected screen in the tree view (it should appear normally).
6. Switch the properties pane (right side pane) to "Advanced". Check that the Height and Width properties are not blank. If they are, enter these values:
• For a blank Height, set the formula to Max(App.Height, App.MinScreenHeight).
• For a blank Width, set the formula to Max(App.Width, App.MinScreenWidth).
7. Save the app.

The app can now be opened in the latest version of the studio.

Using the ALM tool

This guide assumes that the user has never used the ALM tool (PowerApps-Lanuage-Tooling). If they have, skip to step 5.

1. Download the ALM tool from the github repository as a zip file  and unpack to the Downloads folder.
2. Download and install the .NET Core SDK 3.1 .
3. Open a command prompt and navigate to the extracted folder.
• Eg: the command is cd C:\Users\bryue\Downloads\PowerApps-Language-Tooling-master for my downloads folder
4. Run the command .\build.cmd. The command prompt will show "Build succeeded" when complete.
• Keep this command prompt open for later.
5. Export the affected app. Due to the nature of this issue, users cannot use "Save as" in the studio and must export a "known good" version of the app via the portal.
   a. In the Portal (make.powerapps.com ), go to the list of apps. Select the "More commands" button for the affected app and select "Details"
   
   b. Switch to the versions tab. Select a known good version of the app and select "Restore". Note that any version of the app that was saved or auto-saved while the issue is present should NOT be used. At this point, DO NOT open the app in the studio.
   c. Now select "Export package" for the app.
   d. Give the package any name you'd like and select "Export" in the bottom-right corner. The package will be downloaded to your computer.
6. Extract the downloaded .zip file
7. Find the .msapp file in the extracted package. You should be able to type .msapp in the search bar.
8. Copy the file to your Downloads folder and rename it to something a little more convenient, eg: BrokenApp.msapp
9. In the command prompt window run the following command, replacing <Username>:
• .\bin\Debug\PASopa\PASopa.exe -unpack C:\Users\<Username>\Downloads\BrokenApp.msapp
• This will create a folder called BrokenApp_src in your Downloads.
10. In File Explorer, navigate to BrokenApp_src\Src\ (components will be in the Components folder) and open the file with the name of the affected screen.
• If prompted, open the file with Notepad (any text editor will work).
11. Near the very top of the file are the properties for the Screen. Look for lines containing Width: = or Height: = and delete those lines. Note: Only delete the lines directly under Screen1 as Screen:.
• Example: Before and after

Screen1 as Screen:    BackgroundImage: ='Background'    Width: =    Height: =    Fill: =    OnVisible: |-        =UpdateContext({now: Now()});Screen1 as Screen:    BackgroundImage: ='Background'    Fill: =    OnVisible: |-        =UpdateContext({now: Now()});

1. Save the file.
2. Repeat steps 10 & 11 & 12 for any other affected screen/component.
3. In the command prompt, run the following command, replacing <Username>:
• .\bin\Debug\PASopa\PASopa.exe -pack C:\Users\<Username>\Downloads\FixedApp.msapp C:\Users\<Username>\Downloads\BrokenApp_src\
4. The file FixedApp.msapp can be opened in the Studio.

[office365cbm]

@Pstork1  I opened the app today and found that they are back to normal. I guess Microsoft did their magic. I appreciate your help.

[Pstork1]

I'm glad its been resolved for you.  Hopefully its better for everyone else too.

[office365cbm]

I really hope so too.