Power Pages for Pro Developers

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 picture shows the In-Line Editor features
  • 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
The picture shows how to Edit CSS & JS

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
The picture shows the list of CLI commands
The picture shows the Authentication screen
The picture shows changing the content in the Visual Studio Code tool
The picture shows the list of CLI commands
The picture shows the updated content on Power Pages site

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
The picture shows how to install the “Power Platform Tools” extension
The picture shows how to work with the “Power Platform Tools” extension in VS code

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

Supporting Documents

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

Happy learning!!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s