This article is contributed. See the original author and article here.
Why?
Ever since I saw the post Source code files for Canvas apps from 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 a Page Unresponsive error 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:.
What?
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.
How?
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 tooling without 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 selecte Save as and select This computer as your destination. A popup should appear that offers you to download the .msapp file:
Save your .msapp file to a local destination
Another option is to Export the whole Power App package from the Power Apps as a ZIP file.
Export your Power App as a packaged ZIP file
In this option you need to unzip the downloaded file and find the .msapp files in a sub folder.
2) I then move the .msapp file to a folder within my Downloads folder making the file path:
C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterConfigScreen.msapp3) Make sure that you install the required .NET Core SDK version as mentioned in the Microsoft post. Then download the Power Apps Language Tooling locally to your Downloads folder:
Download the Power Apps Language Tooling tool from GitHub locally
C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-master4) Then just run the build.cmd file of the unzipped folder as Administrator to be sure:
Run the build.cmd as an Administrator
After a successful run, the bin folder will have a number of files in the directory. The following path is the one to remember for later:
C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterPowerApps-Language-Tooling-masterbinDebugPASopaPlease 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:
Run Command Prompt as administrator
6) Have a folder prepared where you want to store the unpacked .msapp files. I chose a folder next to the .msapp file again:
C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterConfigScreenSourceFiles
7) Change the directory path in the Command Prompt to the directory where the PASopa file is located using this command
cd C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterPowerApps-Language-Tooling-masterbinDebugPASopa
Result of the command to change directory path
8) Execute the following command to unpack the .msapp files to the desired folder:
pasopa -unpack C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterConfigScreen.msapp C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterConfigScreenSourceFilesNote 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:
pasopa -pack ConfigScreen.msapp C:UsersDjangoLohnDownloadsPowerApps-Language-Tooling-masterConfigScreenSourceFiles 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:!
Originally published at https://knowhere365.space/power-apps-source-code-edit-for-canvas-apps/
Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.
Recent Comments