Power Apps, GitHub and Visual Studio Code

In the previous post, we reviewed the new (experimental) feature in Canvas Power Apps that makes it easy to integrate Power Apps with Git version control.

Let’s continue with the same theme, and include Visual Studio Code in the mix. It’s an excellent free editor. I use it actively, although I only utilize a small portion of it’s features.

The idea is to make changes to Power Apps directly with VS Code.

Connecting Power Apps to GitHub

For our example, we have a repository in GitHub called PowerAppsProjects.

In addition, we have a Power App that is connected to the same Git repository.

Now let’s go over how we are able to edit Power Apps directly from VS Code.

Power Apps  Visual Studio Code

The Visual Studio Code installation package can be found here. Also the Git tools should be installed on the workstation.

Before the fun can begin, we must make some tedious preparations.

Defining a GitHub identity

After the installation, open VS Code and from a new terminal window, configure your personal information.

git config --global user.name "Timo Pertilä"
git config --global user.email timo.pertila@forwardforever.com

This identity information is used when exporting changes to GitHub.

Working directory

Let’s create a directory on the workstation for Power Apps projects (PowerAppsGit) stored on GitHub, and open this directory in VS Code (Open Folder).

Of course, there is nothing in the directory yet.

Let’s go to the version control section. VS Code notices that the folder is not connected to version control and suggests Initialize Repository. Let’s do so.

After initialization, everything is still empty. That’s because the directory is not yet connected to any GitHub repositories.

Copying the contents of a repository to a directory

Let’s start by retrieving the contents of the repository we want from GitHub to our working directory. This is accomplished with the Clone function. The command can be executed from the command line (terminal) of the VS Code or from the version control tab behind the three dots.

Let’s specify the URL where the repository can be found to VS Code.

For some reason, we also have to specify which workstation directory we are using. Let’s choose the same one we are already in.

Only the README.md file appears in the directory. because there is nothing else in the master branch of our repository.

Let’s move to the branch where we sync our apps from Power Apps studio (main).

Click on the “master” text in the bottom left (1) and select the right branch (origin/main (2)).

This will display the code for the application (Book catalog) found in the main branch.

Looks promising so far!

Making changes with VS Code

Our app has two screens. Let’s rename the controls in them. We can do this easily by editing the screen files (Screen1.fx.yaml and Screen2.fx.yaml).

After saving, the changes will automatically appear in the version control section under Changes.

But what did we change?

We can easily see the changes by pressing the letter M next to the edited file. The versions found in version control and on our workstation open side by side.

The differences between the two are highlighted.

Let’s keep making changes, and switch the application font to Arial.

In practice, we want to replace a particular string with another one in all files. The Replace in Files function sounds about right.

Let’s replace “Font: = Font.’Segoe UI ‘ ” with “Font: = Font.’Arial’ ”.

VS Code tells us that the searched string can be found in 35 places. Let’s press the Replace All icon to make the changes.

Let’s also make the following changes

• Set the thickness of the edges of text fields (BorderThickness) to 1
• Set the active control edge thickness (FocusedBorderThickness) to 1
• Change gray color RGBA (105, 121, 126, 1) to black RGBA (0, 0, 0, 1)
• Change blue color RGBA (56, 96, 178, 1) to red RGBA (190, 0, 39, 1)

In the past, these kinds of changes have always been made manually.

The code for the screens has now been heavily edited.

Exporting changes to GitHub

Finally, we want to export the changes to version control. Let’s select “Commit All” behind the three dots.

Yes, we want to commit the changes.

It’s always a good idea to include comments on changes you make.

The changes have only been confirmed. They have not yet been exported to GitHub. This is done by synchronizing the committed changes.

And finally the changes are visible!

Modified application in Power Apps Studio

The same Power App has been open all along in the Power Apps studio. Let’s update the application with the changes found on GitHub (Sync button).

And yes. Colors, fonts, and borders change.

But why does the app show an error (red ball)? We edited the control names with VS Code. However, controls often have references to other controls. We should also have renamed them with the Replace in files command. Now we got broken references.

Importing changes to VS Code

How does the process work in the other direction?

Let’s update the screen names to the correct ones in Power Apps Studio.

After saving/syncing, the changes are also found in GitHub.

But how do we download the changes to VS Code?

This is simple. By pressing the sync button at the bottom left.

Note that while syncing the (committed) changes in VS Code will also be exported to GitHub.

Summary

Editing Power Apps with VS Code is, at best, a really powerful way to make changes. Is that the way for a citizen developer? Well no.

I don’t even want to know what happens when someone accidentally edits files that shouldn’t be edited. Everything is stored on GitHub, but there will likely be interesting situations when a citizen developer who is not familiar with Git tries to fix the mistakes.

And mass changes are not always easy anyway. If the application uses a default theme, no font, padding, etc. are defined for the controls. Then it’s not so easy to Find and Replace…