Skip to content

Trigger a Power Automate or Azure Logic App flow from SharePoint while selecting one or more files or list items.

License

Notifications You must be signed in to change notification settings

cupo365/enhanced-flow-command-set

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Enhanced Flow Trigger Command Set icon Enhanced Flow Trigger Command Set

Table of Contents

Summary

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 .sppkg fileDownload the .sppkg file for custom lists here!

Download .sppkg fileDownload the .sppkg file for document libraries here!

Compatibility

SPFx 1.15.0 Node.js v14.17.0 React v16.13.1 Typescript v4.5 PnP v3.5.1 PnP Logging v3.5.1 PnP SPFx Controls v3.9.0 dotenv v16.0.1 Fluent UI v8.83.0

Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2)

Compatible with SharePoint document libraries Compatible with SharePoint custom lists

Compatible with Power Automate Compatible with Azure Logic Apps Compatible with custom API's

Compatible with Microsoft Edge Compatible with Google Chrome Compatible with Mozilla Firefox Compatible with mobile

Applies to

Prerequisites

  • 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

Solution

Solution Author(s)
Document Libraries Enhanced Flow Trigger Command Set cup o'365 (contact)
Custom Lists Enhanced Flow Trigger Command Set cup o'365 (contact)

Version history

Version Date Comments
0.9.0 April 3, 2022 Pre-release
1.0.0 July 1, 2022 Initial release, doc lib and lists compatibility
1.1.0 July 24, 2022 Migration to SPFx 1.15.0 and lots of optimalizations
1.2.0 August 1, 2022 Customizable list and folder whitelisting and content type and file extension blacklisting
1.3.0 October 2, 2022 Dynamic user input form
1.4.0 October 4, 2022 Support lookup as user input
2.0.0 October 5, 2022 Rebranding and UI and dynamic input form optimalizations

Supported languages

  • English
  • Dutch

How it works

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:

Name Type Description Example
Title single line of text The title of the button displayed to the user for this trigger. Start an approval
Trigger URL multi line text The HTTP URL with which the flow can be triggered with. https://prod-178.westeurope.logic.azure.com:443/workflows/.../triggers/manual/paths/invoke...
HTTP Type choice The HTTP method to use for this trigger.
Origin secret text Secret which is passed to the flow and can be used to validate the origin of the request. Leave empty to not provide an origin secret. 0f30da5d2e4c4565bd227cedd969cddb
List whitelist fill-in multi choice The GUIDs of the lists to whitelist for this trigger. Leave empty to whitelist all. 7bc18c02-015f-49bd-a120-bb7a1dfc568f
Folder whitelist fill-in multi choice The list relative folder path to whitelist for this trigger. Leave empty to whitelist all. Deliverables/Finals
Content type blacklist fill-in multi choice The (start of a) content type ID to blacklist for this trigger. See https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/ms452896(v=office.14) for all content type IDs. Leave empty to blacklist none. 0x0120 (blacklist all folders)
File extension blacklist fill-in multi choice The file extensions to blacklist for this trigger. Leave empty to blacklist none. docx
Selection limit number The selected items limit for this trigger. 30
Requested user input multi line text Array with objects of input fields to request and pass to the flow. Leave empty to not request any user input. set. An example can be found here

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). Trigger flow button example

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). Select flow dialog example

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). Dynamic flow input form example

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

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:

Name Type Description Example
originSecret string Secret which is passed to the flow and can be used to validate the origin of the request. Leave empty to not provide an origin secret "0f30da5d2e4c4565bd227cedd969cddb"
site string The site on which the command set resides "https://cupo365.sharepoint.com/sites/mkvj"
tenantUrl string The SharePoint tenant URL "https://cupo365.sharepoint.com/"
listId string The guid of the SharePoint list from which the web part was invoked "e74d4d74-e145-42ea-9f74-26aa22565dfa"
culture string The configured language by the user of the web part (culture variant UI name) "en-US"
selectedItems array An array of selected item objects -
id integer The ID of the selected item 3
fileRef string the server relative URL "/sites/mkvj/Shared Documents/Lorem ipsum dolor sit amet 1.docx"
fileLeafRef string The name of the file, including the file extension "Lorem ipsum dolor sit amet 1.docx"
fileType string The file type "docx"
uniqueIdentifier string The unique guid of the selected item "{7e88549e-6d26-4f7f-bdd3-17919a7526e9}"
user object An object of user data -
loginName string The login name of the user "info@cupo365.gg"
displayName string The display name of the user "cup o'365"
email string The email of the user "info@cupo365.gg"
input object Dynamic object based on the configuration of the 'Requested user input' field { "name": "value" }

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.


The command set supports both waiting for a flow response and simple invocations without waiting for a response.

If the flow does not contain a custom response, it will show the following message to the user:

Invoke success dialog example

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

Awaiting flow response example

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). Success dialog with message example

Download the web part packages

Download .sppkg fileDownload the .sppkg file for custom lists here!

Download .sppkg fileDownload the .sppkg file for document libraries here!