Source Control for Canvas PowerApps

Owned by Lilach (Lily) Ohana-Palgi (Unlicensed)
Last updated: Jan 27, 2023 by Le, Michelle
2 min read

This guide will help developers use Visual Studio or VS Code to have an IDE to easily explore the code base for a canvas app. You cannot make any changes to the Canvas app code from here, the editor will not recognize them and will crash.

Git repository https://dev.azure.com/transport-canada/AFCCC APSD-PAPS/_git/APSD-PAPS
Branch dev
Directory name APSD-PAPS Canvas

To login to edit canvas app:

  1. Go to the repository and click Clone

  2. Click on Generate Git Credentials to get your username and password.

Files to look at

  • DataSources folder - changes to the tables/entities

    • PowerAppsLang.json, PowerAppsLang_TimeEntry.json, Translations.json: Data has all the translations inside the Excel files

  • Src/Components folder - changes to header, spinner, wizard component

  • Src folder - changes to any of the pages (code changes are here)

 

Steps below are only for source control and viewing code changes across the entire canvas app easily (cannot make changes and have it applied to the app).

Inital Set Up

  1. Clone the APSD repo - https://dev.azure.com/transport-canada/DSD-CIVAV Support/_git/APSD-PAPS

  2. Download and install https://docs.microsoft.com/en-us/powerapps/developer/data-platform/powerapps-cli

    • Open Visual Studio Code

    • Select Extensions icon from the Activity panel. In the search bar, enter Power Platform.

    • Install Power Platform Tools.

    • Once the installation is finished, restart your Visual Studio Code.

Update Repo

  1. Open the canvas app in the editor.

  2. Click on > beside save button and click “Download a copy” to save to your computer (.msapp file).

  3. Move the .msapp file into the repo \repos\APSD-PAPS.

  4. Open Visual Studio Code and open the terminal (View > Terminal).

  5. Navigate to the repo - cd source\repos\APSD-PAPS

  6. Delete the Canvas App folder inside the repo.

  7. Unpack the app - pac canvas unpack --msapp APSD-PAPS.msapp --sources "APSD Canvas App"

  8. You can now view the changes in VS or VS Code and commit and push the changes to the repo.

Future State

How to automate the unpack step in the pipeline: https://benediktbergmann.eu/2021/03/19/unpack-canvas-apps-in-a-pipeline/

Pipeline currently exists for: https://dev.azure.com/transport-canada/AFCCC/_git/APSD-PAPS

Reference Links

https://powerapps.microsoft.com/en-us/blog/source-code-files-for-canvas-apps/

https://github.com/microsoft/PowerApps-Language-Tooling