Office 365 has good form and survey functionality provided by Microsoft Forms. This post is details a completely different method to collect form data into Microsoft Power Automate, using a jQuery library provided by SurveyJS, which provides greatly enhanced functionality.
So why the need for an alternative method? There are a number of features, which are considered basic form based functionality missing from Microsoft Forms, such as:
- Ability to upload a file with the form submission (10k Votes)
- Basic functionality to be able to manipulate fonts etc (4K Votes)
- Support for additional controls, checkboxes etc (3K Votes)
- Conditional Logic
- Timer for questions to create a quiz
- Regular Expression Support for field validation
And many more. I suspect that Microsoft have to draw a fine line between functionality, ease of use and treading on the toes of business partners.
The method described in this post, satisfies many of the wishes on Microsoft UserVoice and many more besides. Microsoft Forms is incredibly easy to use, but that ease of use does seem to come at the expense of functionality. Check out the video demo where I build this flow from scratch:
Building better form functionality for Office 365 with Power Automate
Before getting into this solution in detail, It is worth pointing out that to build this solution you must have a Power Automate Premium license. That, and a little patience and you will have amazing form functionality in no time at all. Essentially this solution consists of two Power Automate Flows:
- One that delivers the form or survey to the browser.
- One that collects the data from the form submission.
This solution leverages the Power Automate trigger “When a HTTP Request is received” to serve a form. The form is really easy to build using the form creator on SurveyJS.
Click here to see an example form I built in no time. Note, that form is not being delivered via this blog, but served directly from Power Automate. It is worth noting, that although it is being served from Power Automate, the survey itself could be hosted anywhere, it is the data collection that has to be directed to Power Automate.
Using the form creator on SurveyJS takes care of the majority of the work for you. You simply need to put it together in a HTML page. The source of my HTML form looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Power Platform Survey</title> <style> </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://unpkg.com/[email protected]/survey.jquery.min.js"></script> <link href="https://unpkg.com/[email protected]/modern.css" rel="stylesheet" type="text/css"> </head> <body> <div id="surveyContainer"></div> <script> $(document).ready(function() { Survey.StylesManager.applyTheme("modern"); var surveyJSON = {title:"TachyTelic Power Platform Survey Demo"...} function sendDataToServer(survey) { //send Ajax request to your web server. console.log("The results are:" + JSON.stringify(survey.data)); $.ajax({ url: 'https://prod-137.westeurope.logic.azure.com:443/workflows/...', type: 'post', dataType: 'json', contentType: 'application/json', success: function (data) { console.log(data.msg);}, data: JSON.stringify(survey.data) }); } var survey = new Survey.Model(surveyJSON); $("#surveyContainer").Survey({ model: survey, onComplete: sendDataToServer }); }); </script> </body> </html>
As you can see, there is very little code. The form is simply added to a div called surveyContainer. I have highlighted and truncated two sections above:
- Line 17 : This JSON is the entire form definition (The full text is pretty printed below).
- Lines 22-30 : This is where the form results are submitted to the flow that collects and processes the results.
Both of these things deserve a bit more consideration…
The form definition is just a JSON string
Before talking about this point any further, let’s view the form JSON in a neater format:
{
title: "TachyTelic Power Platform Survey Demo",
logo: "https://www.tachytelic.net/wp-content/uploads/Logo-TTNet-blue-small.png",
pages: [{
name: "PowerPlatformSurvey",
elements: [{
type: "text",
name: "emailAddress",
title: "Your email address",
isRequired: true,
validators: [{
type: "email"
}],
inputType: "email",
autoComplete: "email",
placeHolder: "Please enter a valid email address"
}, {
type: "text",
name: "twitterID",
title: "If you have one, what is your Twitter handle"
}, {
type: "text",
name: "youTubeChannel",
title: "If you have one, what is your YouTube Channel",
requiredErrorText: "Please Enter a Valid URL",
validators: [{
type: "regex",
text: "Please Enter a Valid URL",
regex: "^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$"
}]
}, {
type: "rating",
name: "powerAutomateEase",
title: "Overall, how easy do you find Power Platform to work with.",
description: "1 = Very Difficult, 10 = Very Easy",
rateMax: 10
}, {
type: "imagepicker",
name: "powerPlatformFavourite",
title: "What is your favourite Power Platform Product",
choices: [{
value: "PowerAutomate",
text: "Power Automate",
imageLink: "https://www.tachytelic.net/wp-content/uploads/powerautomate.png"
}, {
value: "PowerApps",
text: "Power Apps",
imageLink: "https://www.tachytelic.net/wp-content/uploads/powerapps.png"
}, {
value: "PowerBI",
text: "Power BI",
imageLink: "https://www.tachytelic.net/wp-content/uploads/powerbi.png"
}, {
value: "PowerVA",
text: "Power Virtual Agents",
imageLink: "https://www.tachytelic.net/wp-content/uploads/powervirtualagents.png"
}],
choicesByUrl: {
titleName: "Power "
},
showLabel: true
}]
}]
}
If you take a look at line 38 for example, you can see the definition for the picker. Because this is being delivered via Power Automate, you can generate choices to be displayed on the form dynamically from a data source sitting in your Office 365 Environment. Which is another highly requested feature for Microsoft Forms! This would be simple to setup and you could create some very cool functionality with this.
Submission of the data to Power Automate
Line 22 of the code listing is where the code is submitted to second Power Automate Flow, designed to receive the data from the form. But that small section of code shows you how simple it is to submit data from a browser based client capable of running jQuery to Power Automate.
Build the Flows
As stated at the beginning of this post, this solution consists of two flows. One which delivers the form to the client, and another which receives data from the client.
The second flow, which receives the data must be hosted on Power Automate. But the first one can sit anywhere you like. But if you want to change the form contents dynamically as described above, then run it from Power Automate.
First Flow – Deliver the Form to the Browser
In its not dynamic form, this flow is very simple. In my example just a few steps:
The Important bits to note:
- Ensure the method in the first action is set to GET.
- Ensure the headers in the response action are configured to provide Content-Type set to text/html.
The second action in the flow can either be “Get file content using path” as I have done, or a simple compose action. The file that I am retrieving is the HTML source from above. This is probably slightly slower, but makes editing the HTML easier as you can use a proper editor, such as visual studio code.
Second Flow – Receive the results from the client
The second flow can be as simple or as complicated as you choose to make it. The important part is making sure you receive the data. In this simple example, the data is received and added to a SharePoint list:
My flow looks like this:
The important part to note in this flow, is the method of the first action, must be set to post. The video demo at the top of the page makes this step much easier to understand.
Conclusion
Microsoft Forms is a great, easy to use product. If you have more sophisticated requirements, you can get the functionality you need with very little effort by combining Power Automate and SurveyJS. It’s got some incredibly functionality and it is very easy to use.
