Adventures with Power Pages: Set Focus On Load

I have a Page that is using an Dataverse Form called Game Create Form (Web).

The Form includes a couple of Lookups for Type and Publisher and a couple of Choices for Category and Mechanism.

In testing my Site, I navigate to the Game Create Page that contains the Game Create Form (Web).

I would expect the Name field to receive focus by default, but for some odd reason, the Mechanism column is receiving the focus.

Ugh! This is a bit annoying! 😕

I spent some time seeing if it was a configuration issue or if there was some other way to fix it, unfortunately I came up with nothing, so I decided to see if I could fix it with JavaScript.

To do this, I need to know if the Name field had an id or name property that I can use in my JavaScript to set the focus on the Name control.

In Microsoft Edge, I right click on the Name field and then click Inspect which displays the Developer Tools.

For those new to the Developer Tools the Name control will be highlighted by default in the HTML code displayed.

I found the id field which had a value of bgn_name, which turned out to be the Logical name of the Name column in my Dataverse table.

Back in Power Pages Studio I navigate to the Game Create Page and click on Edit Code.

This opens up Visual Studio Code.

I open the file where I will add the JavaScript code, it’s named that same as my Page with a js extension, in my case it is called Game Create.en-US.customjs.js.

I add the following code:

I press CTL + S to save my changes.

I hop back over to my Page and click Sync to update my Site with the changes.

I click Preview and then click Desktop.

My Page now focuses the cursor on the Name field! 🎉🥳

There you go, not ideal, but gets the job done! 👍