{"id":1213,"date":"2017-02-01T17:51:40","date_gmt":"2017-02-02T00:51:40","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1213"},"modified":"2017-02-01T17:52:09","modified_gmt":"2017-02-02T00:52:09","slug":"how-to-run-a-microsoft-flow-from-a-sharepoint-framework-spfx-web-part","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-run-a-microsoft-flow-from-a-sharepoint-framework-spfx-web-part\/","title":{"rendered":"How To: Run a Microsoft Flow from a SharePoint Framework (SPFx) web part"},"content":{"rendered":"

In this post I’m going to show you how to call a Microsoft Flow from a SharePoint Framework (SPFx) web part. \u00a0In this sample scenario, the Microsoft Flow sends an email. \u00a0If you want to run this sample code first go to this blog article<\/a> and follow the instructions to create a Microsoft Flow that sends email.<\/p>\n

Note:<\/strong> \u00a0In the blog article I linked above the email address parameter is spelled emailAdress<\/strong>. \u00a0I renamed the parameter emailAddress<\/strong> when I created the Flow and the web part in this sample. \u00a0You will also need to rename the parameter to make it work with my sample web part code.<\/p>\n

This web part is super simple! \u00a0It is created with No javascript web framework <\/strong>option (you can see this below). \u00a0The goal of this web part is not to show you how to make web parts with React, Angular, Knockout, or JQuery. \u00a0The goal is to show you the bare bones implementation you can use to invoke a Microsoft Flow from an SPFx web part.<\/strong><\/p>\n

\"Create<\/a><\/p>\n

You can find the web part code in this GitHub repository: https:\/\/github.com\/TBag\/SPFxFlowEmailWebPart<\/a> \u00a0If you want to adapt this to use one of the frameworks mentioned above please feel free to do so and issue a Pull Request to the sample code GitHub repository. \u00a0I’m happy to add it to the repository to share with others.<\/p>\n

Note:<\/strong>\u00a0 This web part was built on SPFx RC0.<\/p>\n

Here’s how to run it:<\/p>\n

Clone the code from the Git Hub repository:<\/p>\n

git clone\u00a0https:\/\/github.com\/TBag\/SPFxFlowEmailWebPart.git<\/code><\/p>\n

Install packages from npm:<\/p>\n

npm install<\/code><\/p>\n

Compile the web part and load the SharePoint workbench:<\/p>\n

gulp serve<\/code><\/p>\n

Add the web part to the SharePoint workbench:<\/p>\n

\"Add<\/a><\/p>\n

Open the property pane to configure the web part.<\/p>\n

Enter the URL to the Flow you created. \u00a0To obtain the URL to invoke the Flow you made, open the Request in the Flow and click the copy button<\/strong> next to the HTTP POST to this URL<\/strong> textbox (shown below).<\/p>\n

\"Flow<\/p>\n

Enter an email address<\/strong> to send the email to.<\/p>\n

Click Apply<\/strong>.<\/p>\n

Close the property pane.<\/p>\n

In the web part, click Send Email<\/strong>.<\/p>\n

If you open the Developer Tools (F12<\/strong>) you can view the status of the email in the console (shown below).<\/p>\n

\"Console\"<\/a><\/p>\n

Here’s what the email looks like. \u00a0Notice the Subject and Body match the values in the web part properties.<\/p>\n

\"Email\"<\/a><\/p>\n

OK, so how does it work<\/strong>? \u00a0Let’s take a look at the code real quick. \u00a0As I mentioned above, this is not some fancy web part built on any framework.<\/p>\n

Furthermore, this web part isn’t factored to the Nth degree to use different script files and modules. \u00a0If you want to see some awesome articles on how to factor your SPFx web parts to the Nth degree and use all sorts of frameworks I suggest you check out Waldek Mastykarz’s<\/a>, Chris O’Brien’s<\/a>, Wictor Wil\u00e9n’s<\/a>, and Andrew Connell’s<\/a> blogs. They all have a lot of great content about those topics. You can also find good information on http:\/\/dev.office.com<\/a>.<\/p>\n

I only modified 5 files to make this web part (shown below).<\/p>\n

\"5<\/a><\/p>\n

Here’s what I added to each:<\/p>\n

    \n
  1. en-us.js<\/strong>\u00a0– modified strings and added additional strings that control the text in the web part property pane.<\/li>\n
  2. mystrings.d.ts –<\/strong>\u00a0added additional strings that control the text in the web part property pane.<\/li>\n
  3. SpFxFlowEmailWebPart.manifest.json<\/strong>\u00a0– added default values for some of the web part properties.<\/li>\n
  4. ISpFxFlowEmailWebPartProps.ts<\/strong>\u00a0– added the web part properties to the interface.<\/li>\n
  5. SpFxFlowEmailWebPart.ts<\/strong>\u00a0– added the controls for the web part properties to the property pane user interface.<\/li>\n<\/ol>\n

    None of these changes are a big deal, so I’m not going to bother putting code snippets that show them in this blog post. \u00a0You can see the changes for yourself in the sample code.<\/p>\n

    OK, now for the fun part; calling the Flow from the SPFx web part!<\/strong><\/p>\n

    All of this code is in the SpFxFlowEmailWebPart.ts<\/strong> file.<\/p>\n

    Here’s the code that executes when the Send Email button is clicked in the web part. First, the code validates the FlowURL is present. If it is not, the out of the box context.statusRenderer<\/a>.renderError<\/strong> SPFx method is used to display the error message.<\/p>\n

    Then, the code validates the email address is valid by calling a simple helper function named validateEmail <\/strong>you will see in the web part code. This function uses a regular expression to validate the email. The out of the box context.statusRenderer<\/a>.renderError<\/strong> SPFx method is again used to display the error message.<\/p>\n

    Finally, the code invokes the sendEmailViaOffice365Outlook <\/strong>method and passes in the web part properties to send the email.<\/p>\n