• Summary
• Compatibility
• Applies to
• Prerequisites
• Solution
• Version history
• Supported languages
• How it works
• Download the web part packages

My colleague MrAutomate33 and I have been longing for a solution that supports triggering Power Automate and/or Azure Logic Apps flows while selecting multiple files in a SharePoint document library or multiple list items in a SharePoint custom list. Now, finally it's here!

This SPFx (SharePoint Framework) command set expands on the existing 'trigger a flow' menu button in SharePoint, and allows you to configure one or more HTTP request triggered flows and serve the user with a choice on which flow to execute when selecting one or more items by injecting a menu lint and context button upon loading the page. A sppkg for both SharePoint document libaries and custom lists are available.

Download the .sppkg file for custom lists here!

Download the .sppkg file for document libraries here!

• SharePoint Framework
• Power Automate
• Azure Logic Apps
• Microsoft 365 tenant
• Elegant DI in SPFx
• Using .env files in SharePoint Framework development
• AppSettings in your SPFx solutions
• Use @pnp/sp (PnPJS) v3 library with SharePoint Framework web parts
• Logging with PnPJS v3 in SPFx solutions
• Create a custom gulp task
• Debug SPFx applications via VSCode launch.json
• VSCode launch tasks
• Provision SharePoint assets from your client-side web part

• Node.js v12/14/16
• (If using Power Automate) A Power Automate per user or per flow plan that allows you to use the Request (HTTP) connector (see Power Automate pricing)
• (optional) An M365 account. Get your own free Microsoft 365 tenant from M365 developer program

• English
• Dutch

Unlike SPFx web parts, command sets do not support configuration via a property panel. To ensure customization to this solution is still possible, a workaround has been implemented.

Upon installing the web part on a SharePoint site, a flow trigger configuration custom list will be automatically provisioned with the name Enhanced Flow Trigger Configuration.

Upon initialization, the web part will fetch all items in this provisioned list and use the information stored in it to create flow configuration, which is then presented to the user as a choice which flow to trigger. If the web part succeeds in fetching and composing the configuration, a console message will be logged with the name of the provisioned list. This message looks like EnhancedFlowTriggerCommandSet -> Initialized! Listening to config list: Enhanced Flow Trigger Configuration. If it fails, a console message will be logged. This message looks like EnhancedFlowTriggerCommandSet -> Error while initializing.

The web part will call the flow by using the information in the composed flow configuration selected by the user. The provisioned configuration list contains the following fields. Each item in this list represents a flow the user may call from the list/document library:

If the command set is installed on the site and the user opens a document library or custom list (depending on the installed package) and one or more items are selected, a menu button with the text 'Trigger flow' will become visible in the menu lint or context (see example below).

Upon pressing the menu button, a dialog will appear, displaying choices for every configured flow in the provisioned configuration list. The user will be able to choose which flow they want to trigger (see example below).

If requested user input has been configured for the selected flow, the webpart will dynamically build the input fields and display them to the user, requesting their input. Based on the presence of required fields, the button to trigger the flow will be disabled until all required field maintain a valid value (see example below).

If no requested user input has been configured, the webpart will simply show the button to trigger the flow with (see example below).

Note that the web part and its components are SharePoint theme-aware.

If the configured flow uses a POST method, the command set will pass a request body JSON-object to the flow with the following properties:

An example of the request body is outlined below:

{
  "originSecret": "0f30da5d2e4c4565bd227cedd969cddb",
  "site": "https://cupo365.sharepoint.com/sites/mkvj",
  "tenantUrl": "https://cupo365.sharepoint.com/",
  "listId": "e74d4d74-e145-42ea-9f74-26aa22565dfa",
  "culture": "en-US",
  "selectedItems": [
      {
          "id": 3,
          "fileRef": "/sites/mkvj/Shared Documents/Lorem ipsum dolor sit amet 1.docx",
          "fileLeafRef": "Lorem ipsum dolor sit amet 1.docx",
          "fileType": "docx",
          "uniqueIdentifier": "{7e88549e-6d26-4f7f-bdd3-17919a7526e9}"
      },
      {
          "id": 2,
          "fileRef": "/sites/mkvj/Shared Documents/Lorem ipsum dolor sit amet 2.docx",
          "fileLeafRef": "Lorem ipsum dolor sit amet 2.docx",
          "fileType": "docx",
          "uniqueIdentifier": "{47bd54ff-6a37-4873-934b-47fd3da89161}"
      }
  ],
  "user": {
        "loginName": "info@cupo365.gg",
        "displayName": "cup o'365",
        "email": "info@cupo365.gg",
        "input": {
            "name": "value",
        }
    }
}

This request body translates to the following flow body schema:

{
    "type": "object",
    "properties": {
        "originSecret": {
            "type": "string"
        },
        "site": {
            "type": "string"
        },
        "tenantUrl": {
            "type": "string"
        },
        "listId": {
            "type": "string"
        },
        "culture": {
            "type": "string"
        },
        "selectedItems": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "integer"
                    },
                    "fileRef": {
                        "type": "string"
                    },
                    "fileLeafRef": {
                        "type": "string"
                    },
                    "fileType": {
                        "type": "string"
                    },
                    "uniqueIdentifier": {
                        "type": "string"
                    }
                },
                "required": [
                    "id",
                    "fileRef",
                    "fileLeafRef",
                    "fileType",
                    "uniqueIdentifier"
                ]
            }
        },
        "user": {
            "type": "object",
            "properties": {
                "loginName": {
                    "type": "string"
                },
                "displayName": {
                    "type": "string"
                },
                "email": {
                    "type": "string"
                },
                "input": {
                    "type": "object",
                    "properties": {}
                }
            }
        }
    }
}

Note that inserting the user input schema into the HTTP trigger body is not required. The input field values will still be available to you in your flow, but just not as a dynamic content property Note that flows configured with a GET method will not receive a request body, since that is not supported within the Power Automate response (HTTP) trigger.

If the flow does contain a custom response, the command set will wait and show the user a message, based on the response.

The command set also supports showing the user a custom message via the flow response body (optional). The command set supports the following response body:

{
  "message": "Any message here"
} 

This translates to the following flow body schema:

{
    "type": "object",
    "properties": {
        "message": {
            "type": "string"
        }
    }
}

If a message is present, it will be displayed in the dialog that is shown to the user (see example below).

Download the .sppkg file for custom lists here!

Download the .sppkg file for document libraries here!