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.
Don’t miss the chance to participate in the upcoming Internship Program which will be done using Microsoft Dot Net Web Development Full Stack Technology. The new batch will be starting from May 20, 2024. We will have most experienced trainers for you to successfully complete the internship with live project experience.
Why to choose Our Internship Program?
Industry-Relevant Projects
Tailored Assignments: We offer projects that align with your academic background and career aspirations.
Real-World Challenges: Tackle industry-specific problems and contribute to meaningful projects that make a difference.
Professional Mentorship
Guidance from Experts: Benefit from one-on-one mentorship from seasoned professionals in your field.
Career Development Workshops: Participate in workshops that focus on resume building, interview skills, and career planning.
Networking Opportunities
Connect with Industry Leaders: Build relationships with professionals and expand your professional network.
Peer Interaction: Collaborate with fellow interns and exchange ideas, fostering a supportive and collaborative environment.
Skill Enhancement
Hands-On Experience: Gain practical skills and learn new technologies through project-based learning.
Soft Skills Development: Enhance communication, teamwork, and problem-solving skills essential for career success.
Free Demo Class Available
