Power Apps Source Code Tool

Power Apps Source Code Tool


I’ve spent the past month playing with the Power Apps source code tool and discovering all of the exciting new possibilities it presents for canvas app developers. Not only can you do things like conduct a code review using flat files or check your code into source control, there is also the ability to perform tasks Power Apps Studio cannot such as replacing variable names across the entire app.

In this article I will review the Power Apps source code tool, explain its purpose and tell you why its worth checking out.

Table of Contents:
Install the Power Apps Source Code Tool
View The Source Code Of An MSAPP File
Understanding The Structure Of An App
What Useful Things Can I Do With The Power Apps Source Code Tool?
#1 Conduct A Code Review
#2 Find Where Collections Are Being Used
#3 Replace Variable Names Across The Entire App
#4 Compare Two Files From Different Versions
#5 Count The Number Of Controls
#6 Store Power Apps Code In A Github Repo
Source Code To MSAPP File
Final Verdict And Future Possibilities
Bonus Tip: Set An Environment Variable




Install the Power Apps Source Code Tool

The tool is still experimental so installing it is not as simple as downloading and running an installer. Fortunately April Dunham has created an awesome Youtube video with step-by-step instructions on how to do it. At a high-level you will need to:




View The Source Code Of An MSAPP File


Once the source code tool is installed choose which app you want to view and then:

  • Open Power Apps Studio and Save To Computer as an msapp file
  • Browse the directory where you installed the source code tool using the Command Prompt (type cmd in the Windows search bar)
  • Write a command using these parameters to unpack the msapp into source code

pasopa -unpack PathToMsApp\FromApp.msapp ToSourceFolder



Here’s what the actual command I wrote looks like…

pasopa -unpack C:\Users\mdevaney\Downloads\MyApp.msapp C:\VSCode\sourcecodedemo



…and below you can see what happens when I execute it. Now I all of the code I wrote in Power Apps Studio can be reviewed in my VS Code editor!



Understanding The Structure Of An App

The MSAPP file gets unpacked into several folders. Below is a short description of each folder’s purpose. The most useful code is found in the Src folder (which is an abbreviation for source).

Assets – contains pictures, videos and music added to the app. You can easily copy the files from here for use in other projects.

Connections – connection references for datasources.

Datasources – datasource definitions including collections and sample data

Entropy – files needed to pack and unpack the app.

pkgs – table and control defintions.

Src – source code for screens, components and themes. A majority of the files are in YAML format to make them human readable.




What Useful Things Can I Do With The Power Apps Source Tool?

Its cool to see the underlying code for a canvas app but that’s not a good enough reason for most folks to download the tool. Let’s look at some real-world examples on why you’ll want to check it out.




#1 Conduct A Code Review

Conducting a code review on a YAML file allows you to see all of the code on a screen without having to click on each individual control. This makes it quick to look for opportunities to improve coding patterns and whether style properties are using variables or are hardcoded.

I recommend changing the syntax highlighter to C# when reading Power Apps code to make it more easily readable.




#2 Find Where Collections Are Being Used

Power Apps Studio has an excellent tool for finding where variables are being used in your code but nothing for collections. VS Code can help you find all occurrences of a collection with the Find In Files feature (Edit > Find In Files).

