How to start flow from List or Library control and pass selected items

Form configuration

First, create form a with List or Library control. We’ll use Order form with Order items in List or Library:

We’ll use JavaScript to add a new button:

//this URL needs to be updated
var url = 'FLOW_URL';

fd.spRendered(function() {
    //new button
    var pdfButton = {
        text: 'Email PDF invoice',
        class: 'btn-secondary',
        visible: false,
        icon: 'PDF',
        iconType: 0,
        click: function() {
            //get item IDs of selected items
            var itemIds = fd.control('ListOrLibrary1').selectedItems.map(function(item){ return parseInt(item.ID)} );

            //send a request to start flow
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({ids: itemIds}),
                headers:{
                'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                if (response.status !== 202) {
                alert('Looks like there was a problem. Status Code: ' + response.status);
                } else {
                alert('Please, check your e-mail.');
                }
            })
        }
    }

    fd.control('ListOrLibrary1').ready(function(dt) {
        //dt parameter is the same as fd.control('ListOrLibrary1')
        dt.buttons.push(pdfButton);

        dt.$watch('selectedItems', function(items) {
            pdfButton.visible = items && items.length > 0 ;
        });
    });

});

This JavaScript code will allow button to show up only when some items are selected. This button would send a POST request to MS Flow with the IDs of currently selected items.

Flow

Create a new Flow from blank, and search for Request connector - When a HTTP request is received:

Give it the following Request Body JSON schema:

{
   "type": "object",
   "properties": {
      "ids": {
         "type": "array",
         "items": {
            "type": "integer"
         }
      }
   }
}

Next search for Variables connector - Initialize variable:

We’ll need to Initialize an Array variable to hold SharePoint Items.

To populate the array, we search for SharePoint connector - Get Item action (not Get Items!):

You then need to fill out the information about List or Library Source List, and select Item as Item ID:

This will automatically transform SharePoint Get Item action into a part of Apply to Each actions, which will be applied to all Item IDs sent in a request.

This can be used with Compose action to define certain variables. Search for Compose action and add it inside Apply to Each loop, you can define current SharePoint item variables, such as Amount, Price, Total, etc.

After getting all the items to the Array, it’s now possible to use them in our own actions. In this example, we’re using two actions from Plumsail Documents.

We’ll use Create HTML from Template:

And then Convert HTML to PDF:

The result of which we’ll send as an attachment in an email with Send an email action:

All we need to do now is save the Flow, and copy the URL from When a HTTP request is received action:

Back to our JavaScript editor:

Result

So, this is how the button looks like on the form, when items are selected:

And here’s a preview of the PDF received in an email: