Today I will be covering the day seven topics of my MS Flow series. If you have not checked out my previous posts about Microsoft Flow, I would recommend you to have a look at them. Links to the previous posts are given below.
What I am going to cover
I am planning to write a series on MS Flow on which I will cover most of the areas in it. This will be a 10 day series
- Day 1: Flow Templates, Connectors, Triggers, Actions, Conditions
- Day 2: The famous Twitter flow, My Flows, Team Flows, Share a Flow
- Day 3: Flow in Mobiles, Debug a flow, export and import a flow
- Day 4: Approval Flow (sequential and parallel)
- Day 5: Flow with SharePoint on-prem (Gateways)
- Day 6: Flow vs logic apps
- Day 7: Flow with custom applications web services
- Day 8: Flow with Graph API
- Day 9: Flow with Cognitive services
- Day 10: Flow Administration and DLP, Pricing etc.
A few points before moving to the topic:
Microsoft Flow is an online service that helps in connecting various apps and services. And those include Microsoft products like SharePoint, Dynamics, Excel, Power BI etc... and non-Microsoft services like Twitter, Facebook, MailChimp, etc...
Today I will be showing how a flow can be triggered from an external HTTP request. This HTTP request can be from anything like .NET application or Angular, etc.
Here, I will be explaining the steps on how a Flow can be triggered as well how to to send the data from a custom application to Flow.
Sending data from Angular to Microsoft Flow
I am going to take one Angular Application and send some data to the Flow. And this data will be used in the forthcoming steps of the MS Flow.
So first I will create the Flow which has to be triggered.
Based on the experiences we got from the previous articles, go to the flow environment and create a flow from the blank page. Please refer HERE if clarifications are needed.
I have titled my flow as “Custom API Triggered Flow”. And in the services, search for “Request”.
And in the shown options, select “Request – When an HTTP request is received”.
![Microsoft Flow]()
We will get the above block.
The host URL is the one which has to be called by our custom application (in this case Angular 4 application). This will be generated only after this Flow is saved once.
Request Body is the schema in which the JSON data has to be sent from the external application
Note
To build this complex schema, Flow has given us one more easy way. And that is – if you know the structure of your JSON object from your custom application, the schema will be auto-generated.
Let’s see an example to understand this. Consider the JSON object that is going to be passed from the custom application holds the customer name, gender, and location.
So the structure of JSON would be -
- {“
- CustomerName”: “John Doe”,
- “Gender”: “Male”,
- “Location”: “Australia”
- }
Now, our next step would be to click on “Use sample payload to generate schema”. See the above image.
It opens a block on which we can paste our sample JSON object.
Then click on Done button. Now, this is the block that holds the HTTP Request that is going to be called from another application.
Now, click New step - Add an Action.
Select SharePoint as the service and the trigger would be “SharePoint – create item”.
Now, I am going to pass the data which is received from the custom application to SharePoint connector to create an item in the “Customer List”. The structure of the list is as below.
I am going to map SharePoint’s title with the Customer name of the JSON input, Gender column with the Gender of the JSON input, and finally, the Location column with the location of the JSON input. OK, let’s proceed with the flow.
So once we set up the SharePoint trigger with the Site Address and the List Name (Here - it is Customer List), we will be given the options to fill the fields in the list.
Now we will get to know the power of MS Flow again.
From the above, we can infer that when we click on the “Title” field, it opens up the panel on the right side and shows up the keys of the JSON data. So if we map each JSON key with the SharePoint field, we will be able to get the values of each of them during its run. Let’s find out. So finally we will map the fields and will get a block like this.
Now we are all set. The last step remaining is to get the URL of the flow, which will be used by our custom application. This can be gotten by saving the Flow. Click on Save on the top right and open the “Request” block. There we can see the Post URL generated.
Click on the icon next to it to copy it. So we are all set with the flow side.
Our next step is to use this in the custom application. For demo purposes, I have created an Angular 4 application. We have lots of projects in the C#corner community if you want to get started in Angular.
I have attached the Angular Solution with this article. Please have a look if needed.
I am going to have a button, on whose click the data is going to be sent to the Flow and it is going to be triggered.
This is my app.component.html page
And on that button click, I am going to call a method – “PosttoFlow”.
And my app.component.ts looks like.
From the above, we can see that it calls a service “callflow.service” in my application. And below is the code.
One important catch here is the headers. Please note it carefully. This overcomes the CORS issue -
const headers = new HttpHeaders().set('Content-Type', 'application/json')
.set('Access-Control-Allow-Origin', 'http://localhost:4200');
Also we are passing the POST URL which is given by the flow and our JSON object which is going to be posted into SharePoint.
Once the setup is done, we can do an ng serve and check.
On clicking the “Send Data to Flow” button – we are posting data to SharePoint.
Once I check my SharePoint Customer List, I can see the posted data.
I hope this explains how external applications can trigger as well as send data to a MS flow and use it to pass to other services.
Thanks for reading. Let me know if you have anything to say.
Catch you on my next post.