D365: Embed Forms Pro Survey On D365 CE Form

Recently, we got a requirement to embed a Forms Pro survey on Lead Form. In this blog we’ll see the steps to achieve this:

Go to https://formspro.microsoft.com/ and sign in with O365 credential. Click on New Pro Survey to start deisgning the survey.

We designed a simple survey of 3 questions as shown below:

After designing the survey, click on Send.

Since, we’re going to embed the survey on a form, click on Get embed code.

Here, we can pass additional information/parameters to survey using variables. We are using recordId and entityName as additional variables. Select Inline as the embed style.

Once done, click on Generate Code. This will generate code which we can copy and modify as per our requirement.

Below is the generated code which we have copied.

<script src="https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/Embed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/Embed.css" />
<script type="text/javascript">
    function renderSurvey(parentElementId, FirstName, LastName, recordId, entityName) {
        var se = new SurveyEmbed("X1fJ2--6IfghfgkmxIaproINAfgfgfghUOVU6741SURXOVNHSVdaMlgwS01SNhjjhjDUxR0FJOC4u", "https://forms.office.com/", "https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/", "true");
        var context = { "First Name": FirstName, "Last Name": LastName, "recordId": recordId, "entityName": entityName, };
        se.renderInline(parentElementId, context);
    }
</script>

We’ll modify the code based on our requirement and pass value to the variables used. We are getting FirstName, LastName, recordId and entityName from the form whereas we are getting surveyID from System Settings entity for which we are making an API request.

<html>
<head>
    <script src="https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/Embed.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/Embed.css" />
</head>
<body>
    <div id="survey-container"></div>
    <script type="text/javascript">
        function renderSurvey(FirstName, LastName, recordId, entityName, surveyId) {
            var se = new SurveyEmbed(surveyId, "https://forms.office.com/", "https://mfpembedcdnwus2.azureedge.net/mfpembedcontwus2/", "true");
            var context = { "First Name": FirstName, "Last Name": LastName, "recordId": recordId, "entityName": entityName };
            se.renderInline("survey-container", context);
        }

        var recordId = parent.Xrm.Page.data.entity.getId().replace("}", "").replace("{", "");
        var entityName = parent.Xrm.Page.data.entity.getEntityName();
        var FirstName = parent.Xrm.Page.getAttribute("firstname").getValue();
        var LastName = parent.Xrm.Page.getAttribute("lastname").getValue();
        var req = new XMLHttpRequest();
        req.open("GET", parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/dxc_systemsettings?$select=dxc_value&$filter=dxc_name eq 'SurveyID' and  dxc_group eq 'FormsPro'", true);
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var results = JSON.parse(this.response);
                    if (results.value.length > 0) {
                        var surveyId = results.value[0]["dxc_value"];
                        if (surveyId !== null) {
                            renderSurvey(FirstName, LastName, recordId, entityName, surveyId);
                        }
                    }
                } else {
                    Xrm.Utility.alertDialog(this.statusText);
                }
            }
        };
        req.send();
    </script>
</body>
</html>

Let’s create an HTML web resource in CE with the above HTML.

Let’s add a new tab and then a new section to Lead form. Click on Insert Web Resource.

Insert the web resource as shown below. Save and Publish the changes.

Open any Lead record and navigate to Survey tab. We’ll see the survey embedded. Click on Fill out the form to open the survey.

Fill the survey and click Submit.

The response will be recorded. We can go to the survey then click on Responses tab to see the submitted responses.

Clicking on the most recent submitted response, we can see the answers we had provided.

In CE, we can do Advanced Find on Forms Pro Survey Responses entity to see the response.

Opening the most recent response, we can see the answers we had provided. The field Context Data shown below holds information passed to the variables which can be used later.

Including Context Data field in the Advanced Find, we can see it holds information in JSON format. We can parse this information based on our need.

Example: The regarding field on survey response is not auto populated. It’d be nice to see all the survey responses related to a particular Lead record on the same Survey tab.
We can use recordId and entityName values in Context Data field to populate Regarding field. To achieve this, we wrote a post-create plugin on Forms Pro Survey Response, parsed the value of Context Data field and populated Regarding lookup field using record ID and entity Name.

Then, we created a view on Activity entity with the below filter criteria.