Use Power Fx in Power Pages (Preview)

Use Power Fx in Power Pages (Preview)

Power Fx is the low-code language used across the Microsoft Power Platform to express business logic. It is a general-purpose, strongly typed, declarative, and functional programming language.

Power Fx is written in human-friendly text and is designed to be authored directly by makers using an Excel-like formula bar. Its concise syntax makes it easy for both citizen developers and professional developers to build dynamic behavior.

Note:
Power Fx syntax in Power Pages requires formulas to begin with an equals sign (=), similar to Excel. This syntax might differ from what you are used to in Power Apps or Power Automate.

Power Fx enables collaboration across no-code, low-code, and pro-code teams by allowing logic to be written in a consistent and readable manner.

Important:
This is a preview feature. Preview features are not intended for production use and may have limited functionality. Power Fx in Power Pages is available starting from version 9.6.5.x.

Use Power Fx in Power Pages

Within a Power Pages website, Power Fx can be used as an expression language for specific components. It allows component properties to be dynamically evaluated based on Power Fx expressions.

Component Supported Properties
Text Text
Image Image URL, Alt Text
Button Button URL, Button Text
Iframe Iframe URL

Using the Power Fx Formula Bar

Components that support Power Fx include a new fx option in the toolbar. Selecting this option opens the Power Fx formula bar where expressions can be authored.

Formula Bar Components

  • A dropdown to select available component properties
  • A multiline expandable textbox for writing Power Fx formulas
  • A Reset button to revert the property to its default value
  • A Save button to persist the formula and immediately update the canvas

Formula Bar Developer Experience

The Power Fx formula bar includes several developer-focused features to improve productivity:

  • Autocomplete assistance: Suggests functions, parameters, tables, and objects. You can press Ctrl + Space to invoke it manually.
  • Problem detection: Early validation highlights errors in formulas to assist with debugging.
  • Unsaved changes dialog: Appears when navigating away with unsaved formula changes, allowing you to go back or discard changes.

Important Considerations

Start with an Equals Sign

Static text can be entered directly. However, Power Fx expressions must begin with an equals sign.

=Concatenate("Hello, ", User.FullName)

Secure Access to Dataverse Tables

Dataverse tables are accessed securely using Power Fx formulas. Ensure appropriate table permissions are configured before use. The current site user context is available through the User object.


=Concatenate(
  "Hello, ",
  First(Filter(Contacts, Contact = User.DataverseUserId)).'First Name',
  "!"
)
Note:
The User object represents a Power Pages user and does not expose the same properties as the User function in Power Apps.

Insert Dynamic Values Inside Text

To embed a dynamic value inside static text, use the following syntax: 

This text ${expression} includes a dynamic value

Example:

The total number is ${Sum(10, 20)}

Known Issues and Limitations

  • Some Power Fx functions shown in IntelliSense are not currently supported in Power Pages and may display a design-time error.
  • The User object is not initialized for anonymous users, which may cause errors. This will be addressed in a future release.
  • Button and Image URL properties may not work correctly with formulas containing double quotes in versions earlier than 9.6.5.x.

Frequently Asked Question

Should I use Power Fx instead of Liquid?

Power Fx supports certain dynamic data scenarios in a low-code manner that can also be achieved using Liquid. Since Power Fx is currently in preview, it is recommended for experimentation and development environments. Liquid is a generally available feature and offers broader capabilities, making it the preferred choice for production and complex scenarios.

Comments

Post a Comment

Popular posts from this blog

Part 1: Creating Code Apps in Power Apps - A step-by-step guide (with real errors I faced & how I fixed them)

Image
Intro In this post I’ll walk you through how I set up a code-based app for Power Apps (React/Vite front-end + Power Platform CLI for packaging/deployment), the exact errors I ran into, and how I solved them. If you want a hands-on, copy-paste able guide that covers Node versions, pac auth, environment issues, and packaging tips, this is for you. Prerequisites Microsoft 365 account with access to a Power Platform environment Node.js ( 20.19+  recommended LTS) VS Code Install power platform tools extension in VS Code. Steps: Step 1 : Open Visual Studio Code and launch the integrated terminal. Step 2: In the terminal, run the following commands one by one.   mkdir D:\CodeApps - Force cd D:\CodeApps npm create vite @latest myfirstapp -- -- template react - ts cd D:\CodeApps\myfirstapp npm install Initially, I ran the command: npm create vite@latest MyFirstApp -- --template react-ts This gave the error: Invalid package.json name The issue was caused because package...
Read more

Calling Microsoft Graph API from Power Automate Using Azure App Services – Step-by-Step Guide

Image
Step 1: You should have an Azure subscription, or if you have access to the Microsoft Entra Admin Center, you can create an app from there. This app can then be used in Power Automate to connect to Microsoft Graph API. Step 2: Click on "New registration" , provide a name for your app, assign the required API permissions (such as Microsoft Graph permissions), and then click "Register" to complete the app registration process. Step 3: After registration, you'll be redirected to the app's overview page. From there, navigate to the API permissions tab and click "Add a permission" to assign the necessary Microsoft Graph API permissions. Step 4: Select Microsoft Graph as the API, and based on your requirements, choose the appropriate permissions. In my case, I selected Application permissions , which do not require user sign-in and are suitable for background services or automation. Step 5: Select the required Microsoft Graph API permissions. Yo...
Read more

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Image
Step 1: Open Power Automate, navigate to the Custom Connectors tab, and select Create from blank as shown in the image below. custom connector(click image for better resolution) Step 2: In the General tab, upload an icon (less than 1MB), add a description, select the correct scheme (in my case, HTTPS ), and provide the host name. For example, if your API URL is https://graph.microsoft.com/v1.0/users/{email} , the host name will be the highlighted part — graph.microsoft.com . Step 3: Go to the Security tab. Here, you need to select the authentication method. Choose OAuth 2.0 as the authentication type, as shown in the image below. Step 4: Select the Identity Provider as Azure Active Directory . Check the box Enable Service Principal Support . This option allows you to create a connection using a Client ID and Client Secret instead of using the user's own authentication. Next, provide the Client ID , Client Secret , Tenant ID , and other required details as shown in t...
Read more