Raja Subramanian – Blogs

In this blog post let us go through the list of features available for Pro-developers and how Pro-Developers can use different tools and methods to work with Power Pages.

As we have seen earlier, Power Pages are built on the foundation of Power Apps portals. Many of the tools and methods used to configure Power Pages use the functionality of Power Apps portals.

Methods available

• Code Editor
• Power Platform CLI
• Visual Studio Code extension

Tools available

• Power Platform Command Line Interface (CLI)
• Visual Studio Code
• Integrated Terminal

Code Editor to update the Power Pages

The In-Line Code-Editor feature can be used by makers and pro-developers. This can be used by clicking the </> icon from the design studio

• The source code is displayed in the code editor pane at the bottom of the screen once code editor icon clicked
• To make changes, update the source code and then select Save then the changes will be reflected on the canvas
• To discard the changes, click on the Discard button
• The code editor supports three docking options:
  • docked on the bottom
  • docked on the right side
  • full-screen edit mode.
• The code editor canvas supports HTML editing
• To edit JavaScript or custom CSS, select Edit CSS & JS, which will take you to the Portal Management app. From there, select the Advanced tab to make any edits you want in the JavaScript and CSS sections

Power Platform CLI to update the Power Pages

App Makers and pro developers can use the Microsoft Power Platform CLI to download Power Pages site metadata and use Azure Pipelines to commit the metadata to source control and deploy from development to other environments

To connect to Power Apps portals/Power Pages, and to use Microsoft Power Platform CLI commands, use Visual Studio Code and the integrated terminal. The integrated terminal makes it easy to connect to the Dataverse environment and to download, change, and upload the portal’s configuration

1. Authenticate
2. List all the available Power Pages Site
3. Download Power Pages content
4. Change portals content
5. Upload the changes

How to Use the Visual Studio Code extension

• Install the Visual Studio Code
• Search & install the “Power Platform Tools” extension
• Open the downloaded Power Pages content by using File à Open Folder
• Go to the page on which you want to update the content and update
• Enable the “preview” icon to preview the updated content Upload the content back to the Power Pages site

Azure Pipelines/DevOps & GitHub tools can also be used for application life cycle management (ALM)

Supporting Documents

• How to install Microsoft Power Platform CLI: https://docs.microsoft.com/en-us/power-platform/developer/cli/introduction
• How to use Deployment Profiles to install the updates: https://docs.microsoft.com/en-us/power-apps/maker/portals/power-apps-cli-tutorial#upload-the-changes-using-deployment-profile
• Install Visual Studio Code: https://code.visualstudio.com/docs
• Install Integrated Terminal: https://code.visualstudio.com/docs/terminal/basics

In the next episode let us see how a Site Administrator can work and enhance the Power Pages-based external facing site.

Happy learning!!!