Call a function from PowerApps

The PowerApps platform is designed for business experts to build apps without traditional application code. Professional developers can use Azure Functions to extend the capabilities of PowerApps, while shielding PowerApps app builders from the technical details.

You build an app in this topic based on a maintenance scenario for wind turbines. This topic shows you how to call the function that you defined in Create an OpenAPI definition for a function. The function determines if an emergency repair on a wind turbine is cost-effective.

Finished app in PowerApps

For information on calling the same function from Microsoft Flow, see Call a function from Microsoft Flow.

In this topic, you learn how to:

  • Prepare sample data in Excel.
  • Export an API definition.
  • Add a connection to the API.
  • Create an app and add data sources.
  • Add controls to view data in the app.
  • Add controls to call the function and display data.
  • Run the app to determine whether a repair is cost-effective.

Prerequisites

Export an API definition

You have an OpenAPI definition for your function, from Create an OpenAPI definition for a function. The next step in this process is to export the API definition so that PowerApps and Microsoft Flow can use it in a custom API.

Important

Remember that you must be signed into Azure with the same credentials that you use for your PowerApps and Microsoft Flow tenants. This enables Azure to create the custom API and make it available for both PowerApps and Microsoft Flow.

  1. In the Azure portal, click your function app name (like function-demo-energy) > Platform features > API definition.

    API definition

  2. Click Export to PowerApps + Flow.

    API definition source

  3. In the right pane, use the settings as specified in the table.

    Setting Description
    Export Mode Select Express to automatically generate the custom API. Selecting Manual exports the API definition, but then you must import it into PowerApps and Microsoft Flow manually. For more information, see Export to PowerApps and Microsoft Flow.
    Environment Select the environment that the custom API should be saved to. For more information, see Environments overview (PowerApps) or Environments overview (Microsoft Flow).
    Custom API Name Enter a name, like Turbine Repair.
    API Key Name Enter the name that app and flow builders should see in the custom API UI. Note that the example includes helpful information.

    Export to PowerApps and Microsoft Flow

  4. Click OK. The custom API is now built and added to the environment you specified.

Add a connection to the API

The custom API (also known as a custom connector) is available in PowerApps, but you must make a connection to the API before you can use it in an app.

  1. In web.powerapps.com, click Connections.

    PowerApps connections

  2. Click New Connection, scroll down to the Turbine Repair connector, and click it.

    New connection

  3. Enter the API Key, and click Create.

    Create connection

Note

If you share your app with others, each person who works on or uses the app must also enter the API key to connect to the API. This behavior might change in the future, and we will update this topic to reflect that.

Create an app and add data sources

Now you're ready to create the app in PowerApps, and add the Excel data and the custom API as data sources for the app.

  1. In web.powerapps.com, choose Start from blank > Phone app icon (phone) > Make this app.

    Start from blank - phone app

    The app opens in PowerApps Studio for web. The following image shows the different parts of PowerApps Studio.

    PowerApps Studio

    (A) Left navigation bar, in which you see a hierarchical view of all the controls on each screen

    (B) Middle pane, which shows the screen that you're working on

    (C) Right pane, where you set options such as layout and data sources

    (D) Property drop-down list, where you select the properties that formulas apply to

    (E) Formula bar, where you add formulas (as in Excel) that define app behavior

    (F) Ribbon, where you add controls and customize design elements

  2. Add the Excel file as a data source.

    The data you will import looks like the following:

    Excel data to import

    1. On the app canvas, choose connect to data.

    2. On the Data panel, click Add static data to your app.

      Add data source

      Normally you would read and write data from an external source, but you're adding the Excel data as static data because this is a sample.

    3. Navigate to the Excel file you saved, select the Turbines table, and click Connect.

      Add data source

  3. Add the custom API as a data source.

    1. On the Data panel, click Add data source.

    2. Click Turbine Repair.

      Turbine repair connector

Add controls to view data in the app

