Use Visual Studio Code for Power Portal app editing and development
In this blog, we will see how we can use Power Apps CLI with PowerApps Portal and how we can edit the PowerApps Portal using Power Platform VS Code Extension.
Visual Studio Code (VS Code) is a powerful source code editor that runs on your desktop and with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
To start this you need to install below extensions. if you already installed you can skip installing.
Once the above tools are installed you can now Download Power Apps Portal content using Power Apps CLI commands in Visual Studio Code.
Step:1-Prepare Visual Studio and Write Command
Open visual studio code and Go to Terminal and click on New Terminal.
This will open the Terminal where we can write our commands to create authorization objects to connect Power APPs so that we can download content.
Run below command in terminal to connect Data Verse. Use your Org URL below. You can get this URL from Developer Resource area or can copy from browser from any model driven app till .COM.
pac auth create --url https://Myorg.crm.dynamics.com
It will open the login panel to provide your credential.
Click Sign In after credentials provided. Now it will connect to Data Verse.
Run the below command to get the list of PowerApps Portal in your instance.
pac paportal list
Now it will list out all portals of your Data verse environment.
Note the WebSiteId for your portal you want to edit. Run the below command to download the portal content. You have to specify a local folder path where the portal contents will be downloded.
pac paportal download --path "C:\portals" --webSiteId d78574f9-20c3-4dcc-8d8d-85cf5b7ac141
After you run the above command it will download all the content of your power portal.
Now if you navigate to your local folder you can see the portal content as given below.
We are now ready to edit.
Step:2-Open the Portal contents and Edit with Visual Studio Extension
GO to Visual Studio code and Click File menu and open the portal folder which contains all content. Once you open it will prompt you that whether the folder is trusted. Select Yes.
Now you will see all the files will be displayed in tree view in Visual Studio code.
Now Install Visual Studio Code Power Portal Extension.
Go to Extensions, Search for Power Platform VS Code Extension and select that and click on Install and also click Set File Icon from Theme and choose Power APP Portal Icon from the list. Done.
Now we are ready to edit our files and click on preview option at the right top section and you can see the preview of the portal webpage inside the Visual studio code.
Now the preview will look like this. You can also use liquid tags as per your need and it will give Intellisense inside the page.
Now we are ready to upload edited files back to Data Verse. use below command to upload.
Step:3-Uploading Portal content back to Dataverse.
Add below command to upload this changes. You need to specify the folder path which contains all files as below.
pac paportal upload --path C:\portals\custom-portal\
After the portal content uploaded the success message will appewar.
Now you can clear the Cache to see the updated portal page. You can use sever site cache clear by using below URL.
Clear the cache of portal. <YourPortalURL>/_services/about
Now you can test your page.
Now you can use Visual Studio Code for Portal Editing with Intellisense. A Great Power Portal Editing Option.
