Power Pages: Pro Code Techniques in the Templates – Custom Saving on Forms with JavaScript and Web API

Today we’re starting a new series of blog posts where I look at some of the more advanced developer techniques that appear within the new templates available for Power Pages. Some of the techniques I may like, other I may have alternatives for, but I’m hoping that if you read this series it will show you the possibilities of what can be done with Power Pages if you’re willing to get your hands dirty with a bit of code.

In our first post, I’m going to look at the technique of using the Form functionality in Power Pages to layout the form itself, but then using custom JavaScript and the Web API to perform a custom save operation.

A Bit of Background

Before we get into the technique itself, I wanted to mention that I consider the Power Pages templates to examples of what can be done with the product, but not necessarily a part of the product itself. What I mean by that is I don’t consider the templates to be meant as the definition of how things should be done. Think of each template as if they were built within their own separate project, with its own scope, budget and timeline, which were not infinite. We also don’t know the skillset of whoever built these templates – perhaps they were experienced Power Pages developers, or maybe this was their first time working with the platform. Just like any project I’ve ever worked on, the end result was not perfection. There are usually things that after everything is done that you’d like to make better.

It is easy to go into the project after the fact and say what could have been done better. But we don’t know how much time was allocated to the team who implemented these templates. So please understand that the purpose of this series isn’t to criticize what was done, but just to look at the techniques so that you can add to your repertoire.

The Technique

The first technique we’ll look at appears in the After School template. This template is intended for after school programs where children can attend various type of courses after their regular school day. As a parent myself with two kids that attend both before and after school programs, I certainly understand the value of having a site that simplifies the registration process.

Specifically, the technique appears in the administrative side of things. Users with the C1 ASP Web Role have the ability the manage the courses that appear to parents for registration – this includes creating, editing, duplicating and deleting courses. This technique is used on the create, edit and duplicate course screens.

The technique involves using the Form feature of Power Pages. The Form feature allows you to define a model-driven (or Dynamics 365 Customer Engagement) Power App form that is displayed for users on Power Pages. Typically with this feature the form defines the layout, and can be used to create, edit or view a Dataverse row. In the case of edit or view, the Form features will automatically prefill the form with the data from that row in Dataverse. In the case of create or edit, the Form features will automatically save the data back to Dataverse. This technique leverages the Form features to define the layout of the form, and to prefill the data from Dataverse, but then uses custom JavaScript and the Web API to perform the saving action manually.

To accomplish this, the default button typically used to save the data (with an id=”UpdateButton”) is removed with JavaScript, and a replacement button (with an id=”updateButton”) is added to the page within the Copy section. Then a custom event handler is added to the click event that invokes field validation, and if that passes, it then gathers all the data and uses either a POST or PATCH request to the Power Pages Web API to persist the data.

You can see examples of this JavaScript in the within the Custom JavaScript field on the following Web Pages:

• [Admin] Create Course
• [Admin] Duplicate Course
• [Admin] Edit Course

The Good, the Bad and the Ugly

To be honest, this is not an approach I’ve used in the past, but mostly because it had never occurred to me to do that.

Obviously the main downside to this technique is that instead of writing no code, you’re responsible for writing quite a bit of JavaScript. Not only does the code have to gather all of the data, but the validation of the fields is also done manually.

For me, the main drawback back to the Form feature in Power Pages are the limitations around user experience – there are only so many different ways you can lay out the form, without getting into PCF controls or other forms of custom JavaScript. So it is interesting to go through all of the work to perform validation and saving in custom JavaScript, but to still rely on the layout provided by the Form feature.

However, this technique does give you more control over the process, and by using the Web API, you can achieve things not possible with Forms out-of-the-box, such as saving an image as part of the create request (while Forms supports file and image columns, they are only for updates, not creates).

So perhaps there was a firm requirement that the image could be uploaded as part of the create. Or maybe the team just want to demonstrate a different way of doing it. Overall, I don’t mind the technique as long as there is a good reason for it.

If we were to use it, I’d probably look at making a couple enhancements. First, rather than manually gathering all the data, I’d write some JavaScript that goes through all the Form elements on the page, and using the name on those fields, which maps to the column names in Dataverse, create the object. It probably wouldn’t be perfect, but it would save quite a few lines of code, and would make it so that some simple changes to the form could be accommodated without any changes to the JavaScript.

Secondly, rather than creating custom validation, I’d lean toward trying to leverage the out-of-the-box validation, and if you needed to enhance it, add custom validator functions only when necessary.

Overall, a very interesting technique, something that I’m sure we’ll use at some point, and I definitely learned something by looking into it!

The post Power Pages: Pro Code Techniques in the Templates – Custom Saving on Forms with JavaScript and Web API appeared first on Engineered Code.