Now that the data sources are available in the app, you add a screen to your app so you can view the turbine data.

  1. On the Home tab, click New screen > List screen.

    List screen

    PowerApps adds a screen that contains a gallery to display items, and other controls that enable searching, sorting, and filtering.

  2. Change the title bar to Turbine Repair, and resize the gallery so there's room for more controls under it.

    Change title and resize gallery

  3. With the gallery selected, in the right pane, under Properties, click CustomGallerySample.

    Change data source

  4. In the Data panel, select Turbines from the list.

    Select data source

    The data set doesn't contain an image, so next you change the layout to better fit the data.

  5. Still in the Data panel, change Layout to Title, subtitle, and body.

    Change gallery layout

  6. As the last step in the Data panel, change the fields that are displayed in the gallery.

    Change gallery fields

    • Body1 = LastServiceDate
    • Subtitle2 = ServiceRequired
    • Title2 = Title
  7. With the gallery selected, set the TemplateFill property to the following formula: If(ThisItem.IsSelected, Orange, White).

    Template fill formula

    Now it's easier to see which gallery item is selected.

    Selected item

  8. You don't need the original screen in the app. In the left pane, hover over Screen1, click . . ., and Delete.

    Delete screen

  9. Click File, and name the app. Click Save on the left menu, then click Save in the bottom right corner.

There's a lot of other formatting you would typically do in a production app, but we'll move on to the important part for this scenario - calling the function.

Add controls to call the function and display data

You have an app that displays summary data for each turbine, so now it's time to add controls that call the function you created, and display the data that is returned. You access the function based on the way you name it in the OpenAPI definition; in this case it's TurbineRepair.CalculateCosts().

  1. In the ribbon, on the Insert tab, click Button. Then on the same tab, click Label

    Insert button and label

  2. Drag the button and the label below the gallery, and resize the label.

  3. Select the button text, and change it to Calculate costs. The app should look like the following image.

    App with button

  4. Select the button, and enter the following formula for the button's OnSelect property.

    If (BrowseGallery1.Selected.ServiceRequired="Yes", ClearCollect(DetermineRepair, TurbineRepair.CalculateCosts({hours: BrowseGallery1.Selected.EstimatedEffort, capacity: BrowseGallery1.Selected.MaxOutput})))
    

    This formula executes when the button is clicked, and it does the following if the selected gallery item has a ServiceRequired value of Yes:

    • Clears the collection DetermineRepair to remove data from previous calls. A collection is a tabular variable.

    • Assigns to the collection the data returned by calling the function TurbineRepair.CalculateCosts().

      The values passed to the function come from the EstimatedEffort and MaxOutput fields for the item selected in the gallery. These fields aren't displayed in the gallery, but they're still available to use in formulas.

  5. Select the label, and enter the following formula for the label's Text property.

    "Repair decision: " & First(DetermineRepair).message & " | Cost: " & First(DetermineRepair).costToFix & " | Revenue: " & First(DetermineRepair).revenueOpportunity
    

    This formula uses the First() function to access the first (and only) row of the DetermineRepair collection. It then displays the three values that the function returns: message, costToFix, and revenueOpportunity. These values are blank before the app runs for the first time.

    The completed app should look like the following image.

    Finished app before run

Run the app

You have a complete app! Now it's time to run it and see the function calls in action.

  1. In the upper right corner of PowerApps Studio, click the run button: Run app button.

  2. Select a turbine with a value of Yes for ServiceRequired, then click the Calculate costs button. You should see a result like the following image.

    Finished app in PowerApps

  3. Try the other turbines to see what's returned by the function each time.

Next steps

In this topic, you learned how to:

  • Prepare sample data in Excel.
  • Export an API definition.
  • Add a connection to the API.
  • Create an app and add data sources.
  • Add controls to view data in the app.
  • Add controls to call the function and display data
  • Run the app to determine whether a repair is cost-effective.

To learn more about PowerApps, see Introduction to PowerApps.

To learn about other interesting scenarios that use Azure Functions, see Call a function from Microsoft Flow and Create a function that integrates with Azure Logic Apps.