Exercise - Build a Power Fx function and integrate with a canvas app

  • 5 minutes

In this exercise, you create a Power Fx function and then invoke it from a canvas app. You learn how to configure a function to receive input parameters from the app, dynamically retrieve data from Dataverse tables, and return an output parameter to your app. The following video takes you through the steps for this 6 exercise. The detailed instructions are listed in the following exercise.

Scenario

In this exercise, you work for a retail company that offers free delivery on orders with a subtotal of 25 dollars or more. To ensure that the system applies the discount before checkout, the order must be validated in real time. Instead of handling this calculation in the canvas app, you create a Power Fx function by using a Dataverse data source to validate and apply the delivery discount code dynamically.

Prepare your Dataverse tables

To manage your discount codes and order details more effectively, you need a clear framework to store important information, such as the discount code reference, expiration dates, item names, and their costs. This approach helps you more easily calculate order subtotals. Your first step is to set up some Dataverse tables to organize and hold this data so that you can refer to it when your formula needs it.

  1. Select Tables from the Power Apps main menu and then select Start with a blank table.

  2. Change the name of the table to Discount Codes.

  3. Find New column in the data view in the lower half of your screen, select the dropdown menu next to the column name, and then select Edit column. Change the display name to Discount Code Ref and then select Update.

  4. Add a new column called Exp Date with a data type of date and time and date only format. Make the column required.

  5. Add a new column called Description with a data type of single line of text and text format.

  6. Add a row, as follows:

    Discount Code Ref Exp Date Description
    FREEDEL 12/31/2025 Free delivery on orders over 25 dollars

    Screenshot of creating a table.

  7. Select New table > Add columns and data in the command bar to create a new table.

  8. Change the table name to Grocery Item.

  9. Find New column in the data view, select the dropdown menu next to the column name, and then select Edit column. Change the display name to Item Name and then select Update.

  10. Add a column called Cost with a data type of currency and then make it required.

  11. Add the following rows:

    Item Name Cost
    Milk 5.00
    Broccoli 3.00
    Rice 4.00
    Bread 5.50
    Salmon 12.00
    Cake 10.00
    Bananas 2.00

  12. Select Save and exit. Power Apps might take a few moments to save your tables. When they're ready, you can continue the exercise.

    Screenshot of the newly created table.

Create your function

To create your Power Fx function, follow these steps:

  1. Open the Functions section of make.powerapps.com (you might need to find Functions in the More menu) and then ensure that you're in the same environment where you plan to create your canvas app.

  2. Select + New function from the command bar or the Create a function button.

  3. Enter the following properties:

    • Display name - Free Delivery Discount
    • Description - This function evaluates the subtotal of an order and determines if it qualifies for free delivery.
    • Table references - Select Discount Codes

  4. Add a New input parameter with the name Subtotal and a decimal data type.

  5. Add a New output result with the name CodeStatus and a Boolean data type.

  6. Enter the following Power Fx expression in the Formula field.

     {CodeStatus:
 If(LookUp('Discount Codes','Discount Code Ref'="FREEDEL").'Exp Date'>Now() And Subtotal>25, true, false)
 }

    This function retrieves the discount code from Dataverse and verifies that it hasn't expired. It also checks whether the provided subtotal exceeds 25 dollars. If both conditions are met, the function returns true.

  7. Select Save.

Test the function

To test the Power Fx function, follow these steps:

  1. Select the function that you created in the functions list and then select Test in the command bar in the upper part of the screen.
  2. Enter 100 in the Subtotal parameter field.
  3. Select Play. The OData response in the Response field shows the result of the function (CodeStatus) as true.
  4. Return to the Functions section and select your function. Select Copy code snippet in the command bar. Save it in a notepad or another easily accessible location. You need the code snippet later to invoke the function from the canvas app.

Create your canvas app

