Visual Studio Code Extension for PowerApps Portal | Power Apps CLI with Portals

Introduction:

In this blog, we will understand how we can use Power Apps CLI with PowerApps Portal. We will also see how we can edit the PowerApps Portal using Power Platform VS Code Extension.

Prerequisites:

1. Install Visual Studio Code
2. Install Power Apps CLI

Steps to Install PowerApps CLI:

1. Go to https://docs.microsoft.com/en-us/powerapps/developer/data-platform/powerapps-cli.
2. Click on Powe Apps CLI to download.

3. Once it is downloaded, right-click on it and click on Install.

4. Accept the license agreement and click on Install.

5. Click on Finish to exit.

Steps to Download PowerApps Portal Content

1. Open VS Code.
2. Go to Terminals and Click on New Terminal

3. Run below command in terminal. (this command helps you to take advantage of all the latest capabilities, update the Power Apps CLI tooling to the latest version)

pac install latest

• You can see it is successfully installed.

4. Run the below command to connect with your dataverse environment.

pac auth create --url https://Myorg.crm.dynamics.com

NOTE: Replace the URL with your organization URL.

• Enter your credentials and click on sign in.

• After successful sign in you should see as per below:

5. Run the below command to get the list of PowerApps Portal in your instance

pac paportal list

• You can see all the portals of your instance.

• Copy the WebsiteId of Portal.

6. Run the below command to download the portal content.

pac paportal download --path "D:\portals" --webSiteId d78574f9-20c3-4dcc-8d8d-85cf5b7ac141

NOTE:

• Specify the path where you want to download the portal content.
• Replace the websiteId with your websiteId

• You can see content is downloaded successfully.

• Content is downloaded in the portals folder inside the D drive as we had specified.  

7. Once we have successfully downloaded the portal content, Go to VS Code, Click on File–> Open Folder.

8. select the folder which we have downloaded

Installing Power Platform VS Code Extension

1. Go to Extensions, Search for Power Platform VS Code Extension and select that and click on Install.

Changing the Content in VS Code

1. select the webpage which you want to modify.

2. I am adding an entity list on this page, as you can see it provides an IntelliSense to add that which makes it easier to add.

3. You can also preview this page inside VS Code. Click on the preview icon which is on the top-right corner of the screen.

4. The preview pane opens on the right side of the page.

Uploading Changes in dataverse Environment

1. Add below command to upload this changes.

pac paportal upload --path D:\portals\custom-portal\

NOTE: Specify your path

• You can see portal content is successfully uploaded.

Viewing Changes in PowerApps Portal

1. Clear the cache of portal. (<YourPortalURL>/_services/about)

2. Navigate to the webpage where you have made the changes.

You can see changes are done successfully.

Resources:

1. https://docs.microsoft.com/en-us/powerapps/maker/portals/power-apps-cli-tutorial
2. https://docs.microsoft.com/en-us/powerapps/maker/portals/vs-code-extension