Quick tip: submitting web forms to Dataverse using Power Automate Cloud Flows

You can quite easily integrate data coming from forms on your web site with Dataverse using some simple  Javascript and Power Automate Cloud Flows. 

First step is to create a Power Automate Flow with a "When a HTTP request is received" trigger and add the form fields that you want to capture as JSON payload.  Remember to start creating your flow from within a solution so that you can leverage the ALM capabilities of Dataverse and use the new Dataverse connector (current environment)

The request body JSON schema should contain all the web form fields that you want to sent to Dataverse/Dynamics 365 - below is the JSON schema that I generated from a sample payload. 

{
    "type": "object",
    "properties": {
        "firstname": {
            "type": "string"
        },
        "lastname": {
            "type": "string"
        },
        "phone": {
            "type": "string"
        },
        "email": {
            "type": "string"
        },
        "message": {
            "type": "string"
        }
    }
}

After you save the flow - the "HTTP Post URL" will be automatically generated - this is the URL that you will be using in the Javascript code that you embed on your website to sent the web form  to Dataverse. You might want to consider using Azure API management to protect and expose the API indirectly. 

 

The last step is to  add the Javascript code snippet to your website to submit the changes to the Power Automate cloud flow endpoint or the Azure API management hyperlink.

function submitform()
	  {
		var emailvalue = document.getElementById('emailvalue').value;
		var firstnamevalue = document.getElementById('firstnamevalue').value;
		var lastnamevalue = document.getElementById('lastnamevalue').value;
		var phonevalue = document.getElementById('phonevalue').value;
		var messagevalue = document.getElementById('messagevalue').value;
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("POST","yourcloudflowurl");
		xmlhttp.setRequestHeader("Content-Type","application/json;charset=UTF-8");
		xmlhttp.send(JSON.stringify(
			{
				firstname: firstnamevalue,
				lastname: lastnamevalue,
				phone: phonevalue,
				email: emailvalue,
				message: messagevalue
			}
		));
		alert("Thank you");
	  }

References:

• Use Microsoft Flow to integrate your website's webforms with Dynamics 365
• Using Microsoft Flow to capture web form submissions in Dynamics
• How to expose Microsoft Flow through Azure API Management
• Protect your nested/service flows with the  Azure API Management Service