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:

• Install .NET Core 3.1.x (x64).
• Download the PowerApps Language Tooling Repo from Github
• Open the downloaded files and run build.cmd in PowerShell
• A new folder containing the tool called debug will appear

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.