Power Apps: source code edit for Canvas Apps in Visual Studio Code

Why?

In April, I showed how to unpack and repack Power Apps .msapp files of Canvas Apps in the blog post Power Apps: source code edit for Canvas Apps ยป Knowhere365. Using this functionality, we can view and edit the source code of Canvas Apps. In a recent announcement last week (Canvas source code tool integrated with Power Platform CLI | Microsoft Power Apps), Microsoft announced that the same functionalities are now available within the Power Platform VS Code Extension of Visual Studio Code!

Image: Power Platform VS Code Extension in the Visual Studio Marketplace

This means that after installing this extension, we can do the same unpacking and packing without leaving Visual Studio Code ๐Ÿ˜Ž

What?

This posts will show how easy it is to use Visual Studio Code so we can unpack and (re)pack .msapp files of Canvas Apps:

Image: New Commands compared to Old Commands for (un)packing .msapp files

How?

1) First install the Power Platform VS Code Extension in your Visual Studio Code Client using the Visual Studio Marketplace (Power Platform VS Code Extension – Visual Studio Marketplace).

Image: search for Power Platform in the Visual Studio Marketplace and install the Extension

2) After installing the extension a computer restart may be required. We can from this moment on, run commands from within Visual Studio using the built-in Terminal.
In my example I saved the text file with commands as a Power Shell file (.ps1). In this type of files, short cuts like F8 can be used to run selected commands:

Image: running commands from a Power Shell file directly using the built-in Terminal in a Visual Studio Code session

Notice the improved commands where referencing (input and output) files is much easier now!

Image: output of commands using the built-in Terminal in a Visual Studio Code session

In the Marketplace screenshot above, you can see that the extension is in Preview at the moment.
Please be aware of this and read the announcement link above on how to report issues ๐Ÿ’ช๐Ÿ‘

Leave a comment