To create your canvas app, follow these steps:

  1. Select Create from the Power Apps main menu and then select Start with a blank canvas > Tablet size.

    Screenshot of creating a canvas app, showing the Start with a blank canvas screen.

  2. In the command bar in the upper part of the screen, select Settings. Under the General tab, change Name to Free Delivery App.

  3. Select Close.

  4. Insert a Horizontal Container and then stretch it to fill the screen.

  5. Insert a Vertical Gallery. Find and select the Grocery Items Dataverse table that you created as the data source.

  6. Change the gallery Layout to Title and subtitle. Set the Text property of the Title label to ThisItem.'ItemName' and the Text property of the Subtitle label to Text(ThisItem.Cost, "[$-en-US]$###.00").

  7. Set the gallery height to App.Height.

  8. Delete the next arrow icon and then insert a Checkbox in its place. Change the Text property of the checkbox to Add to cart and then change the font size to 10.

    Your gallery should resemble the following image.

    Screenshot of an example of creating a hierarchy for governance by using management groups.

  9. Paste the following Power Fx expression in the OnCheck property of the checkbox:

     Collect(colCart,ThisItem);
 UpdateContext({Subtotal: Sum(colCart,Cost)});

    This expression adds the selected grocery item to a collection called colCart. It also updates a context variable, Subtotal, to store the total cost of all selected items. You later use this subtotal as the input parameter for your function.

  10. Paste the following Power Fx function in the OnUncheck property of the checkbox:

     Remove(colCart,ThisItem);
 UpdateContext({Subtotal: Sum(colCart,Cost)});

  11. Insert a Vertical Container (be sure it's also inside Container1). Change the BorderThickness property to 1 and then make the border color light gray.

  12. Insert a Text Label and then change the Text property to Cart. Rename the label to lblCart.

  13. Insert a Vertical Gallery with the data source colCart. Set the gallery Height property to App.Height-lblCart.Height.

  14. Change the gallery Layout to Title and then ensure that the Text property of the Title label is ThisItem.'Item Name'.

  15. Delete the right arrow icon.

  16. Play your app. As you check items, they should appear under the Cart label. You can remove them by clearing the item.

  17. Insert another Vertical Container (also inside Container 1).

  18. Insert a Text Label, and then enter Subtotal: in the Text property and make it bold.

  19. Insert a Text Label and then enter Text(Subtotal,"[$-en-US]$###.00") in the Text property. This entry is your Subtotal variable, formatted for US currency.

Invoke the function

Now that you have a field that displays the order subtotal, you can call your function to check if it exceeds 25 dollars.

  1. Add the Dataverse table, Environment, as a data source in the app.

  2. To call the function, you need the code snippet that you previously copied, which should resemble the following example:

    Environment.<FunctionSchemaName>({Subtotal:Value})
    • The Dataverse table that stores the function is called Environment. This expression is accessing the data source that you added in the previous step.
    • <FunctionSchemaName> is the schema name of the function. Yours includes your unique prefix (and won't include angle brackets).
    • ({Subtotal:Value}) is the input parameter that the function expects. When you use this snippet in your app, you replace Value with your Subtotal variable.

  3. To ensure that the logic runs in real time, you should call the function whenever someone adds an item to or removes it from the cart. This action occurs whenever someone selects or clears the checkbox. You also need to handle the function's output, which returns a Boolean value. For this exercise, you store the output in a variable. Update the checkbox's OnCheck property with the following expression, and then be sure to replace <FunctionSchemaName> with the unique schema name of your function in the code snippet that you copied:

    Collect(colCart,ThisItem);
UpdateContext({Subtotal: Sum(colCart,Cost)});
UpdateContext({FreeDel: Environment.<FunctionSchemaName>({Subtotal:Subtotal})});
If(FreeDel.CodeStatus = true,UpdateContext({DelFee: 0}), UpdateContext({DelFee:10}))

    In this expression, you're capturing the response of the Power Fx function as the context variable FreeDel and then applying a delivery fee value (DelFee) based on the response.

  4. You also need to update the checkbox's OnUncheck property to ensure that the system validates the discount code when someone removes items. Because the function doesn't accept a zero value as an input parameter, you must handle this case differently to prevent it from running when the cart is empty. Update the OnUncheck property with the following Power Fx expression, and be sure to replace <FunctionSchemaName> with the unique schema name of your function in the code snippet that you copied:

    Remove(colCart,ThisItem);
UpdateContext({Subtotal: Sum(colCart,Cost)});
If(Subtotal > 0,UpdateContext({FreeDel: Environment.<FunctionSchemaName>({Subtotal: Subtotal}))});
If(FreeDel.CodeStatus = true,UpdateContext({DelFee: 0}),UpdateContext({DelFee: 10})),UpdateContext({DelFee: 10}))

Verify the results

Now, you can put your function to use.

  1. Beneath the subtotal, insert a Text Label and then enter Delivery Fee: in the Text property and make it bold.
  2. Insert a Text Label and then enter Text(DelFee,"[$-en-US]$###.00") in the Text property.
  3. Insert a Text Label and then enter Total: in the Text property and make it bold.
  4. Insert a Text Label and then enter Text(Subtotal+DelFee, "[$-en-US]$###.00") in the Text property.
  5. Insert a Text Label and then enter If(FreeDel.CodeStatus=true,"This order qualifies for free delivery!","Add " & Text(25-Subtotal, "[$-en-US]$###.00") & " to qualify for free delivery."). Change the font size to 9.

    Screenshot of the grocery app.

  6. Play your app and test the function by adding and removing items to see if the order qualifies for free shipping.

By completing this exercise, you learned how to configure a canvas app to call a Power Fx function, validate input parameters, and process the results in real time. You also explored handling function outputs, updating variables dynamically, and ensuring that the logic runs efficiently. You can adapt this approach for countless business scenarios, which helps improve accuracy, save time, and maintain consistency.