Implementing Lead Landing Page with Flow (in 10 min. or less)

February 24, 2019

no comments

Microsoft Flow, along with Logic Apps, Power Apps and CDS has revolutionized integration with Microsoft Dynamics 365.
I have been working with Dynamics products since 2005 and when comparing the resources required back then to hook up a landing page to Dynamics, I estimate that modern solutions require less than 5%.
In addition, you don’t have to be an expert developer to implement simple integration scenarios, as declarative mechanisms like Flow and Logic Apps can handle the heavy lifting.    

In this post I’ll walkthrough the process of Implementing a Lead Landing Page with Flow while writing the minimum amount of required code.

The ingredients:

  1. Microsoft Flow Handle Landing Page Lead triggered by HTTP request, creating a Lead record in Microsoft Dynamics 365 instance using Flow built in Dynamics Create Record Action.
  2. HTML page implementing landing page UI along with JavaScript code sending Lead data to the Handle Landing Page Lead Flow.

Prerequisites:

  1. Have access to Microsoft Dynamics 365 online instance and Flow environment residing in the same tenant

Walkthrough:

  1. Create a ‘Handle Landing Page Lead’ Flow

    Start a Flow from scratch and create a Request trigger. Once saved,  the URL value will be filled automatically.

    Start a Flow from scratch and create a Request trigger. Once saved,  the URL value will be filled automatically.

    Next, add a Parse JSON action and paste in the following schema

    {
        “type”: “object”,
        “properties”: {
             “topic”: {
                “type”: “string”
              },
              “firstName”: {
                 “type”: “string”
              },
              “lastName”: {
                 “type”: “string”
              },
              “email”: {
                 “type”: “string”
              },
              “mobilePhone”: {
                 “type”: “string”
              }
         }
    }

    Next, add a Parse JSON action and paste in the following schema

    Next, add Dynamics Create Record action. Select your target Dynamics 365 instance and map to the Lead entity.
    Map the previous Parse JSON action output values as Lead attributes.

    Next, add Dynamics Create Record action

    Finally, add a parallel branch element. Add two HTTP Response actions, one handling Lead creation success and the other for failure.
    Both returning code 200, each returning the respective message in the response body.
    Click each response ellipsis and set the ‘Configure run after’ option to handle the
    previous step success and failure respectively. 
    Finally, save the Flow.

    Finally, add a parallel branch element

    Click each response ellipsis and set the ‘Configure run after’ option to handle the

  2. Create HTML Landing page

    Create the following HTML page. Replace the flowRequestURL variable value with Flow Request Action URL generated in the first step.

    <html>
    <head>
        <meta charset="utf-8" />
        <title>Implementing Lead Landing Page with Flow</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body style="font-family:'Segoe UI';background-color:lightskyblue">
            <b>Contact us</b>
            <table>
                <tr>
                    <td><label>Topic</label></td>
                    <td><input type="text" id="topic" name="topic" placeholder="insert topic"></td>
                </tr>
                <tr>
                    <td><label>First Name</label></td>
                    <td><input type="text" id="firstName" name="firstName" placeholder="insert first name"></td>
                </tr>
                <tr>
                    <td><label>Last Name</label></td>
                    <td><input type="text" id="lastName" name="lastName" placeholder="insert last name"></td>
                </tr>
                <tr>
                    <td><label>Email Address</label></td>
                    <td><input type="text" id="email" name="email" placeholder="insert email address"></td>
                </tr>
                <tr>
                    <td><label>Mobile Phone</label></td>
                    <td><input type="text" id="mobilePhone" name="mobilePhone" placeholder="insert mobile phone number"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input value="Send" type="button" onclick="sendRequest()">
                    </td>
                </tr>
            </table>    
        <br />
        <div id="messageArea"></div>
    
        <script type="text/javascript">
    
            // Send new Lead request to Microsoft Flow
            sendRequest = function () {
    
                //set Flow request URL - available once Flow Request step is saved 
                var flowRequestURL = "https://FLOWREQUESTURL";
    
                //set Lead object
                var leadData = {
                    topic: $("#topic").val(),
                    firstName: $("#firstName").val(),
                    lastName: $("#lastName").val(),
                    email: $("#email").val(),
                    mobilePhone: $("#mobilePhone").val()                
                };
    
                //send request
                var req = new XMLHttpRequest();
                req.open("POST", flowRequestURL, true);
                req.setRequestHeader("Accept", "application/json");
                req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                req.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        req.onreadystatechange = null;
                        //handle success
                        if (this.status == 200) {
                            $("#messageArea").text(this.response);
                        }
                        //handle failure
                        else {
                            $("#messageArea").text(this.response);
                        }
                    }
                }
                //send request
                req.send(window.JSON.stringify(leadData));
            }
        </script>
    </body>
    </html>
    

Test your landing page by submitting a new Lead. If all works as expected, it will be instantly created in your Dynamics 365 instance.

Test your landing page by submitting a new Lead

If all works as expected, it will be instantly created in your Dynamics 365 instance.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*