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 FLOW

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

POSTMAN TEST

TRIGGER FLOW FROM BUTTON IN SHAREPOINT

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. });
  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. }
  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());
  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. }
  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. }
  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. }

REFERENCES

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

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.