Build custom HTML forms in Power Pages

The form designer within the Data workspace is identical to the one used for model-driven apps. Although it operates on a "what you see is what you get" (WYSIWYG) principle, what's displayed is the model-driven app version, not the Power Pages version.

Another consideration is that when it comes to adjusting the form beyond the basic 2 or 3 column layout, you're restricted in choices.

Power Pages stands out as an excellent low-code solution for website construction. But its versatility doesn't stop there; pro-developers can delve deeper with enhancements using HTML, CSS, and the Power Pages Web API.

By leveraging these technologies, it becomes feasible to craft a bespoke HTML form tailored for reading, writing, and updating data in the Microsoft Dataverse. This gives you the autonomy to shape and set up the form to your preferences, bypassing the limitations inherent to the model-driven app setup.

The pro-code methodology is particularly beneficial for situations that demand distinct specifications when inputting information into Dataverse.

To construct a form for generating new records, follow these steps:

1. Craft a Custom Web Template: This serves as the foundation for your form.

2. Integrate an HTML Form: This will be the main interface for users to input data.

3. Adjust Site Settings: Specify the table and columns relevant to your data capture.

4. Implement Necessary Code:

   • As a response to the 'submit' action on the HTML form, extract the input data and mold it into an object.
   • Forward this object to Dataverse utilizing the Power Pages WebAPI.

5. Incorporate CSS Styling: Refine the visual appearance of your form to make it more user-friendly and aesthetically pleasing.

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

In this example, we'll construct a custom web template employing Visual Studio Code.

Initially, we need to establish a basic HTML form, aligning it with the logical names of the Dataverse table fields intended for creation or update. It's not mandatory for them to match, but it does contribute to clarity and organization.

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 a new entity form for a table in the Dataverse table.

<form id="myForm">
 <label for="docs_name">Name:</label>
 <input type="text" id="docs_name" name="docs_name" required><br>
          
 <label for="docs_description">Description:</label>
 <textarea id="docs_description" name="docs_sessiondescription" required></textarea><br>
          
 <label for="docs_dateandtime">Date and Time:</label>
 <input type="datetime-local" id="docs_dateandtime" 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>

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 Javascript code to create records using Web API on Power Pages

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 Web API 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_name = $('#docs_name').val(); // Text
 record.docs_description = $('#docs_description').val(); // Multiline Text
 record.docs_dateandtime = $('#docs_dateandtime').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",
  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);
    }
  });
}

Although ChatGPT can readily produce this code, the Dataverse REST Builder currently offers a more precise method for this purpose, ensuring the code is formatted correctly.

You can access the complete web template code file, named webapi-create-example.webtemplate.source.html, on my GitHub page.

The code's function is activated when the form is submitted. It captures the input data and incorporates it into a new record object.

This object is then sent to Dataverse through the Web API. If successful, the form resets.

It might appear to be an extensive process just for adding a record to Dataverse, but this method offers unparalleled control. It enables a range of bespoke functionalities not achievable with the standard model-driven forms.

A touch of CSS to make the form look

The style code should be added (ideally as a custom CSS file, but I embedded it on the web template purely out of laziness.)

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.