Microsoft Flow In 10 Days - Day Seven - Sending Data From Angular To Microsoft Flow

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.

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.