Post
Ask Question

Trigger A Microsoft Flow With A Button Click On SharePoint Online

MICROSOFT FLOW

Microsoft Flow is a cloud-based software tool that allows users to create and automate workflows across multiple applications and services without the need for a developer’s help and is part of the Office 365 suite. It is included in most Office 365 subscriptions and can be accessed via Office 365 app launcher. Automated workflows are called flows and its most common usage is to trigger notifications, synchronize files & collect data. The focus of this article is to highlight how to trigger a Microsoft flow on a button click event within SharePoint Online.

BASIC IDEA OF IMPLEMENTATION

  • Create a Microsoft flow that will have “Request” as its first action. The request will receive an Email address, Email subject and Email body as input parameters that will be supplied to the next “Send email” action.

  • On a click of a button in a SharePoint web part page, pass the input parameters Email address, Email subject, and Email body and make a JQuery Ajax call using the HTTP Post URL generated in the “Request” action of the Microsoft flow.

  • Verify the Office 365 Outlook email account of the email recipient supplied in the web part.

    SharePoint

CREATE A FLOW

  • Login to SharePoint online site and create a list called “TestList”.
  • Once the list is created, choose the option to “Create a flow” as shown below.

    SharePoint

  • Under the pane on the right side, choose “See more templates” and then choose “Create from blank” option as shown below.

    SharePoint
  • Click on “Search hundreds of connectors and triggers” in the resulting window and search with the keyword “Request” and choose the option “Request – when an HTTP request is received”, as shown below.

    SharePoint

Add the below text in the “Request Body JSON Schema” section and click on “New Step” button. We can use https://jsonschema.net/ to generate such schemas based on our varied requirements.

Note - The HTTP POST URL is generated only after we save the flow; which we will do later.

  1. {  
  2.     "$schema": "http://json-schema.org/draft-04/schema#",  
  3.     "type": "object",  
  4.     "properties": {  
  5.         "emailaddress": {  
  6.             "type": "string"  
  7.         },  
  8.         "emailSubject": {  
  9.             "type": "string"  
  10.         },  
  11.         "emailBody": {  
  12.             "type": "string"  
  13.         }  
  14.     },  
  15.     "required": [  
  16.         "emailaddress",  
  17.         "emailSubject",  
  18.         "emailBody"  
  19.     ]  
  20. }  
Choose “Add an action” and select “Office 365 Outlook – Send an email”.

Note
This is one of the actions we will choose for the purpose of this demo. You can design your Microsoft flow as per your own requirements.

SharePoint
SharePoint

 

  • Add the dynamic content to each of the placeholders as shown below.

    SharePoint

  • Click on “New step” and search for “Response” in connectors and add data to the placeholders as shown below.

    SharePoint

  • Click on Save Flow and provide a name for your Microsoft Flow. I have provided “CustomTriggerForFlow”. Once the flow is saved, click on “Edit Flow” so that you can copy the HTTP POST URL as shown below from the first action “When a HTTP request is received”.

    SharePoint

  • Click on “Done”. You can use Postman Chrome App to test the REST API Calls to the copied HTTP POST URL of the Flow as shown in the below section or directly skip to Trigger section.

POSTMAN TEST

  • Get the Chrome Extension App.

    SharePoint

  • If you simply launch Postman & just paste an Office 365 URL in there it would run but fail. In reality, you need to login into the SharePoint site first and then launch Postman and make a little change which will make the application work like fiddler does.

  • At the top click the “Postman Interceptor” button. If prompted to install a chrome extension app called Postman interceptor, then complete the actions.

    SharePoint

  • Enable it by flicking the switch as shown below and browse your SharePoint site as an authenticated user.

    SharePoint

  • Now, you are good to go for the first test. Perform the below steps.

    • Create a new request and provide a name. Change the Request type to POST.
    • Provide the HTTP POST URL that was copied from the “Request” action of the Microsoft Flow.
    • Update the body of the POST request with the appropriate values to the request parameters as shown below. Select the “raw” radio button. Change the Content-Type header to “application/json” and click on Send.

      SharePoint

  • This should return status “200 OK” and an email must be received by the email recipient specified in the request parameter as shown below. This completes the Postman test.

    SharePoint

TRIGGER FLOW FROM BUTTON IN SHAREPOINT

  • Create a text file called “txt” and add the code. This html code creates three textboxes and a button. The three textboxes are used to supply the request parameters Email address, Email body and Email Subject.

