Frontend - Alpha Solutions

In this Alpha Solutions Tech Tip, we walk you through how to leverage Azure Logic Apps to submit data to any endpoint using Sitecore Forms.

18.8.20

BY NIKET ASHESH

We’ve been using Sitecore Forms on our projects for some time now. Common themes across project Jira tickets are that business users want to:


  • Collect this data in Sitecore
  • Get notified when a customer fills out a form
  • Connect to engagement plans
  • Trigger goals and events

But when our team recently built a site on Sitecore and gave access to the marketing team, the requirements got a bit more complex. A few examples are:


  • The visitor should get an email after they fill out the form
  • I’d like data to be added to the CRM.
  • Since we use Microsoft Teams, can we populate an excel sheet with the data?

     

  • Can we get a notification on our group chat on Microsoft Teams?

So, our developers got their thinking hats on. Before they could come up with a solution, they were informed by the customer that they had a smaller than expected budget to work with, but that the solution needed to be extensible to include any new integrations and also automate such workflows. (Our team likes a good challenge.)


Sitecore Forms ships with a handful of submit actions that are quite capable but did not meet our needs. However, like anything Sitecore builds, this too is easily extensible. Nonetheless, writing one submit action after the other would not be an option, with the available budget.


After a few discussions our team came up with a solution: Sitecore Forms + Azure Logic Apps.


The core of the idea was to build one submit action that could send data to a logic app and then use Azure Logic App to build the workflow that the marketing team is looking for both now and in the future. The benefits of this would be:


  • Only one deployment to Sitecore

  • Leverage existing connectors that Logic Apps has for CRM, Outlook, Teams, Slack, and other enterprise tools


The following is an illustration of one such workflow (source: https://docs.microsoft.com/en-us/azure/logic-apps/logic-apps-overview)




Sitecore Submit Action Details

The resulting module adds a new submit action called “Submit To Endpoint.” You can use this to GET or POST data to any endpoint you like. For our use case, we are submitting this data to Azure. Here are a few screenshots of the module:



The action will serialize the data collected on the form and submit it to the specified endpoint. Here is the schema of the JSON. This JSON can be used to complete the Logic App:


{
    "properties": {
        "Created": {
            "type": "string"
        },
        "Fields": {
            "items": {
                "properties": {
                    "FieldDataId": {
                        "type": "string"
                    },
                    "FieldItemId": {
                        "type": "string"
                    },
                    "FieldName": {
                        "type": "string"
                    },
                    "FormEntryId": {
                        "type": "string"
                    },
                    "Value": {
                        "type": "string"
                    },
                    "ValueType": {
                        "type": "string"
                    }
                },
                "required": [
                    "FieldDataId",
                    "FormEntryId",
                    "FieldItemId",
                    "FieldName",
                    "Value",
                    "ValueType"
                ],
                "type": "object"
            },
            "type": "array"
        },
        "FormEntryId": {
            "type": "string"
        },
        "FormItemId": {
            "type": "string"
        }
    },
    "type": "object"
}

Where is the code?

 

https://bitbucket.org/alphasolutions/workspace/snippets/dLprqq/sitecore-forms-custom-action

 


Don’t like coding and want to simply use the module? Get in touch with Alpha Solutions, and we’ll give it out for free.