Trigger a Flow from JavaScript

This post will give an overview of how to trigger a flow from JavaScript.

Note - This code example has been tested in various cloud environments. The user MUST be licensed for Flow in order for the authentication to work.

Flow & SharePoint Development

Splitting out the business logic and utilizing Flow to run dynamically or by code has always been on my TODO list. This approach will help customers/clients maintain solutions easily through Flow, instead of relying on a developer for code updates.

This code walkthrough will create a flow for a list to send a notification to the user in the item’s value. Next we will demonstrate how to trigger this flow against the item using JavaScript from SharePoint.

Create the Flow

The section will create a list and create/configure a flow.

Note - This approach will work against a list or library.

Step 1 - Create the List

Create a list to execute this flow against.

Next, add a user field that we will reference in the notification.

Step 2 - Create Flow

Access Power Automate and create a new “Instant Cloud” flow, and click on the “Skip” option in the next window.

Name the flow and select the SharePoint trigger For a Selected Item.

Step 3 - Implement the Flow

Type in the site address and select the list from the drop down.

Since this flow is triggered manually, we will need to get the item properties.

The last step is to add the step for sending an email. This is just an example, so it will just send the Title information to the user selected.

Note - Don’t forget to save your flow.

Create the JavaScript

This section will go over the code to execute the flow. I will trigger this from the browser console, but will provide the typescript code example at the end of this post.

Step 1 - Reference the gd-sprest Library

We will use the gd-sprest library to interact with the SharePoint REST API. A previous post goes over Graph API calls from SharePoint Online. We will utilize the getAccessToken method to authenticate with Flow.

From the browser console, reference the library.

var s = document.createElement("script"); s.src = "https://cdnjs.cloudflare.com/ajax/libs/gd-sprest/7.3.6/gd-sprest.min.js"; document.head.appendChild(s);

Create a test item for the flow and note the item id of it. We will send this item id in a later step.

Step 2 - Get the Flow Token

Next, we will need to authenticate with Power Automate in order to run the flow. We will utilize the getAccessToken method from the Graph component to authenticate with Flow. I recently updated the SPTypes enumerator with this new value.

var auth = $REST.Graph.getAccessToken($REST.SPTypes.CloudEnvironment.Flow).executeAndWait();

The auth variable will contain the access token we will need to trigger the flow.

Step 3 - Get the Flow Instance

Next, we will get the flow instance. This will ensure the user has access to it, and to get the information required to run the flow.

Note - The guid of the flow can be found in the URL of the Power Automate.

var flow = $REST.List("Flow Demo").syncFlowInstance("b1870a02-7095-429e-9346-0fef1e28f88e").executeAndWait();

The flow information is stored as a JSON string, so we will extract the information by parsing it.

var flowInfo = JSON.parse(flow.SynchronizationData);

Step 4 - Run the Flow

Now that we have the access token and flow information, we can now trigger it by making a POST call.

Create the Header

var headers = new Headers();
headers.append("Accept", "application/json");
headers.append("Content-Type", "application/json");
headers.append("authorization", "Bearer " + auth.access_token);

Note - We will reference the access token from Step 1.

Flow Parameters

The flow will require some parameters about the item id. For this example, it’s a new list so the first item I create will be 1.

var body = JSON.stringify({
    rows: [{
        entity: {
            ID: 1
        }
    }]
});

Trigger Flow

We will send a POST request to trigger the flow.

fetch(flowInfo.properties.flowTriggerUri, { method: "POST", headers: headers, body: body});

Step 5 - Validate the Run

Refresh the Flow’s page to view the last run times.

Code Example

This class will contain a static method for executing a flow. You will need to pass in the list name, item id and flow id. The web url parameter is optional.

import { Graph, SPTypes, Web } from "gd-sprest"; // Or gd-sprest-bs library

export class RunFlow() {
    // Executes a flow
    static execute(listName:string, itemId: number, flowId: string, webUrl?:string):PromiseLike<void> {
        // Return a promise
        return new Promise((resolve, reject) => {
            // Get the access token
            this.getAccessToken().then(access_token => {
                // Get the flow information
                this.getFlow(listName, flowId, webUrl).then(flowInfo => {
                    // Trigger the flow
                    this.triggerFlow(itemId, access_token, flowInfo).then(resolve, reject);
                }, reject);
            }, reject);
        });
    }

    // Gets the access token
    private static getAccessToken():PromiseLike<string> {
        // Return a promise
        return new Promise((resolve, reject) => {
            // Execute a request to flow
            Graph.getAccessToken(SPTypes.CloudEnvironment.Flow).execute(auth => {
                // Resolve the request
                resolve(auth.access_token);
            }, reject);
        });
    }

    // Gets the flow
    private static getFlow(listName:string, flowId: string, webUrl?:string):PromiseLike<any> {
        // Return a promise
        return new Promise((resolve, reject) => {
            // Get the flow for the list
            Web(webUrl).Lists(listName).syncFlowInstance(flowId).execute(flowInfo => {
                // Resolve the request
                resolve(JSON.parse(flowInfo.SynchronizationData));
            }, reject);
        });
    }

    // Trigger the flow
    private static triggerFlow(itemId: number, access_token: string, flowInfo: any) {
        // Create the xml http request
        let xhr = new XMLHttpRequest();
        xhr.open("POST", flowInfo.properties.flowTriggerUri, true);

        // Set the headers
        xhr.setRequestHeader("Accept", "application/json");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("authorization", "Bearer " + access_token);

        // Set the body
        let body = JSON.stringify({
            rows: [{
                entity: {
                    ID: itemId
                }
            }]
        });

        // Set the state change event
        xhr.onreadystatechange = () => {
            // See if the request has finished
            if (this.xhr.readyState == 4) {
                // Resolve the request
                resolve();
            }
        }

        // Execute the request
        xhr.send(body);
    }
}

Summary

I hope you find this code example helpful. Happy Coding!!!