How to edit your power page directly on VS Code

Published Jul 05 2022 05:39 AM 1,513 Views
Microsoft

Context

When you think of low code development, you think of inclusive technology as this introduces a visual approach (drag-drop) to developing software. Low code development empowers a citizen developer to quickly put together custom software solutions and increase focus on high-impact business operations. On the other hand, a code-first developer takes pride in writing code, working with source control - the traditional way of software development. But what happens when code-first developers need to contribute to the same project as citizen developers? Does this imply that either the code-first developers leave their area of comfort (dev environment) and fit into the citizen developer's world of low/no code and vice versa? Absolutely not!

Microsoft introduces you to fusion development, an approach that allows code-first developers to build low code solutions without having to leave their development environments.

 

Follow along and see how you can edit your power page on visual studio code and have your simple customer facing site live in no time.

 

What you need.

Step 1: Create your power page, here is a step-by-step guide on how to do so by @Someleze_Diko  

 

Step 2: Install the Power Platform Tools Extension on Visual Studio Code

Switch to VS Code, and on the vertical tab on the left, see 1, click the extension icon and type 'Power Platform Tool' to install the extension. This action will also make the power platform Command Line Interface (CLI), also referred to as pac, available on your terminal.

Julia_Muiruri_1-1656996780334.png

Once you install the extension, verify that you have the CLI available and get its version by opening a new terminal, Ctrl+Shift+`, then type in the command below

 

pac

 

 

Julia_Muiruri_2-1656996957430.png

Step 3: Create an authentication profile to connect to your Microsoft Dataverse 

Type in the command below, click enter and follow the prompts to sign into your account to create a new authentication profile and connect it to your environment. Give your profile a name and replace the url with your instance url. 

#Students can use the M365 developer account to create their own environments

 

 

pac auth create --name GivenName --url https://InstanceUrl.crm5.dynamics.com/

 

To get your instance url, navigate to your power pages environment >> click on the gear/settings) icon (1) >> click on session details (2) >> copy the instance url (3)

Julia_Muiruri_3-1656997302342.png

 

Once you do that, you can type in the below command on your terminal to view the website(s) present in the newly added authentication account.

 

pac paportal list

 

Tip: You do not have to cram all these commands, if you need help performing a particular action, you literally just ask the terminal of help. Example

If you need to know what you can do as admin, just type pac admin help, and so on

 

Julia_Muiruri_4-1656997415814.png

 

Step 4: Download your power page to your local machine

Type in the below command to download the power page. Specify the website ID and the path to save it (see website Id at previous step - pac portal list)

 

pac paportal download -- path –- websiteId

 

 

Julia_Muiruri_5-1656997928034.png

Navigate to file explorer and open the downloaded folder in VSCode

Julia_Muiruri_6-1656998085889.png

Step 5 (Optional) : Let’s now make our files a little more appealing

Julia_Muiruri_7-1656998316620.png

Click the extensions icon on the left and the select the power platform tools extension (see 1) >> click the ‘Set File Icon Theme’ – blue button (see 2) >> then select the PowerApps Portals Icons (Visual Studio Code)

Julia_Muiruri_8-1656998478883.png

Having successfully connected to your dataverse environment, downloaded your power page and set the icon theme, next up is to simply edit your site.

 

Step 6: Edit your power page/site

Navigate to the web page that you would like to edit to see the code.

Julia_Muiruri_9-1656998698255.png

With your code ready for changes, you would need to have a live view of the updates, and this is all possible without you leaving your editor, by clicking on the preview icon on the far right, see 1 above.

Julia_Muiruri_0-1656999155149.png

 

 You can now customize your site to meet your preferences on code. I’ve made a few changes on mine.

Julia_Muiruri_1-1656999226107.png

 

Step 7: Upload your customized site to power pages

Copy the path to your downloaded folder and type in the below command on your terminal. This action will update the files that you have locally modified to the power pages.

 

 

pac paportal upload --path

 

 

Julia_Muiruri_2-1656999427127.png

 

That's all to be done. Switch back to the power pages site and preview your website to see the updates you've just made.

Julia_Muiruri_3-1656999668157.png

 

Congratulations!! You have just edited a power page as a code-first developer while still on your favorite editor. 

Happy coding! #FusionDevelopment

 

1 Comment
Co-Authors
Version history
Last update:
‎Jul 04 2022 10:50 PM
Updated by: