Blog

Code - The new easier way to pack and unpack canvas app source code

If you're building canvas apps from source code, there's now a much easier way to unpack the source from a source MSAPP file, thanks to the "Power Platform VS Code Extension" for Visual Studio Code. This post describes this new feature.

The 'Power Platform VS Code Extension' now includes a version of the CLI (command line interface) with a version of the pac command that includes canvas app support.

What this means is that we can now unpack and pack canvas app source code, simply by installing Visual Studio Code and adding the 'Power Platform VS Code Extension'. Unlike before, there's no need to install additional pre-requesite components.

The extra benefit is that the 'Power Platform VS Code Extension' also adds intellisense support, to simplify the whole process of building canvas apps with code.

Let's now look at this feature in a bit more detail.

Setting up a machine to unpack/pack source code

To setup a machine to unpack/pack source code, we download and install Visual Studio Code from the following link:

https://code.visualstudio.com/Download

On a Windows machine, the downloaded file is 76MB, and the installation requires just under 200MB disk space.

Once Visual Studio Code is installed, we click the extensions icon from the left hand pane (the icon with 4 rectangles), and search for the 'Power Platform VS Code Extension'. As the screenshot beneath shows, the installation of the extension adds pac CLI 1.6.7 (the version that first includes the version of pac with canvas app support).


How to unpack an MSAPP file

To unpack an msapp file, we run start a new terminal window by clicking the Terminal > New terminal menu item, and running the following command:

pac canvas unpack --msapp C:\PowerApps\MSAppFiles\IssueAppSQL.msapp 
                  --sources C:\PowerApps\ProjectFiles\IssueAppSQL

The command above unpacks the msapp file from the following source location, to the target destination folder

  • Source msapp file: C:\PowerApps\MSAppFiles\IssueAppSQL.msapp
  • Target output folder: C:\PowerApps\ProjectFiles\IssueAppSQL
 

Editing the source with the VS Code extension

We can now edit our source code in the same Visual Studio code window by typing the following command:

code -r C:\PowerApps\ProjectFiles\IssueAppSQL

As the screenshot beneath shows, the extension shows intellisense suggestions for control attributes. At the moment, it doesn't provide code suggestions for formulas (eg, function name suggestions and code completion for the values of an OnSelect property).

Packing the an MSAPP file

The command to pack our code project into an output file called IssueAppSQLNew.msapp looks like this:

pac canvas pack  --sources C:\PowerApps\ProjectFiles\IssueAppSQL
                 --msapp C:\PowerApps\MSAppFiles\IssueAppSQL.msapp

Conclusion

The "Power Platform VS Code Extension" for Visual Studio Code now makes it easier to build canvas apps from code. It adds basic intellisense and code completion for canvas apps objects, and it includes an updated version of the CLI that we can use to pack/unpack msapp files by calling the pac command.
  •   Categories: 
  • code
Previous
Next
Related posts