HTML CODE 

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  2. <script type="text/javascript" src="../_catalogs/masterpage/triggermicrosoftflow.js"></script>  
  3. <div>  
  4.     Email Address:<br>  
  5.     <input id="txtEmailAddress" type="text" name="emailaddress" style="width: 500px;"><br>  
  6.     Email Subject:<br>  
  7.     <input id="txtEmailSubject" type="text" name="emailsubject" style="width: 500px;"><br>  
  8.     Email Body:<br>  
  9.     <textarea id="txtEmailBody" name="emailBody" cols="40" rows="5" style="width: 800px;"></textarea><br><br>  
  10.     <input id="btnTriggerMicrosoftFlow" type="button" value="Trigger Microsoft Flow">  
  11. </div>  

Create a JavaScript file called “js” and add the following code.

The only change in the below code must be the variable “httpPostUrl” within the function StartMicrosoftFlowTriggerOperations which should be supplied with the HTTP POST URL you have generated. 

  1. $(document).ready(function () {  
  2.     ExecuteOrDelayUntilScriptLoaded(AttachClickEventToButton, 'SP.js');  
  3. });  
  4.   
  5. //This method attaches click event to input button.  
  6. function AttachClickEventToButton() {  
  7.     try {  
  8.         $("#btnTriggerMicrosoftFlow").click(function () {  
  9.             StartMicrosoftFlowTriggerOperations();  
  10.         });  
  11.     }  
  12.     catch (e) {  
  13.         console.log("Error occurred in AttachClickEventToButton " + e.message);  
  14.     }  
  15. }  
  16.   
  17. //This method triggers the microsoft flow  
  18. function StartMicrosoftFlowTriggerOperations() {  
  19.     try {  
  20.         var dataTemplate = "{\r\n    \"emailaddress\":\"{0}\",\r\n    \"emailSubject\": \"{1}\",\r\n    \"emailBody\": \"{2}\"\r\n}";  
  21.         var httpPostUrl = "<Supply with the HTTP POST Url>";  
  22.         //Call FormatRow function and replace with the values supplied in input controls.  
  23.         dataTemplate = dataTemplate.FormatRow($("#txtEmailAddress").val(), $("#txtEmailSubject").val(), $("#txtEmailBody").val());  
  24.   
  25.         var settings = {  
  26.             "async": true,  
  27.             "crossDomain": true,  
  28.             "url": httpPostUrl,  
  29.             "method": "POST",  
  30.             "headers": {  
  31.                 "content-type": "application/json",  
  32.                 "cache-control": "no-cache"  
  33.             },  
  34.             "processData": false,  
  35.             "data": dataTemplate  
  36.         }  
  37.   
  38.         $.ajax(settings).done(function (response) {  
  39.             console.log("Successfully triggered the Microsoft Flow. ");  
  40.         });  
  41.     }  
  42.     catch (e) {  
  43.         console.log("Error occurred in StartMicrosoftFlowTriggerOperations " + e.message);  
  44.     }  
  45. }  
  46.   
  47. //This method formats the rowTemplate by replacing the placeholders based on the arguments passed.  
  48. String.prototype.FormatRow = function () {  
  49.     try {  
  50.         var content = this;  
  51.         for (var i = 0; i < arguments.length; i++) {  
  52.             var replacement = '{' + i + '}';  
  53.             content = content.replace(replacement, arguments[i]);  
  54.         }  
  55.         return content;  
  56.     }  
  57.     catch (e) {  
  58.         console.log("Error occurred in FormatRow " + e.message);  
  59.     }  
  60. }  
  • Go to the SharePoint site and upload the above created Text file & JavaScript file to the Masterpage gallery of the site.
  • Create a web part page titled “aspx”. (Choose a Full Vertical layout)
  • Add a content editor web part and change the web part properties in the web part page. Provide the following path “../_catalogs/masterpage/TriggerMicrosoftFlow.txt” in the Content Link property. Click on Test Link & if it works well, clicks on OK.

    SharePoint

  • Now within the web part, you should be able to provide the Email address, Email subject and Email body input parameters and click on the “Trigger Microsoft Flow” button.

    SharePoint

  • Go to the Office 365 outlook email of the recipient and you should be able to see an email as shown below.

    SharePoint

REFERENCES

The following resources have helped immensely to create this solution and article.

  • https://elbruno.com/2017/02/06/flow-remote-calling-a-flow-from-a-csharp-consoleapp/
  • https://flow.microsoft.com/en-us/blog/call-flow-restapi/
  • https://www.helloitsliam.com/2016/02/04/postman-and-office-365/

SUMMARY

In this article, we have seen that by having a “Request” as the first action of your Microsoft flow, you can trigger a Microsoft Flow on a button event from SharePoint Online. We have also seen how to test the request action of the Microsoft flow using the POSTMAN app.


Similar Articles