Converting a Landscape Power App to Portrait (and Vice Versa)
So, you’ve had a request from the user to convert the whole Power App you’ve built from Landscape to Portrait, except you don’t want to spend hours converting and re-creating it or copy pasting every control.
I feel you, I understand, and I have a solution that is not perfect, but certainly will save you a lot of time.
1. From the Power Apps editor, use Save As to save the .msapp file locally
( msapp is the file extension for standalone canvas Apps)
2. In Windows File Explorer (or similar Finder tool on Mac), go to your Downloads folder
3. Right-click the File and Extract the file to a folder of the same name with whatever Zip/Archive tool you have installed:
(7zip is a free Archiving/Zip tool you can download here)
4. Inside that folder, you will see a properties.json file
Open this file with your preferred text editor.
5. The settings you are looking to change here are:
- DocumentLayoutWidth (swap Width with Height)
- DocumentLayoutHeight (swap Height with Width)
- DocumentLayoutOrientation (change to either portrait or landscape)
- DocumentAppType (change to either Phone or to DesktopOrTablet)
6. Save the properties.json file
7. Right click and Save As this Powershell script which we will use to re-combine the files.
8. Go To your Downloads folder, copy that file and paste it into to the Folder you extracted above in Step 3
9. Right Click this script and choose Run with PowerShell
10. Enter the NAME of the App, which will create a new .msapp file of that name in that folder
11. Open https://create.powerapps.com/ and click Open > Browse for File
12. Navigate to the file we created and click Open
Now you have the Power App .msapp file with the orientation converted from landscape to portrait (or vice versa) and during this converting of the file many of your items will have automatically tried to fit based on this new size, however you will still need to clean up and edit many of the properties (as I said, this just saves a lot of time from having to do EVERY item and instead does a fair number of them for you depending on how you’ve set up the properties of your objects)
As a rule of thumb (and this does not include responsive Apps), it is always best to make your Control Properties as relative items and as percentages of other things, for example using the App Width or Height or the Parent Width or Height, such as:
App.Width * 10%
As I said, I know this isn’t a perfect solution, but if you are in a pinch and need to convert a landscape Power App to portrait or from portrait to landscape then this is a fairly easy way that will also re-size many of your objects automatically.
( You can view other posts here )
Hi Sancho, Thanks for this!!
After doing this, yes the resolution and orientation change. But some default values are still treated as phone. For example all font size are kept too big, also the height of input text boxes.
Have you seen this? have you resolved it?
Is this for newly-inserted items or for items that you have already created?
Very nice. Thanks for documenting this.