Canvas Power Apps and version control

In Canvas Power Apps, the makers don’t really encounter anything that suggests traditional application development. Apps are not treated like a pile of code, but more like a single PowerPoint document. From the perspective of citizen developers, this is of course awesome.

But what if we wanted to take our Power Apps development in a more professional direction? The first step is to start using version control. This allows for example the comparison of changes at the code level between different versions, that are stored in version control.

Let’s take a brief look at how this works. However, before we begin, you need

• GitHub account
• Visual Studio Code
• Git tools. I downloaded Git for Windows myself. The VS Code also has its own extension (GitHub Pull Requests and Issues extension).
• PASopa.exe
• Basic understanding on how Git works and knowledge of basic commands. You can read this for example.

After these, we are ready to start!

Creating a GitHub repository

In our example, we use GitHub as our version control tool. Let’s generate a new repository for our Power Apps there.

The repository is given a name and a description, and also whether it is public or private.

Project working folder

Let’s create a folder corresponding to the repository on our personal workstation and open it with Visual Studio Code (Open folder).

Looks empty.

Let’s open the terminal in Visual Studio Code, initialize (init) the folder we opened and connect (remote add) it to the repository we created in GitHub.

git init
git remote add origin https://github.com/MyAccount/MyGitHubRepository.git

Next, our project needs some content.

Extracting the Power Apps file to a readable format

Let’s use the Power Apps from a previous post as an example .

Save it to your personal workstation (File -> Save as -> This computer).

As a result, we have a msapp file. Let’s move it to the project folder.

As such, the downloaded msapp file is not very useful. We want to extract it into a readable format. To do this, we use the new PASopa (Power Apps Source File Pack and Unpack Utility) tool.

pasopa -unpack "Editable grid vol 6.msapp"

And this is how we get the Power Apps in all its glory extracted in our working folder! The interesting part is the yaml files found under the src folder. In the picture below, you can see the yaml files corresponding to the ProjectAllocationsScreen screen. All of the controls and associated formulas from the screen are available in readable format.

For example, we can search for all the places where we handle the variable varShowPreloader.

This is nice.

Export the code to version control

Now we have a bunch of files in the folder that Git is not yet aware of. Let’s add them with the Add command.

git add --all 

Now the new files are included.

Comment the changes with the commit command, after which everything is fine on your personal workstation.

git commit -m "Add first version"

Finally, the file is moved to the GitHub repository with the push command.

git push -u origin master

Only after this step will our Power Apps code appear in GitHub.

Making a new version

A new version (Version2.0) of our Power Apps is ready. Let’s create a new branch for it, and start working with it (checkout).

git branch Version2.0
git checkout Version2.0

Let’s save the new version of the Power App (that msapp file) in the working folder over the old one. We will immediately see in VS Code that one file has been updated.

Let’s extract the downloaded msapp file with the PASopa tool. Just like we did the first time.

So what has changed in the new version compared to the previous one? We can see all of the changes in an understandable format in VS Code.

Cool!

The new version is finally added to the master branch and moved to GitHub.

git commit -a
git checkout master
git merge Version2.0
git push -u origin master

And there it is.

Making changes with VS Code

Finally, let’s make a few changes to our Power Apps directly with VS Code. This is wild!

Let’s create a new branch for this.

git branch Version3.0
git checkout Version3.0

Now, let’s change the colors from red to blue everywhere in the application. Unlike in Power Apps editor, VS Code makes this easy. One find and replace command.

After this, we will re-create the msapp file from the extracted and modified code in our working folder.

pasopa -pack "Editable grid vol 6.msapp" pathToEditableGridSourceCode

Open the generated file in Power Apps.

And yes. All red elements have been replaced by blue ones!

Summary

While all of the stuff mentioned above is really cool (at least for me), we can quickly realize what’s still wrong here.

Yes. Far too many manual actions.

But this is just the prelude. Soon the day will come, that all this is behind the scenes. Some of that is already there as an experimental feature.

Exciting things are coming.