How to call a flow from power pages

Introduction

Integrating Power Pages with Power Automate opens up exciting possibilities for creating seamless and efficient workflows. Previously, we relied on HTTP-triggered flows to invoke processes. However, this method has its own set of challenges, such as environment-specific URL changes and the lack of an easy authentication mechanism.

Thanks to the new built-in integration, we can now securely call Power Automate flows directly using Power Pages Web APIs. This simplifies the process while improving security and making it more adaptable across environments.

In this blog, we’ll explore the step-by-step process of calling a Power Automate flow from Power Pages.

Create a new Power Automate flow

In this tutorial, we will build a new Power Automate to show the current weather information for the location provided by the user. We will use the MSN weather API that is available as an action in power automate.

Navigate to your power apps solution.

Create a new automated flow.

For the trigger, search for Power Pages, and select the trigger named When Power Pages calls a flow as shown in the below image.

In the trigger, we can optionally add the input parameters.

For this tutorial, we will add a parameter named location.

Click on Add an input button, select the type as Text, and give it a name as location.

Add a new action named Get current weather which is part of MSN weather.

In the location input, add the location parameter we added in the trigger, it will be sent by the client in the request.

Select the Units as required.

Add an action named Return value(s) to Power Pages to return the response to the Power Pages.

For this example, let us return the following values from the weather action in the response.

Add flow to the Power Pages site

With the flow now created, the next step is to integrate it into the Power Pages site, enabling it to be triggered directly from the Portal.

Navigate to the Power Pages editor and go to the details of your portal.

From the left navigation, select Set up.

Under the Integrations section, select Cloud flows.

You should see your flows in the Other Cloud flows section.

Select your flow, click on the three dots on the right, and select Add to site.

In the popup, add the web roles for authorization. Only the users with these web roles will be able to call the flow. For this tutorial, let us choose Authenticated Users and Administrators roles only.

Make a note of the URL, as this serves as the endpoint where we’ll send an HTTP request to trigger the flow. endpoint we have to send an HTTP request to call the flow.

Call flow from the power pages portal

We can now call the flow using the Ajax request.

We can send an HTTP Ajax request to the endpoint we got in the previous step.

Below is the sample code to call the flow using JavaScript.

document.getElementById('weatherForm').addEventListener('submit', function(e) {
    e.preventDefault();

    let payload = JSON.stringify({
        location: $('#locationInput').val()
    });
    
    // call web api
    webapi.safeAjax({
        type: 'POST',
        url: '/_api/cloudflow/v1.0/trigger/2a2139b1-fba3-437c-b9ac-b39153ca040f',
        contentType: 'application/json',
        data: JSON.stringify({
            eventData: payload
        }),
        success: function (data, textStatus, xhr) {
            let response = JSON.parse(data);

            $('#locationDisplay').text(response.location);
            $('#temperatureDisplay').text(response.temperature);
            $('#humidityDisplay').text(response.humidity);
            $('#conditionDisplay').text(response.condition);
            $('#lastUpdated').text('Last updated ' + moment.utc(response.last_updated).local().fromNow());

            $('#weatherResult').show();
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

}); 

Check out the functionality in action below.