How to convert a PowerApp from one layout to another

When you create a PowerApp, you must choose which layout to use. You can pick the Phone layout or the Tablet layout.

After you have created a PowerApp in one layout, many times you also want to create it in the other layout.  Currently, there is no out of the box functionality that allows you to do this.  PowerApps can take many hours to develop when they include a lot of functionality and integrations with other systems.  You don’t want to recreate the entire PowerApp from scratch.  So how can you do it without wasting time?

Here’s the magic recipe.  In this example I have already created a mobile layout PowerApp and I convert it to a tablet layout.

1. Export the mobile layout PowerApp.
2. Create a new tablet layout PowerApp.
3. Export the tablet layout PowerApp.
4. Rename the .msapp files by adding the .zip extension.
5. Extract the mobile export file to one directory.
6. Extract the tablet export file to another directory.
7. In the mobile export directory, open the properties.json file.
8. In the tablet export directory, open the properties.json file.
9. Enter a value in the Name element in the tablet properties.json file.  This is the name of the PowerApp.
10. Copy the LocalConnectionReferences element from the mobile to the tablet file.
11. Copy the OriginatingVersion value from the mobile to the tablet file

    

12. Open the mobile export .zip file in an archive tool like WinRAR, WinZIP, etc.
13. DRAG the tablet properties.json file into the mobile export .zip file to replace the properties.json file in the archive.
    Note: You have to drag and drop the file into the archive, zipping the files in the directory will not work.
14. Close the archive tool.
15. Remove the .zip extension from the mobile export file.
16. Open PowerApps studio in the desktop or web browser.
17. Click Open.
18. Click Browse.
19. Select the mobile export .msapp file.
20. Click OK.
21. Click App Settings.
22. Click Screen size + orientation.
23. In the Size radio button, select 3:2.
24. Click Apply.
25. Click Save.
26. In the Size radio button, select 16:9.
27. Click Apply.
28. Click Save.

BOOM! Now you can start re-positioning all of your controls on the screen!

Thank’s to Todd Baginski