August 30, 2024

From Visual to Code: Exploring Power Apps’ Code Preview

Written by Dela Nakhaei

With the rapid evolution of low-code platforms, Power Apps has emerged as a versatile tool empowering Citizen Developers to create and deploy applications with minimal coding. Nonetheless, professional developers often seek greater control over their application’s logic and design through direct code manipulation. Addressing this need, Power Apps introduces the Code Preview feature, initially available in experimental mode, which provides a bridge between visual design and textual coding. This blog delves into the functionality, implementation, and advantages of the Code Preview feature in Power Apps.

Overview

An overview of this blog is as follows:

Introduction to the Code Preview feature in Power Apps
Accessing the Code Preview feature
Switching between code editor and visual designer
Copying code from the editor
Benefits of using the Code Preview feature
Using code preview feature and DevOps Pipelines to deploy apps

Code Preview Feature in Power Apps

Power Apps is a low-code platform that allows Citizen Developers to create and deploy apps without writing much code. However, Developers may prefer to have more control over the app logic and design by using code instead of visual tools. For this purpose, Power Apps offers a code preview feature that allows users to write or edit YAML code for their app elements.

The code preview feature in Power Apps is now available in the experimental mode, which means that it is not fully supported or stable yet.

To turn on the experimental mode, users need to go to the Power Apps portal, click on the gear icon on the top right corner, and select “Experimental features”. Then, users need to enable the “Code preview” option and click on the “Save” button.

After turning on the code preview feature, users can access it from the Power Apps Studio. To do so, users need to open an existing app or create a new one, and then click on the “Code” button on the left sidebar. This will open a code editor where users can write or edit YAML code for their app elements. Users can also switch between the code editor and the visual designer by clicking on the “Design” button on the left sidebar.

The code preview feature does not support editing the code directly, but users can copy the code to their clipboard and paste it in another editor. To copy the code, users can either click on the “Copy Code” button on the bottom left of the code editor, or right-click on the app element and select “Copy > Copy Code”.

The code preview feature has several benefits for the app development process. Some of them are:

It allows users to write or edit code faster and easier than using the visual designer, especially for complex app logic and design.
It allows users to apply programming concepts such as variables, functions, loops, and conditionals to the app logic, which can enhance the app functionality and performance.
It allows users to quickly replicate complex features without the need for a built from scratch
It allows users to reuse code across different app elements, screens, or apps, which can reduce duplication and maintenance efforts.

This new feature, which is still in preview and novel to the power platform, will enable developers to use source control tools like GitHub for their app code. Moreover, by installing the YAML extension from Red Hat, they can also add the Power Apps Schema, which provides more IntelliSense. With the help of GitHub Copilot, they can leverage AI to generate code suggestions and speed up their app development.

Install and Setup YAML Extension in Visual Studio Code

To install the YAML extension from Red Hat in Visual Studio, users need to follow these steps:

Open Visual Studio and go to the Extensions menu. Select Manage Extensions and then search for YAML in the online section.
Click on the YAML extension by Red Hat and then click on Download. The extension will be downloaded and installed after Visual Studio is restarted.

Click on the gear icon and access “Extension Settings”. Next navigate to the Workspace tab.

Scroll to the bottom of the page and locate “Edit in settings.json” button as per screenshot below:

Add the URL below to your yaml.schemas

Exit from the page and save your changes.
After installing the extension, you can open any YAML file in Visual Studio and enjoy the syntax highlighting, validation, and autocomplete features. To enable this, select the URL below as your JSON Schema.

Alternatively, you can also use the command palette in Visual Studio to set the Power Apps Schema for their YAML file. To do this, press Ctrl+Shift+P and then type YAML: Set Schema and select it. Then, choose Power Apps from the list of schemas and click OK.

By installing the YAML extension from Red Hat, users can enhance their app development experience with Power Apps code preview feature.

DevOps Pipelines for YAML Written Power Apps

One of the limitations of the code preview feature in Power Apps is that it does not support importing or exporting YAML code for the app elements . This means that users cannot import an existing app that was written in YAML code or export their app code to a YAML file. This can pose some challenges for the app deployment and distribution process, especially when users need to Customise or modify their existing app for different customers or environments which require some modifications such as changing color schema or brandings within the app. Developers may also wish to push batches of bug fixes or new features to existing apps, using the new code preview feature.

To overcome this limitation, users can now set up a DevOps pipeline that automates the app deployment and distribution process using external tools and services.

DevOps pipelines can help users to achieve faster, safer, and more consistent app delivery, as well as better collaboration and feedback.

The following is high level example of how to design a DevOps pipeline for a Power Apps scenario where the app was written fully in YAML code, and the user needs to Customise and deploy the app for different customers or environments.

Create an Azure DevOps Project

Log in to your Azure DevOps account.
Click on the “New Project” button and provide the necessary details.

Create a Repository in Azure DevOps

Navigate to the Repos section and create a new repository for your app code.
Initialize the repository with a README.md file that describes the app’s purpose, features, and requirements.

Clone the Repository to Local Machine

Clone the Azure DevOps repository to your local machine using Git commands.
Open the repository with Visual Studio Code.

Create Branches for Customization

Create a branch for each customer or environment that requires a Customised version of the app, such as “customerA” or “dev”.
Switch to the branch and make the necessary changes to the app code, such as adding branding and color schema, using Git commands such as git checkout or git branch.

Write YAML Code for App Elements

Write the YAML code for the app elements using the code editor and the Power Apps CLI reference documentation.
Create the code files in the new branch

Test and Debug App Code

Test and debug the app code using the code editor and the Power Apps CLI commands such as pac pcf test or pac pcf start.

Commit and Push Changes to Azure DevOps Repository

Commit and push the app code changes to the Azure DevOps repository using Git commands such as git add, git commit, or git push.

Even though it is still at the early stages, the upcoming coding preview feature in Power Apps can lead to more professional application development and better and more precise development activities. This feature may however change the future of Power Apps development to be less of a “low code” or “no code” activity and more of a traditional app development activity. It may also cater less to Citizen Developers and more to Application Developers. Happy app building!