{"id":1422,"date":"2017-11-09T19:45:12","date_gmt":"2017-11-10T00:45:12","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1422"},"modified":"2018-06-04T14:47:05","modified_gmt":"2018-06-04T18:47:05","slug":"how-to-convert-a-powerapp-from-one-layout-to-another","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-convert-a-powerapp-from-one-layout-to-another\/","title":{"rendered":"How to convert a PowerApp from one layout to another"},"content":{"rendered":"

When you create a PowerApp, you must choose which layout to use. You can pick the Phone layout or the Tablet layout.<\/p>\n

\"PowerApp<\/p>\n

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

Here’s the magic recipe.\u00a0 In this example I have already created a mobile layout PowerApp and I convert it to a tablet layout.<\/p>\n

    \n
  1. Export the mobile layout PowerApp.<\/li>\n
  2. Create a new tablet layout PowerApp.<\/li>\n
  3. Export the tablet layout PowerApp.<\/li>\n
  4. Rename the .msapp files by adding the .zip extension.<\/li>\n
  5. Extract the mobile export file to one directory.<\/li>\n
  6. Extract the tablet export file to another directory.<\/li>\n
  7. In the mobile export directory, open the properties.json file.<\/li>\n
  8. In the tablet export directory, open the properties.json file.<\/li>\n
  9. Enter a value in the Name element in the tablet properties.json file.\u00a0 This is the name of the PowerApp.<\/li>\n
  10. Copy the LocalConnectionReferences element from the mobile to the tablet file.<\/li>\n
  11. Copy the OriginatingVersion value from the mobile to the tablet file. \"PowerApp<\/li>\n
  12. Open the mobile export .zip file in an archive tool like WinRAR, WinZIP, etc.<\/li>\n
  13. DRAG the tablet properties.json file into the mobile export .zip file to replace the properties.json file in the archive.
    \nNote:<\/strong> You have to drag and drop the file into the archive, zipping the files in the directory will not work.<\/li>\n
  14. Close the archive tool.<\/li>\n
  15. Remove the .zip extension from the mobile export file.<\/li>\n
  16. Open PowerApps studio in the desktop or web browser.<\/li>\n
  17. Click Open.<\/li>\n
  18. Click Browse.<\/li>\n
  19. Select the mobile export .msapp file.<\/li>\n
  20. Click OK.<\/li>\n
  21. Click App Settings.<\/li>\n
  22. Click Screen size + orientation.<\/li>\n
  23. In the Size radio button, select 3:2.<\/li>\n
  24. Click Apply.<\/li>\n
  25. Click Save.<\/li>\n
  26. In the Size radio button, select 16:9.<\/li>\n
  27. Click Apply.<\/li>\n
  28. Click Save.<\/li>\n<\/ol>\n

    BOOM!<\/strong> <\/span>Now you can start re-positioning all of your controls on the screen!<\/p>\n

    Here’s a video where I demonstrate how to do it.<\/p>\n