Power Apps Source Code Tool

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-source-code-tool/. Author: Matthew Devaney.

Power Apps Source Code Tool Posted by - Matthew Devaney on - February 14, 2021 33 Comments

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 PathToMsAppFromApp .msapp ToSourceFolder Code language: CSS ( css )

Here’s what the actual command I wrote looks like… pasopa -unpack C :UsersmdevaneyDownloadsMyApp.msapp C :VSCodesourcecodedemo Code language: CSS ( css )

…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 Code language: CSS ( css )

Here’s an example of what I typed into the command line. pasopa -pack NewMyApp .msapp C :VSCodesourcecodedemo Code language: CSS ( css )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Github Pro-Developers Source Code Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps