One of the features of Power Pages is the ability to use a model-driven app Dataverse form as a foundation to build create, edit, and read-only forms on Power Pages websites.
This feature goes back to the Adxstudio days where the Adxstudio portal product allowed you to use a Dynamics CRM form and surface it on a webpage.
While this is a powerful and important feature, its not without its drawbacks.
Video version of this blog can be found here:
The form designer in the Data workspace is actually the same designer used for model-driven apps. So while it is a “what you see is what you get” (WYSIWYG) designer, what you see is a model-driven app version and not a Power Pages version, or rather a ‘what you see is a model-driven form and what you will get is a Power Pages form’ (WYSIAMDFAWYWGIAPPF) Doesn’t quite roll off the tongue, does it?
The other aspect is if you want to customize or configure the form beyond the 2 or 3 column layout, your options are limited.
While Power Pages is a great low-code tool to build websites, it also can be extended by pro-developers to provide deeper customizations using features like HTML, CSS, and the Power Pages Web API.
Using these technologies, you can create a fully customized HTML form that you can use to read, write, and update Microsoft Dataverse information, and provide you with the full flexibility to modify and configure the form as you see fit, without having to work with the model-driven app constraints.
This pro-code approach may help with scenarios that have unique requirements for adding information to Dataverse.
The steps to build a form for creating new records break down like this:
- Create a custom web template
- Add an HTML form to capture the data
- Configure site settings for table and columns
- Create code to the do the following:
- On the submit action of the HTML form, take the data and create an object
- Submit the object to Dataverse using the Power Pages WebAPI
- Add some CSS to make the form look nice
Creating a custom web template
To create a custom web template, page template and web page, check out my recent post using Visual Studio Code or check out the official documentation on web templates.
Creating the HTML form to capture data
For this example, I will create a custom web template using Visual Studio Code. See my recent post/video on creating a webpage using Visual Studio.
The first thing is to create a simple HTML form, using the logical names of the Dataverse table fields that I want to either create or update, they don’t need to match, but it does help get things straight.
Who needs a Copilot?
This is where AI tools like ChatGPT come in handy, you can provide the parameters and prompt ChatGPT to generate a regular HTML form for you.
The following is a sample HTML form used to create new sessions for a conference.
<form id="myForm">
<label for="docs_sessionname">Session Name:</label>
<input type="text" id="docs_sessionname" name="docs_sessionname" required><br>
<label for="docs_sessiondescription">Session Description:</label>
<textarea id="docs_sessiondescription" name="docs_sessiondescription" required></textarea><br>
<label for="docs_sessiondateandtime">Session Date and Time:</label>
<input type="datetime-local" id="docs_sessiondateandtime" name="docs_sessiondateandtime" required><br>
<label for="docs_duration">Duration (minutes):</label>
<input type="number" id="docs_duration" name="docs_duration" required><br>
<input type="submit" value="Submit">
</form>You can also learn more about HTML forms here at W3Schools.
Configure site settings to use Web API
As per the Microsoft documentation, you will need to add appropriate site settings to allow the Web API to create new records in Dataverse. You will also need to make sure the correct table permissions are also configured. In my example, I choose * for all fields, in a production setting, only choose the fields that you will need in the WebAPI calls as well as limiting access to data using table permissions.
Create code to create records
Now that we have our form, how can we get the information to Microsoft Dataverse? This is where the Power Pages WebAPI comes in handy.
You will need to add the helper code (AJAX wrapper) to your site and reference it from your web template (the full source code shows this).
Here is some Power Pages WebAPI code that will take the data added to the form and create a new record in Dataverse when the form submit action is called:
$('#myForm').submit(function(event) {
event.preventDefault(); // Prevent the default form submission
// Create a new record object from form data
var record = {};
record.docs_sessionname = $('#docs_sessionname').val(); // Text
record.docs_sessiondescription = $('#docs_sessiondescription').val(); // Multiline Text
record.docs_sessiondateandtime = $('#docs_sessiondateandtime').val(); // Date Time
record.docs_duration = parseInt($('#docs_duration').val()); // Whole Number
// Call the WebAPI helper function to create the record
webapi.safeAjax({
type: "POST",
contentType: "application/json",
url: "/_api/docs_sessions",
data: JSON.stringify(record),
success: function (data, textStatus, xhr) {
var newId = xhr.getResponseHeader("entityid");
console.log(newId);
// Reset the form after successful submission
$('#myForm')[0].reset();
alert("Record added successfully."); //Add alerts because they are so elegant :)
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr);
}
});
}While you can easily get ChatGPT to generate this code, an much more accurate way (at this stage anyway) is to use the Dataverse REST Builder, as it will properly format the code.
The full web template code file (webapi-create-example.webtemplate.source.html) can be found on my GitHub site.
The way this code works is that it is triggered on the submit action of the form. It will take the data entered on the form and add it to a new record object.
The record object will be “posted” to Dataverse using the Web API. On success, the form will be reset.
While this may seem like a lot of extra work just to add a record to Dataverse, you have full control over the process and should open the door for some custom scenarios not available using the regular model-driven forms.
A touch of CSS to make the form look nice
The style code should be added (ideally as a custom CSS file, but I embedded on the web template purely out of laziness.)
<style>
/* Adjust the styles as needed */
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #042B3C;
border-radius: 5px;
background-color: #FEFEFE;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #042B3C;
}
input[type="text"],
textarea,
input[type="datetime-local"],
input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #042B3C;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
background-color: #FEFEFE;
color: #042B3C;
}
input[type="submit"] {
background-color: #76BC21;
color: #FEFEFE;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
input[type="submit"]:hover {
background-color: #FF4712;
}
</style>Stitching it all together
Once the code is written, create a page template and use that to create a web page. Remember to create and assign appropriate table permissions to allow users to create new records.
The form should appear on the website and users with the appropriate permissions should be able to add records.
This example shows the power available to pro-developers to extend Power Pages beyond the low-code features.
Next – editing data using a custom form
Now that we have been able to use a customer form and add data, in my next post, I will show you how to edit existing Dataverse records using a custom form. See post here: https://readyxrm.blog/2023/07/16/build-custom-html-forms-in-power-pages-part-2/
Want to learn mode?
Join me on September 22, 2023 as I deliver a full day class on how to Build powerful websites using Power Pages at the Nordic Summit pre-day.
Register now before all spots are taken!
Summary
Photo by Scott Graham on Unsplash
Nick Doelman is a Senior Content Developer at Microsoft, Power Platform trainer and coach, presenter, Microsoft Certified Trainer, competitive Powerlifter, former Microsoft MVP, and cohost of the Power Platform BOOST! podcast.
ReadyXRM 
2 thoughts on “Build custom HTML forms in Power Pages: Part 1”