Searching for the collection name will retrieve all of its uses. If you only want to find where the collection was initialized look for Collect(collectionName.




#3 Replace Variable Names Across The Entire App

I suffer from variable naming regret in every app I’ve ever made. Power Apps Studio does not offer any way to make a mass edit but in VS Code you can use the Replace In Files feature (Edit > Replace In Files) to get the job done. Just a friendly reminder, its a good idea to review the impact any changes to ensure they do not break your code.




#4 Compare Two Files From Different Versions

Power Apps saves past versions of your apps in the maker portal but does not give any way to review the differences between them. By downloading and unpacking the msapp files you can perform a comparison in VS Code. To do this select both files in the Explorer pane, right-click and choose Compare Selected.



The code for each files will appear side-by-side and any differences are highlighted.




#5 Count The Number Of Controls

The more controls included in an app the less performant it will become. Microsoft has recommended a soft-limit of 500 controls in an app. If you want to know how many controls are in your app this information can be found in Entropy/Entropy.json.




#6 Store Power Apps Code In A Github Repo

Github is a free code hosting platform developers use to share code, maintain version control and collaborate with other developers. After downloading Git and signing up for a Github account you can easily save your source files there using VS Code.

Click extensions on the sidebar and choose Publish to Github.



Authorize your Github account for VS Code.



A text input field will appear at the top of the editor. Type in your new repo name and choose either a private (only people you invite) or public (anyone can view) repository.



Choose which folder to include in the repo then click OK.



Now that your files are under source control click Commit to stage the files for upload to Github.



Enter a commit message. This is brief note about what changed since the last time the source files were updated.



Finally, send the files to GitHub by clicking on the three dots (…) and choosing Push.



Open your web browser and go to Github. The files you just published will appear a repo alongside your commit message.




Source Code To MSAPP File

After making changes to the source code you can repackage into an msapp file. Open up the command prompt and browse to the folder where you installed the tool. Then type in the pack command with these parameters.

-pack  NewPathToApp.msapp PathToSourceFolder



Here’s an example of what I typed into the command line.

pasopa -pack NewMyApp.msapp C:\VSCode\sourcecodedemo



It only takes a few seconds to put everything back together. Then you can launch Power Apps Studio and open the file.




Final Verdict And Future Possibilities

The new abilities presented by the Power Apps source tool are immediately useful and I am optimistic about what might become possible in the near future. Here’s what I would like to see next:

  • Easier collaboration on canvas apps – I’ve already used the source code tool to simulate working with another developer merging the changes into the main app using Git.
  • Project templating – Scott Durow and others have been experimenting with ways to quickly initiate canvas app projects
  • Integration with Azure DevOps & Power Platform Build Tools – source code is an important big part of the application life-cycle management (ALM) and it would be awesome to automate the unpacking/packing process as opposed to doing it manually.




Bonus Tip: Set An Environment Variable

A minor annoyance I had with unpacking files is you must be in the source tool folder to run the pasopa command. But wouldn’t it be great if you could use pasopa on the command line while in any folder? This can be done by setting an environment variable on your PC (Windows).

Type enviroment variables into the Windows Search bar. Click the Environment Variables button on the System Properties dialog that appears. Then highlight the Path variable on the next dialog and click Edit.



Add a New variable with the Path to pasopa as shown below. Your path will likely be in a different location than mine.



Then you can use the pasopa command in any folder.





Questions?

If you have any questions or feedback about Power Apps Source Code Tool please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
12 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Valerie Schaffer
Valerie Schaffer
11 months ago

Thank you! I’m looking forward to diving into this post. You always give us such good tutorials. It certainly makes my life a lot easier.

Andrew
Andrew
11 months ago

Great work. This will prove very handy. I can’t wait to see where they take it and read any future tips you come up with.

David
David
11 months ago

Will definitely help to have a find and replace and compare functionality from VS, also trying to track down where everything is used will be awesome. Thanks for breaking it down and providing all the links.

Eric
Eric
10 months ago

Hi Matthew. Re: this from the article: “Easier collaboration on canvas apps – I’ve already used the source code tool to simulate working with another developer merging the changes into the main app using Git.”

I’m trying to do like you mentioned, merging 2 versions of an app together but I’m getting this exception –

“PA3002: Format is not supported. Can’t find CanvasManifest.json file – is sources an old version?”

Have you seen this one and did you resolve it? I can see the file, its sitting where it always does. In my case we took an app with 1 homescreen, and then took 2 copies. Each copy had a couple screens added. Now I want to merge them back together. I can unpack/pack the individual app folders but when I merge them, I cannot. Is there any specific change I need or to ignore? Thanks for the help!

Ben
Ben
10 months ago

Great post. Maybe I’m missing something but when copying an app from production to dev I can’t find an elegant way repoint to dev copy of sharepoint lists.

Do you think with some digging around it might be possible to repoint data sources directly in the code?

Adam Tobias
8 months ago

Hi Matthew,

Thank you for your efforts writing about this approach. I’m curious to try this out and apply this approach for future Power Apps project. Especially for SharePoint integration and Canvas apps.

Question, can this approach be applied to Power Automate solutions? Or is pasopa cmd exclusively for Power Apps?

Thanks again! I really appreciate the posts that you do and many occasion relates to the experience or strikes the right curiosity in my Power Platform journey. 🙂

Last edited 8 months ago by Adam Tobias
Thor
Thor
8 months ago

Matt, thank you. Interesting stuff. On the repackaging side… Have you explored the ability to incorporate this into a CI/CD pipeline (probably self hosted) to automate package production and possibly publishing?