Ever since I saw the postSource code files for Canvas appsfrom Microsoft, I thought this might come in handy for some of my Canvas Apps. As a non-coding Citizen Developer, I just thought that day would be more in the future. A day when this feature would not be experimental anymore but general available :beaming_face_with_smiling_eyes:.
One of my customers created a Power App with too many screens, too many data sources and too many controls referencing each other. The result was a Power Apps Studio with aPage Unresponsiveerror when when opening specific screens:
This left us with no way to clean up the latest version of the Canvas App through the Studio anymore :cross_mark::face_without_mouth::cross_mark:.
This post adds information on how to edit Power Apps source code for Canvas Apps. It will also show you that GitHub it is not per se needed.
I still recommend to read the Microsoft post first. There is a lot of potential in using GitHub as your code repository. There are also some Youtube video’s on how to perform most of the steps explained in further detail. This post just focuses on how to use the toolingwithout a GitHub setup.
1) First step is to download the .msapp file of your Canvas App. The .msapp file is like a bundled package of multiple kind of files (.json, .xml and .yaml), making up your whole Power App :woman_technologist:.
You can download your .msapp file by opening the Power App in the online Studio. Then selecteSave asand selectThis computeras your destination. A popup should appear that offers you to download the .msapp file: Save your .msapp file to a local destination
2) I then move the .msapp file to a folder within my Downloads folder making the file path:
Please note that your directory path may be different at the beginning, but from the last \PowerApps-Langauage-Tooling-master\ section it should be the same. The PASopa file is where the magic happens.
5) Now open the default Windows Command Prompt and Run as adminisrator:
6) Have a folder prepared where you want to store the unpacked .msapp files. I chose a folder next to the .msapp file again:
Note that the first directory is that of the .msapp file. The second directory is that of the folder where we want to unpack the separate files. Warnings may occur because of checksums built in by the developers. However in the end, the folder with the unpacked .msapp file will have a default content structure:
With a tool like Notepad++ or my personal favorite Visual Studio Code, you can edit the individual files. This is how you edit Power Apps source code of Canvas Apps. I prefer Visual Studio Code because you can open up a whole folder in one go:
Visual Studio Code opening a whole Folder and Sub Folders to edit individual files
When this is all done, you can just repack the files with a command like:
If you are more observant than I was, you will have noticed that this command does not give an output directory… so where did the new repacked .msapp file go?? It gives you the new .msapp file in the PASopa directory:
The repacked ZIP file can be imported in the online Studio. This import will then update the existing Power App to a new version. Never thought I would say this as if I know how to develop code but –> happy coding :flexed_biceps::nerd_face::thumbs_up:!